--- highlight: a11y-dark theme: smartblue --- # 前言本文的目的是掌握 `Vue2` 中的 `响应式原理`，学习的过程是手写一个简易版的 `Vue`。从数据劫持，到模板编译，再到依赖收集，完完整整的自己实现整套数据响应式的流程。 # 一个最基础的响应式 ## 实现一个属性的响应式关于 `defineProperty` 这个方法请查看这篇文章，本文就不赘述了。 👉👉 [Object.defineProperty 都能 "define" 什么?](https://juejin.cn/post/6999425019918942222) 我们首先封装一个响应式处理的方法 `defineReactive`，通过 `defineProperty` 这个方法重新定义对象属性的 `get` 和 `set` 描述符，来实现对数据的劫持，每次 **读取数据** 的时候都会触发 `get` ，每次 **更新数据** 的时候都会触发 `set` ，所以我们可以在 `set` 中触发更新视图的方法 `update` 来实现一个基本的响应式处理。 ```js /** * @param {*} obj 目标对象 * @param {*} key 目标对象的一个属性 * @param {*} val 目标对象的一个属性的初始值 */ function defineReactive(obj, key, val) { // 通过该方法拦截数据 Object.defineProperty(obj, key, { // 读取数据的时候会走这里 get() { console.log('🚀🚀~ get:', key); return val }, // 更新数据的时候会走这里 set(newVal) { // 只有当新值和旧值不同的时候才会触发重新赋值操作 if (newVal !== val) { console.log('🚀🚀~ set:', key); val = newVal // 这里是触发视图更新的地方 update() } } }) } ``` 我们写点代码来测试一下，每 `1s` 修改一次 `obj.foo` 的值，并定义一个 `update` 方法来修改 `app` 节点的内容。 ```js // html

123

// js // 劫持 obj.foo 属性 const obj = {} defineReactive(obj, 'foo', '') // 给 obj.foo 一个初始值 obj.foo = new Date().toLocaleTimeString() // 定时器修改 obj.foo setInterval(() => { obj.foo = new Date().toLocaleTimeString() }, 1000) // 更新视图 function update() { app.innerHTML = obj.foo } ``` 可以看到，每次修改 `obj.foo` 的时候，都会触发我们定义的 `get` 和 `set` ，并调用 `update` 方法更新了视图，到这里，一个最简单的响应式处理就完成了。 ![212.gif](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/3980d844ff8148f8b1df6757edcb09a4~tplv-k3u1fbpfcp-watermark.image?) ## 处理深层次的嵌套一个对象通常情况下不止一个属性，所以当我们要给每个属性添加响应式的时候，就需要遍历这个对象的所有属性，给每个 `key` 调用 `defineReactive` 进行处理。 ```js /** * @param {*} obj 目标对象 */ function observe(obj) { // 先判断类型, 响应式处理的目标一定要是个对象类型 if (typeof obj !== 'object' || obj === null) { return } // 遍历 obj, 对 obj 的每个属性进行响应式处理 Object.keys(obj).forEach(key => { defineReactive(obj, key, obj[key]) }) } // 定义对象 obj const obj = { foo: 'foo', bar: 'bar', friend: { name: 'aa' } } // 访问 obj 的属性 , foo 和 bar 都被劫持到，就不在浏览器演示了。 obj.bar = 'barrrrrrrr' // => 🚀🚀~ set: bar obj.foo = 'fooooooooo' // => 🚀🚀~ set: foo // 访问 obj 的属性 obj.friend.name obj.friend.name = 'bb' // => 🚀🚀~ get: friend ``` 当我们访问 `obj.friend.name` 的时候，也只是打印出来 `get: friend` ，而不是 `friend.name` ，所以我们还要进行个 **递归**，把 **深层次的属性** 同样也做响应式处理。 ```js function defineReactive(obj, key, val) { // 递归 observe(val) // 继续执行 Object.defineProperty... Object.defineProperty(obj, key, { ... ... }) } // 再次访问 obj.friend.name obj.friend.name = 'bb' // => 🚀🚀~ set: name ``` 递归的时机在 `defineReactive` 这个方法中，如果 `value` 是对象就进行递归，如果不是对象直接返回，继续执行下面的代码，保证 `obj` 中嵌套的属性都进行响应式的处理，所以当我们再次访问 `obj.friend.name` 的时候，就打印出了 `set: name `。 ## 处理直接赋值一个对象上面已经实现了对深层属性的响应式处理，那么如果我直接给属性赋值一个对象呢？ ```js const obj = { friend: { name: 'aa' } } obj.friend = { // => 🚀🚀~ set: friend name: 'bb' } obj.friend.name = 'cc' // => 🚀🚀~ get: friend ``` 这种赋值方式还是只打印出了 `get: friend` ，并没有劫持到 `obj.friend.name` ，那怎么办呢？我们只需要在触发 `set` 的时候，判断一下 `value` 的类型，如果它是个对象类型，我们就对他执行 `observe` 方法。 ```js function defineReactive(obj, key, val) { Object.defineProperty(obj, key, { ... ... set(newVal) { // 只有当新值和旧值不同的时候才会触发重新赋值操作 if (newVal !== val) { console.log('🚀🚀~ set:', key); // 如果 newVal 是个对象类型,再次做响应式处理。 if (typeof obj === 'object' && obj !== null) { observe(newVal) } val = newVal } } }) } // 再次给 obj.friend 赋值一个对象 obj.friend = { name: 'bb' } // 再次访问 obj.friend.name , 这个时候就成功的劫持到了 name 属性 obj.friend.name = 'cc' //=> 🚀~ set: name ``` ## 处理新添加一个属性上面的例子都是操作 **已经存在** 的属性，那么如果我们 **新添加** 一个属性呢？ ```js const obj = {} obj.age = 18 obj.age = 20 ``` 当我们试图修改 `obj.age` 的时候，什么都没有打印出来，说明并没有对 `obj.age` 进行响应式处理。这里也非常好理解，因为新增加的属性并没有经过 `defineReactive` 的处理，所以我们就需要一个方法来手动处理新添加属性这种情况。 ```js /** * @param {*} obj 目标对象 * @param {*} key 目标对象的一个属性 * @param {*} val 目标对象的一个属性的初始值 */ function $set(obj, key, val) { // vue 中在这进行了很多判断，val 是对象还是数组等等，我们就从简了 defineReactive(obj, key, val) } // 调用 $set 方法给 obj 添加新的属性 $set(obj, 'age', 18) // 再次访问 obj.age obj.age = 20 //=> 🚀🚀~ set: age ``` 新定义的 `$set` 方法，内部也是把目标属性进行了 `defineReactive` 处理，这时我们再次更新 `obj.age` 的时候，就打印出了 `set: age` ，也就实现了一个响应式的处理。 # VUE中的数据响应式 ## 实现简易的Vue 这是 `Vue` 中最基本的使用方式，创建一个 `Vue` 的实例，然后就可以在模板中使用 `data` 中定义的响应式数据了，今天我们就来完成一个简易版的 `Vue` 。 ```js

``` ## 原理 ![数据响应式.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/796a19355cad4c8eb7013cdbff9de6b8~tplv-k3u1fbpfcp-watermark.image?) ### 设计类型介绍 - **MyVue：** 框架构造函数 - **Observer**：执行数据响应化（区分数据是对象还是数组） - **Compile**：编译模板，初始化视图，收集依赖（更新函数，创建 `watcher`） - **Watcher**：执行更新函数（更新 `dom` ） - **Dep**：管理多个 `Watcher` 批量更新 ### 流程解析 - 初始化时通过 `Observer` 对数据进行响应式处理，在 `Observer` 的 `get` 的时候创建一个 `Dep` 的实例，用来通知更新。 - 初始化时通过 `Compile` 进行编译，解析模板语法，找到其中动态绑定的数据，从 `data` 中获取数据并初始化视图，把模板语法替换成数据。 - 同时进行一次订阅，创建一个 `Watcher` ，定义一个更新函数，将来数据发生变化时，`Watcher` 会调用更新函数把 `Watcher` 添加到 `dep` 中。 - `Watcher` 是一对一的负责某个具体的元素，`data` 中的某个属性在一个视图中可能会出现多次，也就是会创建多个 `Watcher`，所以一个 `Dep` 中会管理多个 `Watcher`。 - 当 `Observer` 监听到数据发生变化时，`Dep` 通知所有的 `Watcher` 进行视图更新。 ## 代码实现 - 第一回合数据响应式 ### observe `observe` 方法相对于上面，做了一小点的改动，不是直接遍历调用 `defineReactive` 了，而是创建一个 `Observer` 类的实例。 ```js // 遍历obj 对其每个属性进行响应式处理 function observe(obj) { // 先判断类型, 响应式处理的目标一定要是个对象类型 if (typeof obj !== 'object' || obj === null) { return } new Observer(obj) } ``` ### Observer类 `Observer` 类之前有解释过，它就是用来 **做数据响应式** 的，在它内部区分了数据是 **对象** 还是 **数组** ，然后执行不同的响应式方案。 ```js // 根据传入value的类型做响应的响应式处理 class Observer { constructor(value) { this.value = value if (Array.isArray(value)) { // todo 这个分支是数组的响应式处理方式不是本文重点暂时忽略 } else { // 这个分支是对象的响应式处理方式 this.walk(value) } } // 对象的响应式处理跟前面讲到过的一样，再封装一层函数而已 walk(obj) { // 遍历 obj, 对 obj 的每个属性进行响应式处理 Object.keys(obj).forEach(key => { defineReactive(obj, key, obj[key]) }) } } ``` ### MVVM类（MyVue）这一回合我们就先在实例初始化的时候，对 `data` 进行响应式处理，为了能用 `this.key` 的方式访问`this.$data.key`，我们需要做一层代理。 ```js class MyVue { constructor(options) { // 把数据存一下 this.$options = options this.$data = options.data // data响应式处理 observe(this.$data) // 代理把 this.$data 上的属性全部挂载到 vue实例上可以通过 this.key 访问 this.$data.key proxy(this) } } ``` `proxy` 代理也非常容易理解，就是通过 `Object.defineProperty` 改变一下引用。 ```js /** * 代理把 this.$data 上的属性全部挂载到 vue实例上可以通过 this.key 访问 this.$data.key * @param {*} vm vue 实例 */ function proxy(vm) { Object.keys(vm.$data).forEach(key => { // 通过 Object.defineProperty 方法进行代理这样访问 this.key 等价于访问 this.$data.key Object.defineProperty(vm, key, { get() { return vm.$data[key] }, set(newValue) { vm.$data[key] = newValue } }) }) } ``` ## 代码实现 - 第二回合模板编译这一趴要实现下面这个流程，`VNode` 不是本文的重点，所以先去掉 `Vnode` 的环节，内容都在注释里啦~ ![未命名文件 (13).png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/c186c2023b1a4f24a735c50181427297~tplv-k3u1fbpfcp-watermark.image?) ```js // 解析模板语法 // 1.处理插值表达式{{}} // 2.处理指令和事件 // 3.以上两者初始化和更新 class Compile { /** * @param {*} el 宿主元素 * @param {*} vm vue实例 */ constructor(el, vm) { this.$vm = vm this.$el = document.querySelector(el) // 如果元素存在,执行编译 if (this.$el) { this.compile(this.$el) } } // 编译 compile(el) { // 获取 el 的子节点,判断它们的类型做相应的处理 const childNodes = el.childNodes childNodes.forEach(node => { // 判断节点的类型本文以元素和文本为主要内容不考虑其他类型 if (node.nodeType === 1) { // 这个分支代表节点的类型是元素 // 获取到元素上的属性 const attrs = node.attributes // 把 attrs 转换成真实数组 Array.from(attrs).forEach(attr => { // 指令长 my-xxx = 'abc' 这个样子 // 获取节点属性名 const attrName = attr.name // 获取节点属性值 const exp = attr.value // 判断节点属性是不是一个指令 if (attrName.startsWith('my-')) { // 获取具体的指令类型也就是 my-xxx 后面的 xxx 部分 const dir = attrName.substring(3) // 如果this[xxx]指令存在执行这个指令 this[dir] && this[dir](node, exp) } }) } else if (this.isInter(node)) { // 这个分支代表节点的类型是文本并且是个插值语法{{}} // 文本的初始化 this.compileText(node) } // 递归遍历 dom 树 if (node.childNodes) { this.compile(node) } }) } // 编译文本 compileText(node) { // 可以通过 RegExp.$1 来获取到插值表达式中间的内容 {{key}} // this.$vm[RegExp.$1] 等价于 this.$vm[key] // 然后把这个 this.$vm[key] 的值赋值给文本就完成了文本的初始化 node.textContent = this.$vm[RegExp.$1] } // my-text 指令对应的方法 text(node, exp) { // 这个指令用来修改节点的文本,这个指令长这样子 my-text = 'key' // 把 this.$vm[key] 赋值给文本即可 node.textContent = this.$vm[exp] } // my-html 指令对应的方法 html(node, exp) { // 这个指令用来修改节点的文本,这个指令长这样子 my-html = 'key' // 把 this.$vm[key] 赋值给innerHTML 即可 node.innerHTML = this.$vm[exp] } // 是否是插值表达式{{}} isInter(node) { return node.nodeType === 3 && /\{\{(.*)\}\}/.test(node.textContent) } } ``` ## 代码实现 - 第三回合收集依赖视图中会用到的 `data` 中的属性 `key` 的地方，都可以被称为一个 **依赖** ，同一个 `key` 可能会出现多次，每次出现都会创建一个 `Watcher` 进行维护，这些 `Watcher` 需要收集起来统一管理，这个过程叫做 **收集依赖**。同一个 `key` 创建的多个 `Watcher` 需要一个 `Dep` 来管理，需要更新时由 `Dep` 统一进行通知。 ![code.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/db289f3fbd7f4c67b25dc7d57dbe39de~tplv-k3u1fbpfcp-watermark.image?) 上面这段代码中，`name1` 用到了两次，创建了两个 `Watcher` ，`Dep1` 收集了这两个 `Watcher` ，`name2` 用到了一次，创建了一个 `Watcher` ， `Dep2` 收集了这一个 `Watcher`。 ![未命名文件 (14).png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/ebe7fbb834354ecca1ac415bf09b1561~tplv-k3u1fbpfcp-watermark.image?) ### 收集依赖的思路 - `defineReactive` 时为每一个 `key` 创建一个 `Dep` 实例 - 初始化视图时，读取某个 `key`，例如 `name1`，创建一个 `Watcher1` - 由于触发 `name1` 的 `getter` 方法，便将 `Watcher1` 添加到 `name1` 对应的 `Dep` 中 - 当 `name1` 发生更新时，会触发 `setter`，便可通过对应的 `Dep` 通知其管理的所有 `Watcher` 进行视图的更新 ### Watcher类收集依赖的过程，在 `Watcher` 实例创建的时候，首先把实例赋值给 `Dep.target`，手动读一下 `data.key` 的值，触发 `defineReactive` 中的 `get` ，把当前的 `Watcher` 实例添加到 `Dep` 中进行管理，然后再把`Dep.target` 赋值为 `null`。 ```js // 监听器:负责依赖的更新 class Watcher { /** * @param {*} vm vue 实例 * @param {*} key Watcher实例对应的 data.key * @param {*} cb 更新函数 */ constructor(vm, key, updateFn) { this.vm = vm this.key = key this.updateFn = updateFn // 触发依赖收集把当前 Watcher 赋值给 Dep 的静态属性 target Dep.target = this // 故意读一下 data.key 的值为了触发 defineReactive 中的 get this.vm[this.key] // 收集依赖以后再置为null Dep.target = null } // 更新方法未来被 Dep 调用 update() { // 执行实际的更新操作 this.updateFn.call(this.vm, this.vm[this.key]) } } ``` ### Dep类 `addDep` 方法把 `Watchers` 收集起来放在 `deps` 中进行管理，`notify` 方法通知 `deps` 中的所有 `Watchers` 进行视图的更新。 ```js class Dep { constructor() { this.deps = [] // 存放 Watchers } // 收集 Watchers addDep(dep) { this.deps.push(dep) } // 通知所有的 Watchers 进行更新这里的 dep 指的就是收集起来的 Watcher notify() { this.deps.forEach(dep => dep.update()) } } ``` ### 升级Compile 在第二回合中，我们的 `Compile` 类只实现了视图的初始化，所以在第三回合中要把它升级一下，支持视图的更新。 `Watcher` 实例就是在初始化后创建的，用来监听更新。 ```js class Compile { ... ... // 省略号的地方都没有发生改变 // 下面是发生改变的代码 /** * 根据指令的类型操作 dom 节点 * @param {*} node dom节点 * @param {*} exp 表达式 this.$vm[key] * @param {*} dir 指令 */ update(node, exp, dir) { // 1.初始化获取到指令对应的实操函数 const fn = this[dir + 'Updater'] // 如果函数存在就执行 fn && fn(node, this.$vm[exp]) // 2.更新再次调用指令对应的实操函数值由外面传入 new Watcher(this.$vm, exp, function(val) { fn && fn(node, val) }) } // 编译文本 {{xxx}} compileText(node) { // 可以通过 RegExp.$1 来获取到插值表达式中间的内容 {{key}} // this.$vm[RegExp.$1] 等价于 this.$vm[key] // 然后把这个 this.$vm[key] 的值赋值给文本就完成了文本的初始化 this.update(node, RegExp.$1, 'text') } // my-text 指令 text(node, exp) { this.update(node, exp, 'text') } // my-text 指令对应的实操 textUpdater(node, value) { // 这个指令用来修改节点的文本,这个指令长这样子 my-text = 'key' // 把 this.$vm[key] 赋值给文本即可 node.textContent = value } // my-html 指令 html(node, exp) { this.update(node, exp, 'html') } // my-html 指令对应的实操 htmlUpdater(node, value) { // 这个指令用来修改节点的文本,这个指令长这样子 my-html = 'key' // 把 this.$vm[key] 赋值给innerHTML 即可 node.innerHTML = value } // 是否是插值表达式{{}} isInter(node) { return node.nodeType === 3 && /\{\{(.*)\}\}/.test(node.textContent) } } ``` ### Watcher和Dep建立关联首先在 `defineReactive` 中创建 `Dep` 实例，与 `data.key` 是一一对应的关系，然后再 `get` 中调用 `dep.addDep` 进行依赖的收集，`Dep.target` 就是一个 `Watcher`。在 `set` 中调用 `dep.notify()` 通知所有的 `Watchers` 更新视图。 ```js function defineReactive(obj, key, val) { ... ... // 创建 Dep 实例 , 与 key 一一对应 const dep = new Dep() // 通过该方法拦截数据 Object.defineProperty(obj, key, { // 读取数据的时候会走这里 get() { console.log('🚀🚀~ get:', key); // 依赖收集 Dep.target 就是一个Watcher Dep.target && dep.addDep(Dep.target) return val }, // 更新数据的时候会走这里 set(newVal) { // 只有当新值和旧值不同的时候才会触发重新赋值操作 if (newVal !== val) { console.log('🚀🚀~ set:', key); // 如果 newVal 是个对象类型,再次做响应式处理。 if (typeof obj === 'object' && obj !== null) { observe(newVal) } val = newVal // 通知更新 dep.notify() } } }) } ``` ## 代码实现 - 第四回合事件和双向绑定 ### 事件绑定事件绑定也很好理解，首先判断节点的属性是不是以 `@` 开头，然后拿到事件的类型，也就是例子中的 `click`，再根据函数名找到 `methods` 中定义的函数体，最后添加事件监听就行了。 ```js class Compile { ... ... // 省略号的地方都没有发生改变 compile(el) { // 判断节点属性是不是一个事件 if (this.isEvent(attrName)) { // @click="onClick" const dir = attrName.substring(1) // click // 事件监听 this.eventHandler(node, exp, dir) } } ... ... // 判断节点是不是一个事件也就是以@开头 isEvent(dir) { return dir.indexOf("@") === 0 } eventHandler(node, exp, dir) { // 根据函数名字在配置项中获取函数体 const fn = this.$vm.$options.methods && this.$vm.$options.methods[exp] // 添加事件监听 node.addEventListener(dir, fn.bind(this.$vm)) } ... ... } ``` ### 双向绑定 `my-model` 其实也是一个指令，走的也是指令相关的处理逻辑，所以我们只需要添加一个 `model` 指令和对应的 `modelUpdater` 处理函数就行了。 `my-model` 双向绑定其实就是 **事件绑定** 和修改 `value` 的一个语法糖，本文以 `input` 为例，其它的表单元素绑定的事件会有不同，但是道理是一样的。 ```js class Compile { // my-model指令 my-model='xxx' model(node, exp) { // update 方法只完成赋值和更新 this.update(node, exp, 'model') // 事件监听 node.addEventListener('input', e => { // 将新的值赋值给 data.key 即可 this.$vm[exp] = e.target.value }) } modelUpdater(node, value) { // 给表单元素赋值 node.value = value } } ``` 现在也可以更新一下模板编译的流程图啦~ ![未命名文件 (17).png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/c9a46fe73e2b4b4ea5bf1fd8abd6b317~tplv-k3u1fbpfcp-watermark.image?) # 后语 ![212.gif](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/6f8adc9923e1470382bc73fc1238aa1f~tplv-k3u1fbpfcp-watermark.image?) 到这里一个简易版的 `Vue` 数据响应式就完成了，整套流程从头到尾都是自己手写的，还怕不懂原理么？本文的完整示例代码地址如下 👉👉 [完整代码](https://github.com/alanhzw/warlber-grow/tree/main/VUE/VUE%E6%BA%90%E7%A0%81%E7%9B%B8%E5%85%B3/my-mini-vue-kkb) # 参考资料 [开课吧全栈架构师课程](https://www.kaikeba.com/)