vue2监测机制是通过object.defineProperty来进行的,然后劫持属性的get与set,他只能监听原有的属性,对于新增的属性无法监听,要使用vm.$set(对象/数组,属性名/索引,值)来设置
// // vue2响应式
let obj = {}
Object.defineProperty(obj, "prototypeName", {
get: function (val) {
console.log("调用了get");
},
set: function (newVal, oldVal) {
console.log("调用了set,新值为:" + newVal);
}
})
obj.prototypeName //调用get
obj.prototypeName = "666" //调用set
vue3使用的是porxy代理整个对象不管对象新增什么属性都可以监测到,不会有vue2新增属性无法监测到的情况
// let obj = {}
let reactives = (obj) => {
let o = new Proxy(obj, {
// target原对象 key当前的key value要修改的值
get(target, key, receiver) {
console.log("get-target", target);
console.log("get-key", key);
console.log("get-receiver", receiver);
},
set(target, key, value, receiver) {
target[key] = value
console.log("set-target", target);
console.log("set-key", key);
console.log("set-value", value);
console.log("set-receiver", receiver);
},
deleteProperty(target, key) {
console.log("delete-target", target);
console.log("delete-key", key);
}
})
return o
}
let state = reactives({
name: "张三"
})
state.name
state.name = "李四"
以上只是个人手敲后的理解,希望带佬能指正