渲染函数和template区别

渲染函数h在vue3中被单独抽离出来，可以单独引入使用。

  • 渲染函数可以处理一些强逻辑性展示的组件，比如渲染嵌套的列表。
  • template多用于简单的纯展示组件，没有强逻辑处理。

  • 渲染函数h用于处理一些无法用template解决的组件。

    1. <script src="https://unpkg.com/vue"></script>
    2. <style>
    3.   .mt-4 {
    4.       margin: 10px;
    5.   }
    6. </style>
    7. <div id="app"></div>
    8. <script>
    9.   const {h, createApp} = Vue
    10.   // 定义 Stack 组件
    11.   const Stack = {
    12.       props: ['size'], 
    13.       render() {
    14.           // 获取默认插槽
    15.           const slot = this.$slots.default
    16.               ? this.$slots.default()
    17.               : []
    19.           // 将插槽中的所有内容套上 div，并且读取 props 上的 size 属性，
    20.           // 并构成类名
    21.           return h('div', {class: 'stack'}, slot.map(child => {
    22.               return h('div', {class: `mt-${this.$props.size}`}, [
    23.                   child
    24.               ])
    25.           }))
    26.       }
    27.   }
    29.   // App 组件
    30.   const App = {
    31.       template: `
    32.           <Stack size="4">
    33.             <div>hello</div>
    34.             <Stack size="4">
    35.                 <div>hello</div>
    36.                 <div>hello</div>
    37.             </Stack>
    38.           </Stack>
    39.       `,
    40.       components: {
    41.           Stack
    42.       }
    43.   }
    45.   // 创建 vue 实例并挂载到 DOM 上
    46.   createApp(App).mount('#app')
    47. </script>

    h函数生成虚拟DOM

    h函数是vue3暴露的一个公开API，可以拥有生成vnode.

    1. // vnode的格式
    2. {
    3.   tag:"div,
    4.   props: "",
    5.   children: []
    6. }

    ```javascript import {h} from “vue” const App = { render() { return h(“div”, {

    1. id: "foo",
    2. onClick: this.handleClick

    }, “vue3”) } }

  1. <a name="LsqtW"></a>
  2. ## Compiler & Renderer
  3. 使用[ Vue 3 Template Explorer](https://template-explorer.vuejs.org/)可以看到 Vue 3 把模板template编译成的渲染函数.<br />在处理template到渲染函数的过程，vue3内部进行了很多性能优化设置。给节点标记属性，下次更新时是否进行更新。
  5. - 标记出静态节点，下次更新时，不进行diff操作对比。
  6. - 标记动态属性，供后边diff使用
  7. - 对event进行缓存，在子组件上触发事件时，在patch阶段，不会触发整个子组件的重新渲染。
  8. - 引入 block 的概念；动态更新的节点会被添加到 block 上，无论这个节点有多深，v-if 会开启一个新的 block，这个 block 又被其父 block 跟踪；总的来说就是在 diff 的时候不需要在去深度遍历判断，而是从 block 记录的动态节点数组上，去遍历会变化的 vNode
  9. ```html
  10. <div id="app"></div>
  12. <script>
  13.   function h(tag, props, children) {}
  15.   function mount(vnode, container) {}
  17.   const vdom = h('div', {class: 'red'}, [
  18.     h('span', null, ['hello'])
  19.   ])
  21.   mount(vdom, document.getElementById('app'))
  22. </script>

mount函数的实现

mount参数：

  • VNode：虚拟节点，由h函数生成
  • container：把虚拟节点挂在的dom元素

mount实现的操作流程

  1. 根据vnode创建出真实dom
  2. 设置props属性到dom上
  3. 处理children
  4. 将生成的el，append到container上 ```html
    hello
  1. <a name="yrkMU"></a>
  2. ## patch函数，对比节点并进行更新
  3. `patch(oldNode, newNode)`，patch参数：
  5. - 第一个为旧虚拟节点
  6. - 第二个为新的虚拟节点
  8. ![](https://cdn.nlark.com/yuque/0/2022/jpeg/737887/1651156644660-ac02e44d-a0e9-4929-986b-8c3abafc57f4.jpeg)
  9. ```javascript
  10. // 将虚拟dom节点转为真实dom
  11. function createElm(vnode) {
  12.   let {
  13.     tag,
  14.     props,
  15.     children
  16.   } = vnode;
  17.   if (typeof tag === "string") {
  18.     vnode.el = document.createElement(tag);
  19.   }
  20.   if (props) {
  21.     for (let key in props) {
  22.       let value = props[key];
  23.       vnode.el.setAttribute(key, value);
  24.     }
  25.   }
  26.   if (typeof vnode.children === "string") {
  27.     vnode.el.textContent = vnode.children;
  28.   } else {
  29.     children.forEach(child => {
  30.       return vnode.el.appendChild(createElm(child));
  31.     })
  32.   }
  33.   return vnode.el;
  34. }
  35. // dom diff过程
  36. function patch(n1, n2) {
  37.   if (n1.tag === n2.tag) {
  38.     // n1.el，此处的el属性就是在mount方法中，第21行设置的。
  39.     const el = n2.el = n1.el; //把n1的el真实dom内容，赋值给n2的el属性和单独的el对象上
  40.     const oldProps = n1.props || {};
  41.     const newProps = n2.props || {};
  42.     for (const key in newProps) {
  43.       const oldValue = oldProps[key];
  44.       const newValue = newProps[key];
  45.       if (newValue !== oldValue) {
  46.         el.setAttribute(key, newValue)
  47.       }
  48.     }
  49.     // 处理新节点中不存在的属性,直接将属性移除
  50.     for (const key in oldProps) {
  51.       if (!(key in newProps)) {
  52.         el.removeAttribute(key)
  53.       }
  54.     }
  55.     const oldChildren = n1.children;
  56.     const newChildren = n2.children;
  57.     if (typeof newChildren === "string") { // 新节点是字符串，直接删除旧节点，并使新接的文本
  58.       if (typeof oldChildren === "string") {
  59.         if (newChildren !== oldChildren) {
  60.           el.textContent = newChildren
  61.         }
  62.       } else { //旧节点不是字符串，说明包含多个子节点。同样也直接删除
  63.         el.textContent = newChildren
  64.       }
  65.     } else { //
  66.       if (typeof oldChildren === "string") { //旧节点是字符串，新节点是多个子元素
  67.         el.innerHTML = '';
  68.         newChildren.forEach(child => {
  69.           mount(child, el)
  70.         })
  71.       } else { //旧节点多个子元素，新节点多个子元素
  72.         // 找出新旧节点最长的共用长度
  73.         const commonLength = Math.min(oldChildren.length, newChildren.length);
  74.         // 比对公共长度的节点
  75.         for(let i = 0; i < commonLength; i++) {
  76.           patch(oldChildren[i], newChildren[i]);
  77.         }
  78.         // 如果新节点长度大于旧节点长度
  79.         if(newChildren.length > oldChildren.length){
  80.           newChildren.slice(oldChildren.length).forEach(child=>{
  81.             mount(child, el)
  82.           })
  83.         }
  84.         // 如果旧节点长度大于新节点长度
  85.         if(newChildren.length < oldChildren.length){
  86.           oldChildren.slice(newChildren).forEach(child=>{
  87.             el.removeChild(child.el)
  88.           })
  89.         }
  90.       }
  91.     }
  92.   } else {
  93.     // 直接替换replace
  94.     n1.el.parentNode.replaceChild(createElm(vdom2), n1.el);
  95.   }
  96. }
  98. const vdom = h('div', {
  99.   class: 'red'
  100. }, [
  101.   h('span', null, 'hello')
  102. ])
  103. const vdom2 = h('p', {
  104.   class: 'blue'
  105. }, [
  106.   h('span', null, 'changed'),
  107.   h('p', {class: 'red'}, 'changed1'),
  108. ])
  109. // console.log(createElm(vdom2), 'dom2');
  110. mount(vdom, document.getElementById('app'))

Reactive响应式

一个值发生变化，依赖该值的数据会自动发生变化。

  1. // let a = 10;
  2. // let b = a *2;
  3. // console.log(b) //20
  4. // a = 15; 
  5. // 如何让b的值变成30；// console.log(b) ？==30
  7. onAChanged(() => {
  8.   b = a *2;
  9. })

vue3响应式示例

  1. import { ractive, watchEffect } from 'vue'
  3. // 创建一个响应式对象
  4. const state = reactive({
  5.     count: 0
  6. })
  8. // 会收集所有的依赖，在执行过程，如果某个响应式属性被使用，那么整个函数就会执行
  9. // 相当于上面提到的 onAChanged
  10. watchEffect(() => {
  11.     console.log(state.count)
  12. }) // 0
  14. state.count++ // 1

Dep类的实现

Dep类的两个方法：depend和notify；

  • depend：用于添加追踪依赖

  • notify：用于更新依赖的属性

    初步实现Dep类，手动收集依赖和派发更新

    1. let activeEffect = null;
    2. class Dep {
    3.   constructor(value){
    4.       this.subscribers = new Set();
    5.       this.value = value;
    6.   }
    8.   depend() {
    9.     if (activeEffect) {
    10.       this.subscribers.add(activeEffect);
    11.     }
    12.   }
    14.   notify() {
    15.     this.subscribers.forEach((effect) => effect());
    16.   }
    17. }
    19. // 和onAChanged作用一样，自动更新依赖属性
    20. function watchEffect(effect) {
    21.   activeEffect = effect;
    22.   effect(); //首次是 自己执行 触发effect，以后数据发生变化就走notify中触发effect
    23.   activeEffect = null;
    24. }
    26. const dep = new Dep('hello');
    28. watchEffect(() => {
    29.   dep.depend();
    30.   console.log("effect run", dep.value);
    31. });
    32. // 手动执行的更新
    33. dep.value = "world";
    34. dep.notify();

    vue中采用的自动更新

    1. let activeEffect = null;
    2. class Dep {
    3.   constructor(value){
    4.       this.subscribers = new Set();
    5.       this._value = value;
    6.   }
    7.   get value(){
    8.     this.depend(); //自动执行depend，收集依赖
    9.     return this._value;
    10.   }
    11.   set value(newValue){
    12.     this._value = newValue;
    13.     this.notify(); //自动执行派发更新， notify
    14.   }
    16.   depend() {
    17.     if (activeEffect) {
    18.       this.subscribers.add(activeEffect);
    19.     }
    20.   }
    22.   notify() {
    23.     this.subscribers.forEach((effect) => effect());
    24.   }
    25. }
    27. // 和onAChanged作用一样，自动更新依赖属性
    28. function watchEffect(effect) {
    29.   activeEffect = effect;
    30.   // 这里就是watchEffect中的监听会默认先执行一次；watch不能执行，必须设置immdiate才能立即执行
    31.   effect(); //首次是 自己执行 触发effect，以后数据发生变化就走notify中触发effect
    32.   activeEffect = null;
    33. }
    35. const dep = new Dep('hello');
    37. watchEffect(() => {
    38.   dep.depend();
    39.   console.log("effect run", dep.value);
    40. });
    41. // 手动执行的更新
    42. dep.value = "world";
    43. dep.notify();

    Reactive类的实现

    利用上面实现的Dep类，完成数据响应式的方法函数reactive。响应式数据的值是数据本身，所以创建的Dep类可以简化，不需要value值。

    1. let activeEffect = null;
    2. class Dep{
    3. subscribers = new Set();
    4. depend() {
    5.   if (activeEffect) {
    6.     this.subscribers.add(activeEffect);
    7.   }
    8. }
    9. notify() {
    10.   this.subscribers.forEach((effect) => effect());
    11. }
    12. }
    13. function watchEffect(effect) {
    14. activeEffect = effect;
    15. effect();
    16. activeEffect = null;
    17. }

    ES5的defineProperty实现

    在Object.defineProperty的get/set中 进行依赖收集/派发更新。

    1. <div id="app"></div>
    2. <script>
    3. let activeEffect = null;
    4. class Dep {
    5.   subscribers = new Set();
    7.   depend() {
    8.     if (activeEffect) {
    9.       this.subscribers.add(activeEffect);
    10.     }
    11.   }
    12.   notify() {
    13.     this.subscribers.forEach((effect) => effect());
    14.   }
    15. }
    16. function watchEffect(effect) {
    17.   activeEffect = effect;
    18.   effect();
    19.   activeEffect = null;
    20. }
    22. function reactive(raw) {
    23.   // 获取对象key
    24.   Object.keys(raw).forEach((key) => {
    25.     let value = raw[key];
    26.     let dep = new Dep();
    27.     Object.defineProperty(raw, key, {
    28.       get() {
    29.         dep.depend();
    30.         return value;
    31.       },
    32.       set(newValue) {
    33.         // 先进行 赋值
    34.         value = newValue;
    35.         // 再进行更新
    36.         dep.notify();
    37.       },
    38.     });
    39.   });
    40.   return raw;
    41. }
    43. let state = reactive({
    44.   count: 0,
    45. });
    47. watchEffect(() => {
    48.   console.log(state.count);
    49. });
    50. state.count++;
    51. </script>

    defineProperty的缺陷，无法拦截新增属性，和数组的push、pop、shift、unshfit、sort、reverse、splice方法。

    ES6的Proxy实现

    使用Proxy对象进行代理，代理的是整个对象的值，可以解决defineProperty的缺陷。

    1. <div id="app"></div>
    2. <script>
    3. let activeEffect = null;
    4. class Dep {
    5.   subscribers = new Set();
    7.   depend() {
    8.     if (activeEffect) {
    9.       this.subscribers.add(activeEffect);
    10.     }
    11.   }
    12.   notify() {
    13.     this.subscribers.forEach((effect) => effect());
    14.   }
    15. }
    16. function watchEffect(effect) {
    17.   activeEffect = effect;
    18.   effect();
    19.   activeEffect = null;
    20. }
    22. function searchDep(target, key) {
    23.   let depsMap = targetMap.get(target);
    24.   if (!depsMap) {
    25.     targetMap.set(target, (depsMap = new Map()));
    26.   }
    27.   let dep = depsMap.get(key);
    28.   if (!dep) {
    29.     depsMap.set(key, (dep = new Dep()));
    30.   }
    31.   return dep;
    32. }
    33. // 创建一个存放 deps 的弱引用 Map，key 为 target 本身
    34. // 即需要响应式处理的对象本身
    35. // WeakMap 只能用 object 作为 key，并且无法被遍历
    36. // 当 target 不再需要的时候，可以正确地被垃圾处理机制回收
    37. let targetMap = new WeakMap();
    38. function reactive(raw) {
    39.   return new Proxy(raw, {
    40.     get(target, key, receiver) {
    41.       let dep = searchDep(target, key);
    42.       dep.depend();
    43.       return Reflect.get(target, key, receiver);
    44.     },
    45.     set(target, key, value, receiver) {
    46.       let dep = searchDep(target, key);
    47.       let res = Reflect.set(target, key, value, receiver);
    48.       dep.notify();
    49.       return res;
    50.     },
    51.   });
    52. }
    54. let state = reactive({
    55.   count: 0,
    56. });
    58. watchEffect(() => {
    59.   console.log(state.count, "watchEffect");
    60. });
    61. state.count++;
    62. </script>

    这样就可以监听到新增属性的数据变化。

    miniVue

    实现一个Vue，主要采用上面已经实现的方法。

    基本架构：

    ```html 

  1. <a name="gNeCR"></a>
  2. ### 具体实现
  3. <a name="SM1t0"></a>
  4. #### 修正mount方法，满足处理事件
  5. ```javascript
  6. function mount(vnode, container) {
  7.   const tag = vnode.tag;
  8.   const el = (vnode.el = document.createElement(tag)); // 在vnode上添加el属性，用来存储原dom结构
  10.   // props
  11.   if (vnode.props) {
  12.     for (let key in vnode.props) {
  13.       let value = vnode.props[key];
  14.       // 添加对事件属性的处理
  15. +     if (key.startsWith("on")) {
  16. +        el.addEventListener(key.slice(2).toLowerCase(), value);
  17. +      } else {
  18.         el.setAttribute(key, value);
  19. +      }
  20.     }
  21.   }
  22.   // children
  23.   if (vnode.children) {
  24.     if (typeof vnode.children === "string") {
  25.       el.textContent = vnode.children;
  26.     } else {
  27.       vnode.children.forEach((child) => {
  28.         mount(child, el);
  29.       });
  30.     }
  31.   }
  33.   container.appendChild(el);
  34. }

完整miniVue

  1. <div id="app"></div>
  2. <script>
  3.   // vDom
  4.   function h(tag, props, children) {
  5.     return {
  6.       tag,
  7.       props,
  8.       children,
  9.     };
  10.   }
  12.   function mount(vnode, container) {
  13.     const tag = vnode.tag;
  14.     // 在vnode上添加el属性，用来存储原dom结构
  15.     const el = (vnode.el = document.createElement(tag));
  17.     // props
  18.     if (vnode.props) {
  19.       for (let key in vnode.props) {
  20.         let value = vnode.props[key];
  21.         // 添加对事件属性的处理
  22.         if (key.startsWith("on")) {
  23.           el.addEventListener(key.slice(2).toLowerCase(), value);
  24.         } else {
  25.           el.setAttribute(key, value);
  26.         }
  27.       }
  28.     }
  29.     // children
  30.     if (vnode.children) {
  31.       if (typeof vnode.children === "string") {
  32.         el.textContent = vnode.children;
  33.       } else {
  34.         vnode.children.forEach((child) => {
  35.           mount(child, el);
  36.         });
  37.       }
  38.     }
  40.     container.appendChild(el);
  41.   }
  43.   // 将虚拟dom节点转为真实dom
  44.   function createElm(vnode) {
  45.     let { tag, props, children } = vnode;
  46.     if (typeof tag === "string") {
  47.       vnode.el = document.createElement(tag);
  48.     }
  49.     if (props) {
  50.       for (let key in props) {
  51.         let value = props[key];
  52.         vnode.el.setAttribute(key, value);
  53.       }
  54.     }
  55.     if (typeof vnode.children === "string") {
  56.       vnode.el.textContent = vnode.children;
  57.     } else {
  58.       children.forEach((child) => {
  59.         return vnode.el.appendChild(createElm(child));
  60.       });
  61.     }
  62.     return vnode.el;
  63.   }
  64.   // dom diff过程
  65.   function patch(n1, n2) {
  66.     if (n1.tag === n2.tag) {
  67.       //把n1的el真实dom内容，赋值给n2的el属性和单独的el对象上
  68.       const el = (n2.el = n1.el); 
  69.       const oldProps = n1.props || {};
  70.       const newProps = n2.props || {};
  71.       for (const key in newProps) {
  72.         const oldValue = oldProps[key];
  73.         const newValue = newProps[key];
  74.         if (newValue !== oldValue) {
  75.           el.setAttribute(key, newValue);
  76.         }
  77.       }
  78.       // 处理新节点中不存在的属性,直接将属性移除
  79.       for (const key in oldProps) {
  80.         if (!(key in newProps)) {
  81.           el.removeAttribute(key);
  82.         }
  83.       }
  84.       const oldChildren = n1.children;
  85.       const newChildren = n2.children;
  86.       if (typeof newChildren === "string") {
  87.         // 新节点是字符串，直接删除旧节点，并使新接的文本
  88.         if (typeof oldChildren === "string") {
  89.           if (newChildren !== oldChildren) {
  90.             el.textContent = newChildren;
  91.           }
  92.         } else {
  93.           //旧节点不是字符串，说明包含多个子节点。同样也直接删除
  94.           el.textContent = newChildren;
  95.         }
  96.       } else {
  97.         if (typeof oldChildren === "string") {
  98.           //旧节点是字符串，新节点是多个子元素
  99.           el.innerHTML = "";
  100.           newChildren.forEach((child) => {
  101.             mount(child, el);
  102.           });
  103.         } else {
  104.           //旧节点多个子元素，新节点多个子元素
  105.           // 找出新旧节点最长的共用长度
  106.           const commonLength=Math.min(oldChildren.length, newChildren.length);
  107.           // 比对公共长度的节点
  108.           for (let i = 0; i < commonLength; i++) {
  109.             patch(oldChildren[i], newChildren[i]);
  110.           }
  111.           // 如果新节点长度大于旧节点长度
  112.           if (newChildren.length > oldChildren.length) {
  113.             newChildren.slice(oldChildren.length).forEach((child) => {
  114.               mount(child, el);
  115.             });
  116.           }
  117.           // 如果旧节点长度大于新节点长度
  118.           if (newChildren.length < oldChildren.length) {
  119.             oldChildren.slice(newChildren).forEach((child) => {
  120.               el.removeChild(child.el);
  121.             });
  122.           }
  123.         }
  124.       }
  125.     } else {
  126.       // 直接替换replace
  127.       n1.el.parentNode.replaceChild(createElm(vdom2), n1.el);
  128.     }
  129.   }
  131.   // reactivity
  133.   let activeEffect = null;
  134.   class Dep {
  135.     subscribers = new Set();
  137.     depend() {
  138.       if (activeEffect) {
  139.         this.subscribers.add(activeEffect);
  140.       }
  141.     }
  142.     notify() {
  143.       this.subscribers.forEach((effect) => effect());
  144.     }
  145.   }
  146.   function watchEffect(effect) {
  147.     activeEffect = effect;
  148.     effect();
  149.     activeEffect = null;
  150.   }
  152.   function searchDep(target, key) {
  153.     let depsMap = targetMap.get(target);
  154.     if (!depsMap) {
  155.       targetMap.set(target, (depsMap = new Map()));
  156.     }
  157.     let dep = depsMap.get(key);
  158.     if (!dep) {
  159.       depsMap.set(key, (dep = new Dep()));
  160.     }
  161.     return dep;
  162.   }
  164.   let targetMap = new WeakMap();
  165.   function reactive(raw) {
  166.     return new Proxy(raw, {
  167.       get(target, key, receiver) {
  168.         let dep = searchDep(target, key);
  169.         dep.depend();
  170.         return Reflect.get(target, key, receiver);
  171.       },
  172.       set(target, key, value, receiver) {
  173.         let dep = searchDep(target, key);
  174.         let res = Reflect.set(target, key, value, receiver);
  175.         dep.notify();
  176.         return res;
  177.       },
  178.     });
  179.   }
  181.   // App 组件
  182.   const App = {
  183.     data: reactive({
  184.       count: 0,
  185.     }),
  186.     render() {
  187.       return h(
  188.         "div",
  189.         {
  190.           // 这里需要在 mount 中添加事件处理
  191.           onClick: () => {
  192.             this.data.count++;
  193.           },
  194.         },
  195.         String(this.data.count)
  196.       ); // 第三个参数这里暂时只支持 String类型
  197.     },
  198.   };
  200.   // 挂载 App
  201.   function createApp(component, container) {
  202.     let isMounted = false;
  203.     let prevVdom;
  204.     // component 组件中有响应式对象发生变化，便会执行以下函数
  205.     watchEffect(() => {
  206.       if (!isMounted) {
  207.         // 没有挂载，即初始化
  208.         // 记录旧的 vdom
  209.         prevVdom = component.render();
  210.         // 挂载
  211.         mount(prevVdom, container);
  212.         isMounted = true;
  213.       } else {
  214.         // 获取新的 vdom
  215.         const newVdom = component.render();
  216.         // patch
  217.         patch(prevVdom, newVdom);
  218.         prevVdom = newVdom;
  219.       }
  220.     });
  221.   }
  222. createApp(App, document.getElementById("app"));
  223. </script>

新增App组件，和createApp的方法。
App组件包含：data数据，render方法。
createApp：创建并挂载实例

代码组织和重用 CompositionAPI

composition组合式API，可以任意复用，实质上就是函数的调用。

  1. function useFeature(){
  2.   onMounted(()=> console.log("mounted"))
  3. }
  5. export default{
  6.   tempalte: `{{event.count}}`,
  7.   props: ["id"],
  8.   setup(props){
  9.     // 方便复用
  10.     useFeature();
  12.     return {
  13.       event: {count: ref(0)}
  14.     }
  15.   }
  16. }

对比optionAPI和Composite API建立鼠标移动

  1. <script src="http://unpkg.com/vue"></script>
  2. <div id="app"></div>
  3. <script>
  4.   const { createApp } = Vue;
  5.   const App = {
  6.     template: `{{x}} {{y}}`,
  7.     data() {
  8.       return {
  9.         x: 0,
  10.         y: 0,
  11.       };
  12.     },
  13.     methods: {
  14.       update(e) {
  15.         this.x = e.clientX;
  16.         this.y = e.clientY;
  17.       },
  18.     },
  19.     mounted() {
  20.       window.addEventListener("mousemove", this.update);
  21.     },
  22.     unmounted() {
  23.       window.addEventListener("mousemove", this.update);
  24.     },
  25.   };
  26.   createApp(App).mount("#app");
  27. </script>

optionAPI逻辑复用mixin

为了实现逻辑复用，可以使用mixin，但是当存在多个mixin引入使用时，没法区分变量来自哪个mixin。

  1. <script src="http://unpkg.com/vue"></script>
  2. <div id="app"></div>
  3. <script>
  4.   const { createApp } = Vue;
  5.   const mouseMoveMixin = {
  6.     data() {
  7.       return {
  8.         x: 0,
  9.         y: 0,
  10.       };
  11.     },
  12.     methods: {
  13.       update(e) {
  14.         this.x = e.clientX;
  15.         this.y = e.clientY;
  16.       },
  17.     },
  18.     mounted() {
  19.       window.addEventListener("mousemove", this.update);
  20.     },
  21.     unmounted() {
  22.       window.addEventListener("mousemove", this.update);
  23.     },
  24.   };
  25.   const otherMixin = {
  26.     data() {
  27.       return {
  28.         x: 0,
  29.         y: 0,
  30.       };
  31.     },
  32.     methods: {
  33.       update(e) {
  34.         this.x = e.clientX + 'px';
  35.         this.y = e.clientY + 'px';
  36.       },
  37.     },
  38.     mounted() {
  39.       window.addEventListener("mousemove", this.update);
  40.     },
  41.     unmounted() {
  42.       window.addEventListener("mousemove", this.update);
  43.     },
  44.   };
  45.   const App = {
  46.     // 多个mixin同时存在，如果变量名重复出现，后边的会覆盖前面。
  47.     template: `{{x}} {{y}}`,
  48.     mixins: [mouseMoveMixin, otherMixin],
  49.   };
  50.   createApp(App).mount("#app");
  51. </script>

使用slot解决复用变量重名问题

  1. <script src="http://unpkg.com/vue"></script>
  2. <div id="app"></div>
  3. <script>
  4.   const { createApp } = Vue;
  5.   const Mouse = {
  6.     data() {
  7.       return {
  8.         x: 0,
  9.         y: 0,
  10.       };
  11.     },
  12.     methods: {
  13.       update(e) {
  14.         this.x = e.clientX;
  15.         this.y = e.clientY;
  16.       },
  17.     },
  18.     mounted() {
  19.       window.addEventListener("mousemove", this.update);
  20.     },
  21.     unmounted() {
  22.       window.addEventListener("mousemove", this.update);
  23.     },
  24.     render() {
  25.       return (
  26.         this.$slots.default &&
  27.         this.$slots.default({
  28.           x: this.x,
  29.           y: this.y,
  30.         })
  31.       );
  32.     },
  33.   };
  34.   const Other = {
  35.     data() {
  36.       return {
  37.         x: 0,
  38.         y: 0,
  39.       };
  40.     },
  41.     methods: {
  42.       update(e) {
  43.         this.x = e.clientX + "px";
  44.         this.y = e.clientY + "px";
  45.       },
  46.     },
  47.     mounted() {
  48.       window.addEventListener("mousemove", this.update);
  49.     },
  50.     unmounted() {
  51.       window.addEventListener("mousemove", this.update);
  52.     },
  53.     render() {
  54.       return (
  55.         this.$slots.default &&
  56.         this.$slots.default({
  57.           x: this.x,
  58.           y: this.y,
  59.         })
  60.       );
  61.     },
  62.   };
  63.   const App = {
  64.     components: { Mouse, Other },
  65.     template: `<Mouse v-slot='{x, y}'>
  66.         <Other v-slot='{x: otherX, y: otherY}'>
  67.           {{x}} {{y}} --- {{otherX}} {{otherY}}
  68.         </Other>
  69.       </Mouse>`,
  70.   };
  71.   createApp(App).mount("#app");
  72. </script>

Composite API逻辑复用

  1. <script src="http://unpkg.com/vue"></script>
  2. <div id="app"></div>
  3. <script>
  4.   const { createApp, ref, onUnmounted, onMounted } = Vue;
  5.   const useMouse = () => {
  6.     const x = ref(0);
  7.     const y = ref(0);
  8.     const update = (e) => {
  9.       x.value = e.clientX;
  10.       y.value = e.clientY;
  11.     };
  12.     onMounted(() => {
  13.       window.addEventListener("mousemove", update);
  14.     });
  15.     onUnmounted(() => {
  16.       window.removeEventListener("mousemove", update);
  17.     });
  18.     return { x, y };
  19.   };
  20.   const App = {
  21.     template: `{{x}} {{y}}`,
  22.     setup() {
  23.       // 可以在此处修改引入的变量名
  24.       let { x, y } = useMouse();
  25.       return { x, y };
  26.     },
  27.   };
  28.   createApp(App).mount("#app");
  29. </script>

Composition API Example

  1. <script src="https://unpkg.com/vue"></script>
  2. <div id="app"></div>
  3. <script>
  4.   const { createApp, ref, watchEffect } = Vue;
  6.   // 进一步简化在组件中的 use
  7.   function usePost(getId) {
  8.     return useFetch(
  9.       () => `https://jsonplaceholder.typicode.com/todos/${getId()}`
  10.     );
  11.   }
  13.   // 抽出 fetch，并且你可以在的 useFetch 中使用 watchEffect 来监听传进来的值的变化
  14.   function useFetch(getUrl) {
  15.     const data = ref(null);
  16.     const error = ref(null);
  17.     const isPending = ref(true);
  19.     watchEffect(() => {
  20.       // reset
  21.       data.value = null;
  22.       error.value = null;
  23.       isPending.value = true;
  24.       // fetch
  25.       fetch(getUrl())
  26.         .then((res) => res.json())
  27.         .then((_data) => {
  28.           data.value = _data;
  29.         })
  30.         .catch((err) => {
  31.           error.value = err;
  32.         })
  33.         .finally(() => {
  34.           isPending.value = false;
  35.         });
  36.     });
  38.     return {
  39.       data,
  40.       error,
  41.       isPending,
  42.     };
  43.   }
  45.   const Post = {
  46.     template: `
  47.             <div v-if="isPending">loading</div>
  48.             <div v-else-if="data">{{ data }}</div>
  49.             <div v-else-if="error">Something went Wrong: {{ error.message }}</div>
  50.         `,
  51.     props: ["id"],
  52.     setup(props) {
  53.       // prop.id 被传到了 useFetch 的 watchEffect 中
  54.       // 所以 prop.id 变化，即可重新 fetch
  55.       const { data, error, isPending } = usePost(() => props.id);
  57.       return {
  58.         data,
  59.         error,
  60.         isPending,
  61.       };
  62.     },
  63.   };
  65.   const App = {
  66.     components: { Post },
  67.     data() {
  68.       return {
  69.         id: 1,
  70.       };
  71.     },
  72.     template: `
  73.        <button @click="id++">change ID</button>
  74.        <Post :id="id"></Post>
  75.     `,
  76.   };
  78.   createApp(App).mount("#app");
  79. </script>

代码地址
视频参考