vue里面的 Object.defineProperty 和 Proxy使用优势
首先看 Object.defineProperty
let m = {
a: 1,
b: 2,
arr: [1, 2, 3]
}
let o = {}
Object.keys(m).forEach((x) => {
Object.defineProperty(o, x, {
get() {
return m[x]
},
set() {
return m[x]
}
})
})
console.log('22', o);
下图打印的结果
a, arr, b 都是有get 和 set方法的,但是数组里面的属性是没有 set 和 get方法的
也就是修改了数组里面的数据,不会 触发set 和 get 方法的
利用递归也是可以修改数据里面的数据,来 触发set 和 get 方法的
之前的作者大大为什么不这样做呢,有 for 循环 需要遍历递归,但是如果对象的属性很多的话,这样的遍历递归是很消耗性能的
new Proxy
let m = {
a: 1,
b: 2,
arr: [1, 2, 3]
}
let o = new Proxy(m, {
get(target, key) {
return target[key];
},
set() {
}
})
console.log('oo', o);
Proxy 它也是修改了数组里面的数据,不会 触发set 和 get 方法的
但是它只要递归一次就可以实现我们想要的了。