Vue3响应式原理

Vue中用过三种响应式解决方案，分别是defineProperty、Proxy和value setter。

1.defineProperty

//在以下例子中，使用defineProperty代理了obj对象的count属性，当count属性发生变化时，
//会输出变化的值
const { count } = require("console");

let obj = {};
Object.defineProperty(obj, 'count', {
    get() {
        return count;
    },
    set(val) {
        console.log(val);
    }
});

obj.count = 1; //打印1
obj.count = 2; //打印2

以上代码实现了一个最基本的响应式功能。但通过defineProperty实现响应式原理还是存在一定缺陷的，比如如果我删除了count属性，set函数式不会执行的。

delete obj.count //无事发生

2.Proxy

let obj = {
    count: 1
}

let proxy = new Proxy(obj,{
    get: function (target, prop) {
        console.log('get '+target[prop]);
        return target[prop]
    },
    set: function (target, prop, value) {
        console.log('set '+value);
        target[prop] = value;
    },
    deleteProperty: function (target, prop) {
        delete target[prop];
        console.log('delete '+prop);
    }
})
proxy.count; //get 1
proxy.count = 2; //set 2
delete proxy.count; //delete count

以上代码用Proxy实现了和defineProperty相同的功能，并且还完善了几个defineProperty的缺陷（比如监听属性删除）。

Proxy 是针对对象来监听，而不是针对某个具体属性，所以不仅可以代理那些定义时不存在的属性，还可以代理更丰富的数据结构，比如 Map、Set 等，并且我们也能通过deleteProperty 实现对删除操作的代理。

ps.Vue3中的reactive就是用Proxy实现的

3.value setter

let count = {
    get value() {
        console.log(this.value);
        return this.value;
    },
    set value(val) {
        console.log(val);
    }
}
count.value = 1; //打印1
count.value = 2; //打印2

以上代码使用get和set函数完成了对count的value属性进行监听。

ps.Vue3中的ref使用的就是value setter方式

4.三种方式的对比

实际场景	Vue2 响应式	Vue3 reactive	Vue3 ref
优势	兼容性	基于Proxy实现了真正的代理	实现简单
劣势	数组和属性删除等操作拦截不了	不能兼容IE11	只拦截了value属性
实际应用	Vue2	Vue3复杂数据结构	Vue3简单数据结构