vue2.x的响应式原理
通过Object.defineProperty()对属性的读取、修改进行拦截在结合发布者和订阅者模式的方式来实现
Vue3.0的响应式原理
通过proxy代理进行数据劫持
区别:
// defineproperty
var list = [1, 2, 3];
list.map((item, index) => {
Object.defineProperty(list, index, {
get() {
return item;
},
set(val) {
item= val;
}
});
});
// set可以监听到但是无法在页面是进行更新
list.push(4)
list[3] = 5
// porxy
let arr= [1,2,3];
var proxyObj = new Proxy(arr, {
get(target, propKey, receiver) {
return Reflect.get(target, propKey, receiver);
},
set(target, propKey, value, receiver) {
return Reflect.set(target, propKey, value, receiver);
},
// 监听属性是否删除
deleteProperty: function (target, propKey) {
delete target[propKey];
return true;
},
});
// 监听到数组元素变化页面并更新
proxyObj[1] = 2.1;
proxyObj.push(4);
proxyObj.length = 5;
1.defineproperty只能检查对象中单一属性的改变 而proxy可以检查整个对象的改变并返回一个新的对象
2.defineproperty 无法检查到对象的增加和删除 而proxy可以检查到对象中的值的变化不但能监听到属性的增加 也可以监听属性的删除
3.defineproperty 无法检查到数组的变化 需要进行数组方法的重写 而 proxy可以监听数组下标和数组长度的变化
4.defineproperty 无法检数组长度的变化
proxy 本身就是一个构造函数对象 proxy相比于defineproperty劫持莫个属性 proxy则更加彻底 不在局限某个属性,而且直接对整个对象进行代理 proxy可以理解为在每个对象访问前加一个拦截 想要访问对象必须要经过proxy这层拦截