Vue2.X 单属性的数据响应式

--- theme: qklhk-chocolate highlight: a11y-dark --- >
知其不可奈何而安之若命

——— <<庄子>> # 前言这是一个Vue源码系列文章，建议从第一篇文章 [Vue源码系列（一）：Vue源码解读的正确姿势](https://juejin.cn/post/7017628727345414152/ "https://juejin.cn/post/7017628727345414152/") 开始阅读。文章是我个人学习源码的一个历程，这边分享出来希望对大家有所帮助。
本文是上一篇文章：[Vue源码系列（三）：数据响应式原理](https://juejin.cn/post/7019960001942781989)的补充。主要内容是Vue2.X、Vue3.X的数据响应式原理和区别，同时补充了发布订阅模式和观察者模式，最后手撸一个min-vue的数据响应式。
在上一篇文章中，对于响应式的源码解析咱们说到了一个方法：*defineReactive()*，它就是Vue对响应式处理的核心代码。不记得的小伙伴可以点击[Vue源码系列（三）：数据响应式原理](https://juejin.cn/post/7019960001942781989)回顾一下，对 *defineReactive()* 的解释在文章中的 *代码块 7* 。
接下来进入文章内容 👇 👇
VueJs的核心包括一套“响应式系统”。 “响应式”，是指当数据改变后，Vue会通知到使用该数据的代码。例如，视图渲染中使用了数据，数据改变后，视图也会自动更新。
接下来咱们将从浅到深，了解一下*Vue2.X* 和 *Vue3.X* 的响应式原理。
# Vue2.X响应式原理首先咱们先说一下 *Vue2.X* 的响应式原理吧。
人狠话不多，直接上代码 😂 😂 ```html Vue2.X 单属性的数据响应式

``` 运行代码咱们可以看到，改变*vm.msg*的值，触发了数据劫持 ![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/79483d7ca7c54d43815634425e014838~tplv-k3u1fbpfcp-watermark.image?) 还可以试着改变看一下具体怎么触发数据劫持的 ![1111.gif](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/d6b4ef50db524ec8a8e5930935e0bd70~tplv-k3u1fbpfcp-watermark.image?) 以上只支持一个属性的响应式，如果想支持多个属性又该怎么办呢？直接上代码。 ```html Vue2.X 多属性的数据响应式

``` 试一下是否支持多个属性的响应式 ![2222.gif](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/320774d08ea24f5b9a2a6be16a165fd1~tplv-k3u1fbpfcp-watermark.image?) # Vue3.X响应式原理 Vue3.X和Vue2.X的响应式实现不同，Vue3.X是实现原理是用ES6中的Proxy方法来实现的。这里有的小伙伴可能对Proxy这个方法不是太熟悉，所以咱们先简单说一下： *Proxy*对象用于创建一个对象的代理，从而实现基本操作的拦截和自定义（如属性查找、赋值、枚举、函数调用等） ## 语法 ```js const p = new Proxy(target, handler) ``` ## 参数 - `target`：要使用 `Proxy` 包装的目标对象（可以是任何类型的对象，包括原生数组，函数，甚至另一个代理）。 - `handler`：一个通常以函数作为属性的对象，各属性中的函数分别定义了在执行各种操作时代理 `p` 的行为。想详细了解的可以戳 [MDN详解说明](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Proxy) 详细了解一下。具体怎么用*Proxy*实现Vue3.X响应式原理的，咱们还是人狠话不多，直接上代码 😂 😂 ```html Vue3.X 数据响应式

``` 试验一下，看看效果如何。 ![3333.gif](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/4ec6dbbaeec04d588022bb7c77b3f118~tplv-k3u1fbpfcp-watermark.image?) 👌🏻 完美！看一下区别吧，虽然已经很明了了，但是还总结一下。 # Vue2.X 和 Vue3.X 的响应式原理首先是Vue 2.x - 底层原理：Object.defineProperty - 直接监听属性 - 浏览器兼容IE8以上（不兼容IE8）其次是Vue3.X - 底层原理：Proxy - 直接监听对象，而非属性 - ES6中新增方法，不支持IE浏览器 # 发布订阅模式和观察者模式接下来我们继续深入Vue的响应式原理，那么就不得不说一下发布订阅模式和观察者模式了。
## 发布订阅模式什么是发布订阅模式呢？
基于一个事件中心，接收通知的对象是订阅者，需要先订阅某个事件，触发事件的对象是发布者，发布者通过触发事件，通知各个订阅者。
举个例子🌰 ：大家都订阅过公众号吧？比如：微信开发者啊、奇舞精选啊之类的。这里就涉及到两个角色：公众号(事件中心) 和订阅了公众号的大家（订阅者）。然后当公众号的作者发布了文章以后，订阅了公众号的大家就会收到消息，这里又涉及到一个角色：公众号的作者（发布者）。
vue中的事件总线就是使用的发布订阅模式。接下来就模拟实现Vue中的自定义事件，依旧人狠话不多，直接上代码 ```html 发布订阅模式 ``` 校验一下，大家也可以复制代码体验一下： ![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/ebbd029863db40a6a5f16d00a0709a91~tplv-k3u1fbpfcp-watermark.image?) 是不是感觉通俗易懂 😆 😆 😆
## 观察者模式目标者对象和观察者对象有相互依赖的关系，观察者对某个对象的状态进行观察，如果对象的状态发生改变，就会通知所有依赖这个对象的观察者。
观察者模式相比发布订阅模式少了个事件中心，订阅者和发布者不是直接关联的。 - 目标者对象 *[Subject]* : 拥有方法：[ 添加 / 删除 / 通知 ] Observer；
- 观察者对象 *[Observer]* : 拥有方法：接收 Subject 状态变更通知并处理；
**目标对象 *[Subject]* 状态变更时，通知所有观察对象[Observer]。**
Vue中响应式数据变化是观察者模式，在上一篇源码解析文章中咱们已经了解了，每个响应式属性都有dep，dep存放了依赖这个属性的watcher（watcher是观测数据变化的函数），如果数据发生变化，dep就会通知所有的观察者watcher去调用更新方法。因此，观察者需要被目标对象收集，目的是通知依赖它的所有观察者。这里可能有的小伙伴会问：为什么watcher中也要存放dep呢？原因是因为当前正在执行的watcher需要知道此时是哪个dep通知了自己。 ### 观察者（订阅者）- Watcher - update(): 当事件发生时，具体要做的事情 ### 目标者（发布者） - Dep - subs数组：存储所有的观察者 - addSub(): 添加观察者 - notify(): 当事件发生后调用所有观察者的update() ### 没有事件中心 ```html 观察者模式 ``` 虽然已经很明显了，但还是验证一下吧。 ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/19ca96e228a34d7aa90a67b2676a8c1d~tplv-k3u1fbpfcp-watermark.image?) 兄弟们看到这里是不是恍然大悟的感觉？「哈哈。。。是不是有点 🌬 🐂 🍺 的感觉？」 ## 发布订阅模式和观察者模式的区别从三个角度总结一下吧： ### 从结构上分析 - 观察者模式里，只有两个角色：观察者和目标者（也可以叫被观察者） - 发布订阅模式里，不仅仅只有发布者和订阅者，还有一个事件中心（也可以叫控制中心） ### 从关系上分析 - 观察者和目标者，是松耦合的关系 - 发布者和订阅者，则完全不存在耦合 ### 从使用角度分析 - 观察者模式，多用于单个应用内部（上面说过Vue中响应式数据变化就是观察者模式） - 发布订阅模式，则更多应用于跨应用的模式，比如我们常用的 [消息中间件](https://video.zhihu.com/video/1431298031564451841) 来个图片说明一下吧 ![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/20fa821e10e845e5bde76b3d4c884e94~tplv-k3u1fbpfcp-watermark.image?) # 简易的vue响应式一切都准备好，那么就开始进入咱们今天的主题吧。依旧人狠话不多，直接上代码。
## 运用代码（index.html）首先上运用代码。然后根据功能代码再上各个部分的代码。 ```html

``` ## vue类「vue.js」 ```js /** * vue.js * * 属性 * - $el：挂载的dom对象 * - $data: 数据 * - $options: 传入的属性 * * 方法： * - _proxyData 将数据转换成getter/setter形式 * */ class Vue { constructor(options) { // 获取传入的对象默认为空对象 this.$options = options || {} // 获取 el (#app) this.$el = typeof options.el === 'string' ? document.querySelector(options.el) : options.el // 获取data 默认为空对象 this.$data = options.data || {} // 调用_proxyData处理data中的属性 this._proxyData(this.$data) // 使用Obsever把data中的数据转为响应式并监测数据的变化，渲染视图 new Observer(this.$data) // 编译模板渲染视图 new Compiler(this) } // 把data中的属性注册到Vue _proxyData(data) { // 遍历data对象的所有属性进行数据劫持 Object.keys(data).forEach((key) => { // 把data中的属性，转换成vm的getter/setter Object.defineProperty(this, key, { // 可枚举（可遍历） enumerable: true, // 可配置（可以使用delete删除，可以通过defineProperty重新定义） configurable: true, // 获取值的时候执行 get() { return data[key] }, // 设置值的时候执行 set(newValue) { // 若新值等于旧值则返回 if (newValue === data[key]) { return } // 如新值不等于旧值则赋值 data[key] = newValue }, }) }) } } ``` ## Observer 「observer.js」 ```js /** * observer.js * * 功能 * - 把$data中的属性，转换成响应式数据 * - 如果$data中的某个属性也是对象，把该属性转换成响应式数据 * - 数据变化的时候，发送通知 * * 方法： * - walk(data) - 遍历data属性，调用defineReactive将数据转换成getter/setter * - defineReactive(data, key, value) - 将数据转换成getter/setter * */ class Observer { constructor(data) { this.walk(data) } // 遍历data转为响应式 walk(data) { // 如果data为空或者或者data不是对象 if (!data || typeof data !== "object") { return; } // 遍历data转为响应式 Object.keys(data).forEach((key) => { this.defineReactive(data, key, data[key]) }) } // 将data中的属性转为getter/setter defineReactive(data, key, value) { // 检测属性值是否是对象，是对象的话，继续将对象转换为响应式的 this.walk(value) // 保存一下 this const that = this; // 创建Dep对象给每个data添加一个观察者 let dep = new Dep(); Object.defineProperty(data, key, { // 可枚举（可遍历） enumerable: true, // 可配置（可以使用delete删除，可以通过defineProperty重新定义） configurable: true, // 获取值的时候执行 get() { // 在这里添加观察者对象 Dep.target 表示观察者 Dep.target && dep.addSub(Dep.target) return value }, // 设置值的时候执行 set(newValue) { // 若新值等于旧值则返回 if (newValue == value) { return; } // 如新值不等于旧值则赋值此处形成了闭包，延长了value的作用域 value = newValue; // 赋值以后检查属性是否是对象，是对象则将属性转换为响应式的 that.walk(newValue); // 数据变化后发送通知，触发watcher的pudate方法 dep.notify(); }, }) } } ``` ## Compiler 「compiler.js」 ```js /** * compiler.js * * 功能 * - 编译模板，解析指令/插值表达式 * - 负责页面的首次渲染 * - 数据变化后，重新渲染视图 * * 属性 * - el -app元素 * - vm -vue实例 * * 方法： * - compile(el) -编译入口 * - compileElement(node) -编译元素（指令） * - compileText(node) 编译文本（插值） * - isDirective(attrName) -（判断是否为指令） * - isTextNode(node) -（判断是否为文本节点） * - isElementNode(node) - （判断是否问元素节点） */ class Compiler { constructor(vm) { // 获取vm this.vm = vm // 获取el this.el = vm.$el // 编译模板渲染视图 this.compile(this.el) } // 编译模板渲染视图 compile(el) { // 不存在则返回 if (!el) return; // 获取子节点 const nodes = el.childNodes; //收集 Array.from(nodes).forEach((node) => { // 文本类型节点的编译 if (this.isTextNode(node)) { // 编译文本节点 this.compileText(node) } else if (this.isElementNode(node)) { // 编译元素节点 this.compileElement(node) } // 判断是否还存在子节点 if (node.childNodes && node.childNodes.length) { this.compile(node); } }); } // 添加指令方法并且执行 update(node, value, attrName, key) { // 定义相应的方法举个例子：添加textUpdater就是用来处理v-text的 const updateFn = this[`${attrName}Updater`]; // 若存在则调用 updateFn && updateFn.call(this, node, value, key); } // 用来处理v-text textUpdater(node, value, key) { node.textContent = value; } // 用来处理v-model modelUpdater(node, value, key) { node.value = value; // 用来实现双向数据绑定 node.addEventListener("input", (e) => { this.vm[key] = node.value; }); } // 编译元素节点 compileElement(node) { // 获取到元素节点上面的所有属性进行遍历 Array.from(node.attributes).forEach((attr) => { // 获取属性名 let _attrName = attr.name // 判断是否是 v- 开头 if (this.isDirective(_attrName)) { // 删除 v- const attrName = _attrName.substr(2); // 获取属性值并赋值给key const key = attr.value; const value = this.vm[key]; // 添加指令方法 this.update(node, value, attrName, key); // 数据更新之后，通过wather更新视图 new Watcher(this.vm, key, (newValue) => { this.update(node, newValue, attrName, key); }); } }); } // 编译文本节点 compileText(node) { // . 表示任意单个字符，不包含换行符、+ 表示匹配前面多个相同的字符、？表示非贪婪模式，尽可能早的结束查找 const reg = /\{\{(.+?)\}\}/; // 获取节点的文本内容 var param = node.textContent; // 判断是否有 {{}} if (reg.test(param)) { // $1 表示匹配的第一个，也就是{{}}里面的内容 // 去除 {{}} 前后空格 const key = RegExp.$1.trim(); // 赋值给node node.textContent = param.replace(reg, this.vm[key]); // 编译模板的时候，创建一个watcher实例，并在内部挂载到Dep上 new Watcher(this.vm, key, (newValue) => { // 通过回调函数，更新视图 node.textContent = newValue; }); } } // 判断元素的属性是否是vue指令 isDirective(attrName) { return attrName && attrName.startsWith("v-"); } // 判断是否是文本节点 isTextNode(node) { return node && node.nodeType === 3; } // 判断是否是元素节点 isElementNode(node) { return node && node.nodeType === 1; } } ``` ## Dep 「dep.js」 ```js /** * dep.js * * 功能 * - 收集观察者 * - 触发观察者 * * 属性 * - subs: Array * - target: Watcher * * 方法： * - addSub(sub): 添加观察者 * - notify(): 触发观察者的update * */ class Dep { constructor() { // 存储观察者 this.subs = [] } // 添加观察者 addSub(sub) { // 判断观察者是否存在、是否拥有update且typeof为function if (sub && sub.update && typeof sub.update === "function") { this.subs.push(sub); } } // 发送通知 notify() { // 触发每个观察者的更新方法 this.subs.forEach((sub) => { sub.update() }) } } ``` ## Watcher 「watcher.js」 ```js /** * watcher.js * * 功能 * - 生成观察者更新视图 * - 将观察者实例挂载到Dep类中 * - 数据发生变化的时候，调用回调函数更新视图 * * 属性 * - vm: vue实例 * - key: 观察的键 * - cb: 回调函数 * * 方法： * - update() * */ class Watcher { constructor(vm, key, cb) { // 获取vm this.vm = vm // 获取data中的属性 this.key = key // 回调函数（更新视图的具体方法） this.cb = cb // 将watcher实例挂载到Dep Dep.target = this // 缓存旧值 this.oldValue = vm[key] // get值之后，清除Dep中的实例 Dep.target = null } // 观察者中的方法用来更新视图 update() { // 调用update的时候，获取新值 let newValue = this.vm[this.key] // 新值和旧值相同则不更新 if (newValue === this.oldValue) return // 调用具体的更新方法 this.cb(newValue) } } ``` 验证一下吧。 ![444.gif](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/fbe884309c4a4a4683e3503dfc86d7c4~tplv-k3u1fbpfcp-watermark.image?) 到此完毕。觉得可以的欢迎点赞、收藏加关注 🙏 🙏 。