商业网站创建教程,大学信息化建设 网站群,新媒体营销案例分析,哪个网站可以做头像应用场景
Vue2采用的defineProperty去实现数据绑定#xff0c;Vue3则改为Proxy#xff0c;遇到了什么问题#xff1f;
- 在Vue2中不能检测数组和对象的变化
1. 无法检测 对象property 的添加或移除
var vm new Vue({data:{a:1}
})// vm.a 是响应式的vm.b 2
// vm.b 是…应用场景
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 ab},enumerable: true,configurable: true,});Object.defineProperty(obj, b, {get() {return b;},set(newVal) {b newVal;c ab},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配合? 我们后续再做探讨~
