vue2是采用数据劫持
结合发布者-订阅者模式
的方式,通过Object.defineProperty()
来劫持各个属性的setter
,getter
,在数据变动时发布消息给订阅者,触发相应的监听回调来渲染视图。
但是vue2双向数据绑定存在问题:
1.Vue 无法检测 property
的添加或移除。由于 Vue 会在初始化实例时对property
执行 getter/setter
转化,所以property
必须在 data
对象上存在才能让 Vue 将它转换为响应式的。
2.当你利用索引直接设置一个数组项时,例如:vm.items[indexOfItem] = newValue
当你修改数组的长度时,例如:vm.items.length = newLength
对于以上两种情况也有解决方案,使用$set方法
vue3中的响应式采用了ES6中的Proxy方法
proxy跟Object.defineProperty一样也可以给对象的属性添加两个方法get&set。但是区别于vue2Object.defineProperty一次性只能给对象的一个属性添加get&set方法,而Proxy一次性给对象所有属性都设置get&set方法
let obj = {
a: 1,
b: 2
}
const proxy = new Proxy(obj, {
get: function(target, prop, receiver) {
return prop in target ? target[prop] : 0
},
set: function(target, prop, value, receiver) {
target[prop] = 666
}
})
console.log(proxy.a) // 1
console.log(proxy.c) // 0
proxy.a = 10
console.log(proxy.a) // 666
obj.b = 10
console.log(proxy.b) // 不是666 而是10