之前的vue2、现在的vue3，它都是vue。为什么要出vue3？肯定是因为vue3存在一定性的优势啊。
本文就响应式原理进行分析。
两者基本都是发布订阅模式。通俗一点就是数据发生变化就要触发依赖，更新数据。
vue2响应原理
vue2主要是通过类new一个实例来实现的，通过object.defineProperty()来劫持各个属性的get和set。
Object.defineProperty(obj, key, { enumerable: true,//可枚举性，表示能否通过for-in遍历得到属性。默认值为true。 configurable: false,//可配置性，控制着其描述的属性的修改，表示能否修改属性的特性，能否把属性修改为访问器属性，或者能否通过delete删除属性从而重新定义属性。默认值为true。 get() { //初始化 //订阅者数据变化时，往Dep中添加观察者 Dep.target && dep.addSub(Dep.target); return value; }, set: (newValue) => { this.observer(newValue); if (newValue !== value) { value = newValue; } //告诉Dep通知变化 dep.notify(); } })
获取数据展示
首先Observer实例化，拿到数据。遍历数据属性，defineProperty劫持每个属性。通过defineProperty的get来获取属性。get中除了要获取属性外，还需要做一个添加依赖的动作，为数据更新行为做准备（即dep.addSub(Dep.target)）
Dep 收集依赖
使用Dep类实现依赖的收集器。收集依赖后，可以实现数据改变驱动页面更新等操作。内部存在添加依赖、触发依赖两个方法。
Dep中先创建一个空数组，存放要收集的依赖。addSub添加依赖则是将收集到的watcher放进数组中；notify触发依赖则是通知watcher去更新，而不是自己更新。
class Dep { constructor() { this.subs = []; } addSub(watcher) { this.subs.push(watcher); } notify() { this.subs.forEach(item => item.update()) } }
Watcher
主要存在两个功能：获取值、更新值。 获取值中牵扯到编译，需要从html中匹配绑定的变量，在此将省略。 更新值的核心就是将新值赋值给旧值。
class Watcher { constructor(vm, expr, cb) { this.vm = vm; this.expr = expr; this.cb = cb; this.oldVal = this.getOldVal(); } getOldVal() { Dep.target = this; const oldVal = compileUtil.getVal(this.expr, this.vm); Dep.target = null; // compileUtill类主要功能是编译，getVal获取变量值 return oldVal; } update() { const newVal = compileUtil.getVal(this.expr, this.vm); if (newVal !== this.oldVal) { this.cb(newVal); } } }
更新数据展示
更新触发defineProperty的set，将新值传给observer，在通知dep去更新。notify中通过调用watcher的update操作，重新设置新值。
vue3响应原理
在vue3中，使用Proxy获取和设置值。主要核心是收集依赖和触发依赖。
以reactive为例：
在笔记中我也提到reactive本质：
let obj = { name: 'dy', age: 18 }; let state = new Proxy(obj, { get(obj, key) { console.log(obj, key); // { name: 'dy', age: 18 } name return Reflect.get(obj, key); }, set(obj, key, value) { const result = Reflect.set(obj, key, value); return result; } });
上述代码中讲述了proxy是如何获取以及设置值的。
在其中，get时收集依赖，set触发依赖，与vue2类似。
作者：ClyingDeng
链接：https://juejin.cn/post/6935686232768774180
来源：稀土掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
