在 Vue
2中如何实现数据的响应式,使用的是 Object.defineProperty
实现,当对象里面是数组的时候监听不到
let obj = {
age: 10,
}
let num = 1
Object.defineProperty(obj, 'age', {
get() {
console.log("get");
return num
},
set(val) {
console.log('set');
num = val
}
})
console.log(num);
vue3的响应式原理是配合proxy来实现的,它是直接监听对象而非属性,所以就不需要使用循环了
let obj = {
age: 10,
}
let data = new Proxy(obj, {
get(target, prop) {
console.log('get');
return prop in target ? target[prop] : 'mei'
},
set(target, prop, value) {
console.log('s');
target[prop] = value
},
})
// data.age = 1000
console.log(data.age);