Vue响应式原理

目录

1. 数据代理/数据劫持 Object.defineProperty()

1.1 Object.defineProperty()

1.1.1 语法

1.1.2 使用

2. 收集依赖与派发更新

2.1 依赖

2.2 依赖收集

2.3 派发更新

3. 代码整理

3.1 Dep类

3.2 window.target

3.3 update方法

 3.4 targetStack

总结

Vue2 与 Vue3 响应式区别

---

 

 

1. 数据代理/数据劫持 Object.defineProperty()

1.1 Object.defineProperty()

首先我们为什么要一上来就讲Object.defineProperty()这个函数，主要是在Vue2.0中，响应式原理离不了用这个函数去进行数据劫持这样一个过程。那么什么是数据劫持，该怎么用Object.difineProperty()来实现数据劫持，数据劫持有什么用处，在接下来我将一一讲述。

Object.defineProperty()方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性，并返回此对象。

Object.defineProperty()方法可以设置一些隐藏属性；

1.1.1 语法

Object.property(obj, prop, descriptor);

参数

obj：要定义属性的对象

prop：要定义或修改的属性的名称或Symbol;

descriptor：要定义或修改的属性描述符。

关于decriptor可选键值：

configurable：当且仅当该属性的configurable键值为true时，该属性的描述符才能够被改变，同时该属性也能从对应的对象上被删除。默认为false.

enumerable：当且仅当该属性的enumerable键值为true时，该属性才会出现在对象的枚举属性中，即该属性才可以被遍历。默认为false.

value：该属性对应的值。可以是任何有效的JavaScript值（数值、对象、函数等）。默认为undefined。

writable：当且仅当该属性的writable键值为true时，属性的值，也就是上面的value，才能被赋值运算符改变。需要注意get set不可与value同时使用，会报错。默认值为false。

get：属性的getter函数，如果没有getter，则为underfined。当访问该属性时，会调用此函数。执行时不传入任何参数，但是会传入this对象（由于继承关系，这里的this并不一定时定义该属性的对象）。该函数的返回值会被用作属性的值。默认为undefined。

set：属性的setter函数，如果没有setter，则为undefined。当属性值被修改时，会调用此函数。该方法接收一个参数（也就是被赋予的新值），会传入赋值时的this对象。默认为undefined。

1.1.2 使用

这里我们看一个例子：

const obj = { a: 1 };
let val = 1;
Object.defineProperty(obj, 'a', {
    get() {
        console.log(`get property a`);
        return val;
    },
    set(newVal) {
        if (val === newVal) //值相同则不修改
            return;
        console.log(`set proper a -> ${newVal}`);
        val = newVal;
    }
})

// obj.a = 2;
console.log(obj.a);

我们发现，当我们访问obj.a时，打印了get property a并且返回1，当执行obj.a = 2设置新的值时，打印了set proper a -> 2。相当于我们自定义了obj.a取值和赋值的行为，使用自定义的getter和setter来重写了原有的行为，这就是数据劫持的含义。

defineReactive()

在上面的代码中相信大家也看出来了，我们需要一个全局的val变量来保存这个属性的值，因此，我们可以使用下面的写法：

function defineReactive(obj, key, val = data[key]) {
    Object.defineProperty(obj, key, {
        get() {
            return val;
        },
        set(newVal) {
            if (val === newVal) //值相同则不修改
                return;
            val = newVal;
        }
    })
}

defineReactive(obj, a, 1);

Observer

我们又发现想要劫持一个对象里的一个属性就要调用一次difineReactive();如果obj中由多个属性该怎么处理？当然是遍历了，通过遍历obj中的每一个属性，然后将obj与遍历到的属性名传进difineReactive()中。这里我呢吧新建一个Observer类连进行遍历对象。

export default class Observer {
    constructor(value) {
        this.value = valu