广东省水利工程建设信息网站青岛网站建设策划

应用场景

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'] = 10console.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]); // 6console.log(numArr[7]); // 0

 

最后

Proxy又有啥问题呢，为啥需要和Reflect配合? 我们后续再做探讨~