应用场景
Vue2采用的defineProperty去实现数据绑定,Vue3则改为Proxy,遇到了什么问题?
- 在Vue2中不能检测数组和对象的变化
1. 无法检测 对象property 的添加或移除
var vm = new Vue({
data:{
a:1
}
})
// `vm.a` 是响应式的
vm.b = 2
// `vm.b` 是非响应式的
2. 不能检测以下数组的变动
- 利用索引直接设置一个数组项时
- 修改数组的长度
var vm = new Vue({
data: {
items: ['a', 'b', 'c']
}
})
vm.items[1] = 'x' // 不是响应性的
vm.items.length = 2 // 不是响应性的
Vue 3 使用Proxy
对象来实现响应式数据绑定和属性收集。Proxy
可以代理整个对象,而不仅仅是对象的已有属性,并且能够更好地处理数组和新增属性等情况
基本用法
defineProperty
let a = 2;
let b = 3;
let c = a + b;
const obj = {};
console.log(c);
Object.defineProperty(obj, 'a', {
get() {
return a;
},
set(newVal) {
a = newVal;
c= a+b
},
enumerable: true,
configurable: true,
});
Object.defineProperty(obj, 'b', {
get() {
return b;
},
set(newVal) {
b = newVal;
c= a+b
},
enumerable: true,
configurable: true,
});
obj['a'] = 10
console.log(c);
Proxy
let numArr = [3, 6, 9];
numArr = new Proxy(numArr, {
get(target, prop) {
if (prop in target) {
return target[prop];
} else {
return 0;
}
},
});
console.log(numArr[1]); // 6
console.log(numArr[7]); // 0
最后
Proxy又有啥问题呢,为啥需要和Reflect配合? 我们后续再做探讨~