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简单数据结构 |