Vue响应式原理

Vue 使用 Object.defineProperty 定义 setter/getter 函数对数据进行劫持，实现数据的响应式。在 getter 函数中进行依赖收集，在 setter 函数中触发更新操作。

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  7.     <title>Document</title>
  8.   </head>
  9.   <body>
  10.     <div id="app">
  11.       <p>你好，<span id="name"></span></p>
  12.     </div>
  13.     <script>
  14.       var obj = {};
  15.       Object.defineProperty(obj, "name", {
  16.         get() {
  17.           console.log("获取name");
  18.           return document.querySelector("#name").innerHTML;
  19.         },
  20.         set(nick) {
  21.           console.log("设置name");
  22.           document.querySelector("#name").innerHTML = nick;
  23.         }
  24.       });
  26.       obj.name = "Jerry";
  27.       console.log(obj.name);
  28.     </script>
  29.   </body>
  30. </html>

Vue工作机制（简化版）

手写Vue源码 - 图1

Vue源码实现（简化版）

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.   <meta charset="utf-8">
  5.   <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.   <title>Page Title</title>
  7.   <meta name="viewport" content="width=device-width, initial-scale=1">
  8. </head>
  9. <body>
  10.     <div>
  11.       {{name}}
  12.     </div>
  13.   <script>
  15.     // 递归遍历，使传递进来的对象响应化
  16.     function observe(obj) {
  17.       // 判断类型
  18.       if (!obj || typeof obj !== 'object') {
  19.         return
  20.       }
  21.       Object.keys(obj).forEach(key => {
  22.         defineReactive(obj, key, obj[key])
  23.       })
  24.     }
  26.     function defineReactive(obj, key, val) {
  27.       // 递归子属性
  28.       observe(val)
  29.       let dp = new Dep()
  30.       Object.defineProperty(obj, key, {
  31.         enumerable: true,
  32.         configurable: true,
  33.         get: function reactiveGetter() {
  34.           console.log('get value')
  35.           // 将Dep.target指向的Watcher实例加入到Dep中
  36.           if (Dep.target) {
  37.             dp.addSub(Dep.target)
  38.           }
  39.           return val
  40.         },
  41.         set: function reactiveSetter(newVal) {
  42.           console.log('change value')
  43.           val = newVal
  44.           // 执行 watcher 的 update 方法
  45.           dp.notify()
  46.         }
  47.       })
  48.     }
  50.     // 通过 Dep类 解耦属性的依赖收集和更新操作（Dep 类是一个简单的观察者模式的实现）
  51.     class Dep {
  52.       constructor() {
  53.         this.subs = []
  54.       }
  55.       // 添加依赖
  56.       addSub(sub) {
  57.         this.subs.push(sub)
  58.       }
  59.       // 更新
  60.       notify() {
  61.         this.subs.forEach(sub => {
  62.           sub.update()
  63.         })
  64.       }
  65.     }
  67.     // 全局属性，通过该属性配置 Watcher
  68.     Dep.target = null
  70.     class Watcher {
  71.       constructor(obj, key, cb) {
  72.         this.obj = obj
  73.         this.key = key
  74.         this.cb = cb
  76.         Dep.target = this // 将 Dep.target 指向自己
  77.         obj[key] // 读一次key触发getter
  78.         Dep.target = null  // 最后将 Dep.target 置空
  79.       }
  80.       update() {
  81.         // 获得新值
  82.         this.value = this.obj[this.key]
  83.         // 调用 update 方法更新 DOM
  84.         this.cb(this.value)
  85.       }
  86.     }
  89.     // 组件初始化的时候执行 observe 方法
  90.     var data = { name: 'yck' }
  92.     observe(data)
  94.     // 编译器工作：解析模板，收集依赖，创建 Watcher 和 update 函数（这里的 update 函数会在 Watcher 执  行自身的 update 函数时被调用，从而更新 DOM）
  95.     // 完整的编译器再执行 更新DOM 操作之前，会有一个 patch 过程，该过程会执行 diff算法， 进行虚拟DOM的比对，然后再更新 DOM
  96.     function update(value) {
  97.       document.querySelector('div').innerText = value
  98.     }
  100.     // 模拟解析到 `{{ name }}` 触发的操作
  101.     let watch = new Watcher(data, 'name', update)
  103.     // update Dom innerText
  104.     data.name = 'yyy'
  105.   </script>
  106. </body>
  107. </html>

Vue工作机制

手写Vue源码 - 图2

  • 在 new Vue() 之后。 Vue 会调用 init 函数进行初始化，其中最重要的是通过 Object.defineProperty 设置 setter 与 getter 函数，实现数据的响应式。
  • 初始化之后调用 $mount 挂载组件，进行编译操作，对 template 进行解析，编译可以分成parse、optimize 与 generate 三个阶段，最终得到 render function string：
    • parse：生成 AST（抽象语法树）
    • optimize：优化，判断标签中是否绑定了数据等
    • generate：AST —> renderStr（渲染函数字符串），通过 new Function(renderStr) 最终得到 render function
  • 执行 render 方法生成虚拟DOM，在虚拟 DOM 映射到真实 DOM 之前有一个 patch 过程，该过程会执行 diff 算法进行优化，减少重复的操作。最后生成真实 DOM。

diff 算法

diff 算法可以比对出两颗树的「差异」，我们来看一下，假设我们现在有如下两颗树，它们分别是新老 VNode 节点，这时候到了 patch 的过程，我们需要将他们进行比对，diff 算法是通过同层的树节点进行比较而非对树进行逐层搜索遍历的方式，所以时间复杂度只有 O(n)，是一种相当高效的算法，如下图。

手写Vue源码 - 图3

这张图中的相同颜色的方块中的节点会进行比对，比对得到「差异」后将这些「差异」更新到视图上。因为只进行同层级的比对，所以十分高效。

  1. function patch (oldVnode, vnode, parentElm) {
  2.     if (!oldVnode) {
  3.         addVnodes(parentElm, null, vnode, 0, vnode.length - 1);
  4.     } else if (!vnode) {
  5.         removeVnodes(parentElm, oldVnode, 0, oldVnode.length - 1);
  6.     } else {
  7.         if (sameVnode(oldVNode, vnode)) {
  8.             patchVnode(oldVNode, vnode);
  9.         } else {
  10.             removeVnodes(parentElm, oldVnode, 0, oldVnode.length - 1);
  11.             addVnodes(parentElm, null, vnode, 0, vnode.length - 1);
  12.         }
  13.     }
  14. }

首先在 oldVnode（老 VNode 节点）不存在的时候，相当于新的 VNode 替代原本没有的节点，所以直接用 addVnodes 将这些节点批量添加到 parentElm 上。
然后同理，在 vnode（新 VNode 节点）不存在的时候，相当于要把老的节点删除，所以直接使用 removeVnodes 进行批量的节点删除即可。
最后一种情况，当 oldVNode 与 vnode 都存在的时候，需要判断它们是否属于 sameVnode（相同的节点）。如果是则进行patchVnode（比对 VNode ）操作，否则删除老节点，增加新节点。

Vue 源码实现

index.html

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  7.     <title>Document</title>
  8.   </head>
  10.   <body>
  11.     <div id="app">
  12.       <p>{{ name }}</p>
  13.       <p k-text="name"></p>
  14.       <p>{{ age }}</p>
  15.       <p>
  16.         {{ doubleAge }}
  17.       </p>
  18.       <input type="text" k-model="name" />
  19.       <button @click="changeName">测试</button>
  20.       <div k-html="html"></div>
  21.     </div>
  22.     <script src="./compile.js"></script>
  23.     <script src="./kvue.js"></script>
  25.     <script>
  26.       const vm = new KVue({
  27.         el: "#app",
  28.         data: {
  29.           name: "I am test.",
  30.           age: 12,
  31.           html: "<button>这是一个按钮</button>"
  32.         },
  33.         created () {
  34.           console.log("开始啦");
  35.           setTimeout(() => {
  36.             this.name = "我是测试";
  37.           }, 1500);
  38.         },
  39.         methods: {
  40.           changeName () {
  41.             this.name = "哈喽，开课吧";
  42.             this.age = 1;
  43.           }
  44.         }
  45.       });
  46.     </script>
  47.   </body>
  48. </html>

kvue.js

  1. class KVue {
  2.   constructor(options) {
  3.     this.$options = options;
  5.     this.$data = options.data;
  7.     // 响应化
  8.     this.observe(this.$data);
  10.     // 创建编译器
  11.     new Compile(options.el, this);
  13.     // 执行 created 函数
  14.     if (options.created) {
  15.       options.created.call(this);
  16.     }
  17.   }
  19.   // 递归遍历，使传递进来的对象响应化
  20.   observe(value) {
  21.     if (!value || typeof value !== "object") {
  22.       return;
  23.     }
  25.     // 遍历
  26.     Object.keys(value).forEach(key => {
  27.       // 对 key 做响应式处理
  28.       this.defineReactive(value, key, value[key]);
  30.       this.proxyData(key);
  31.     });
  32.   }
  34.   defineReactive(obj, key, val) {
  35.     // 递归
  36.     this.observe(val);
  38.     // 创建Dep实例：Dep 和 key 一对一对应
  39.     const dep = new Dep();
  41.     // 给obj定义属性
  42.     Object.defineProperty(obj, key, {
  43.       get() {
  44.         // 将 Dep.target 指向的 Watcher 实例加入到  Dep 中
  45.         Dep.target && dep.addDep(Dep.target);
  46.         return val;
  47.       },
  48.       set(newVal) {
  49.         if (newVal !== val) {
  50.           val = newVal;
  51.           dep.notify();
  52.         }
  53.       }
  54.     });
  55.   }
  57.   // 在 Vue 实例上定义属性，代理data中的数据
  58.   proxyData(key) {
  59.     Object.defineProperty(this, key, {
  60.       get() {
  61.         return this.$data[key];
  62.       },
  63.       set(newVal) {
  64.         this.$data[key] = newVal;
  65.       }
  66.     });
  67.   }
  68. }
  70. // Dep:管理若干 Watcher 实例，它和key一对一关系
  71. class Dep {
  72.   constructor() {
  73.     this.deps = [];
  74.   }
  76.   addDep(watcher) {
  77.     this.deps.push(watcher);
  78.   }
  80.   notify() {
  81.     this.deps.forEach(watcher => watcher.update());
  82.   }
  83. }
  85. // 保存 ui 中依赖，通过 update 函数可以更新
  86. class Watcher {
  87.   constructor(vm, key, cb) {
  88.     this.vm = vm;
  89.     this.key = key;
  90.     this.cb = cb;
  92.     // 将当前实例指向Dep.target
  93.     Dep.target = this;
  94.     this.vm[this.key]; // 读一次key触发getter
  95.     Dep.target = null;
  96.   }
  98.   update() {
  99.     this.cb.call(this.vm, this.vm[this.key]);
  100.     // console.log(`${this.key}属性更新了`);
  101.   }
  102. }

compile.js

  1. // 遍历模板，处理插值表达式
  2. // 另外如果发现k-xx, @xx做特别处理
  3. class Compile {
  4.   constructor(el, vm) {
  5.     this.$vm = vm;
  6.     this.$el = document.querySelector(el);
  8.     if (this.$el) {
  9.       // 1.$el中的内容 暂时存放 到一个fragment，提高操作效率
  10.       this.$fragment = this.node2Fragment(this.$el);
  12.       // 2.编译 fragment
  13.       this.compile(this.$fragment);
  15.       // 3.将编译结果插入到 挂载元素 下面
  16.       this.$el.appendChild(this.$fragment);
  17.     }
  18.   }
  20.   // 遍历el，把里面的内容 暂时存放 到新创建 fragment 中，这个操作会删除页面的 DOM 节点
  21.   node2Fragment(el) {
  22.     const fragment = document.createDocumentFragment();
  23.     let child;
  24.     while ((child = el.firstChild)) {
  25.       // appenChild 是移动操作
  26.       fragment.appendChild(child);
  27.     }
  28.     return fragment;
  29.   }
  31.   // 编译模板，替换动态值，处理指令和事件
  32.   compile(el) {
  33.     // 遍历el
  34.     const childNodes = el.childNodes;
  35.     Array.from(childNodes).forEach(node => {
  36.       if (this.isElement(node)) {
  37.         // console.log("编译元素：" + node.nodeName);
  39.         // 如果是元素节点，我们要处理指令k-xx，事件@xx
  40.         this.compileElement(node);
  41.       } else if (this.isInterpolation(node)) {
  42.         // console.log("编译文本：" + node.textContent);
  43.         this.compileText(node);
  44.       }
  46.       //   递归子元素
  47.       if (node.childNodes && node.childNodes.length > 0) {
  48.         this.compile(node);
  49.       }
  50.     });
  51.   }
  53.   // 判断是否是元素
  54.   isElement(node) {
  55.     return node.nodeType === 1;
  56.   }
  58.   // 判断是否是插值表达式判断
  59.   isInterpolation(node) {
  60.     //  需要满足{{ xx }}
  61.     return node.nodeType === 3 && /\{\{(.*)\}\}/.test(node.textContent);
  62.   }
  64.   compileElement(node) {
  65.     // 查看node的特性中是否有k-xx，@xx
  66.     const nodeAttrs = node.attributes;
  67.     Array.from(nodeAttrs).forEach(attr => {
  68.       // 获取属性名称和值 k-text="abc"
  69.       const attrName = attr.name; // k-text
  70.       const exp = attr.value; // abc
  71.       // 指令：k-xx
  72.       if (attrName.indexOf("k-") === 0) {
  73.         const dir = attrName.substring(2); // text
  74.         // 执行指令
  75.         this[dir] && this[dir](node, this.$vm, exp);
  76.       } else if(attrName.indexOf('@') === 0) {
  77.           // 事件 @click="handlClick"
  78.           const eventName = attrName.substring(1); // click
  79.           this.eventHandler(node, this.$vm, exp, eventName);
  81.       }
  82.     });
  83.   }
  85.   // 处理 k-model 双向数据绑定指令
  86.   model(node, vm, exp) {
  87.     // update是数据变了改界面
  88.     this.update(node, vm, exp, "model");
  89.     // 界面变了改数值
  90.     node.addEventListener("input", e => {
  91.       vm[exp] = e.target.value;
  92.     });
  93.   }
  95.   modelUpdator(node, value) {
  96.     node.value = value;
  97.   }
  99.   // 处理 k-html 指令
  100.   html(node, vm, exp) {
  101.     this.update(node, vm, exp, "html");
  102.   }
  104.   htmlUpdator(node, value) {
  105.     node.innerHTML = value;
  106.   }
  108.   // 处理 @ 指令
  109.   eventHandler(node, vm, exp, eventName){
  110.     // 获取回调函数
  111.     const fn = vm.$options.methods && vm.$options.methods[exp];
  112.     if(eventName && fn) {
  113.       node.addEventListener(eventName, fn.bind(vm))
  114.     }
  115.   }
  117.   // 把插值表达式替换为实际内容
  118.   compileText(node) {
  119.     console.log(node)
  120.     // {{xxx}}
  121.     // RegExp.$1是匹配分组部分
  122.     // console.log(RegExp.$1);
  124.     const exp = RegExp.$1;
  125.     this.update(node, this.$vm, exp, "text");
  126.   }
  128.   // 处理 k-text 指令
  129.   text(node, vm, exp) {
  130.     this.update(node, vm, exp, "text");
  131.   }
  133.   textUpdator(node, value) {
  134.     node.textContent = value;
  135.   }
  137.   // 编写update函数，它可复用
  138.   // exp是表达式， dir是具体操作：text,html,model
  139.   update(node, vm, exp, dir) {
  140.     const fn = this[dir + "Updator"];
  141.     fn && fn(node, vm[exp]);
  142.     // 创建Watcher
  143.     // new Vue({
  144.     //     data: {
  145.     //         xxx: 'bla'
  146.     //     }
  147.     // })
  148.     // exp 就是 xxx
  149.     new Watcher(vm, exp, function() {
  150.       fn && fn(node, vm[exp]);
  151.     });
  152.   }
  153. }