vue2与vue3响应原理 | 技术点评

之前的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类似。