标签：console log prop Proxy Vue3 obj JS

【JS】【Vue3】Proxy理解

在Vue3中，响应式数据的实现方式从原来Vue2的Object.defineProperty()更换为了Proxy,本质上还是对数据进行拦截，通过getter和setter实现页面的响应式更新。

Vue2中Object.defineProperty存在的问题：

1. 给对象添加或删除属性时，页面不会立即更新
2. 通过数组下标修改数组元素，页面不会立即更新

解决方案：

1. 使用Vue提供的Vue.set()方法【或者vm中的$set方法】
2. 使用数组的方法对数组进行操作，避免使用下标操作数组

Vue3中使用Proxy来代替Object.defineProperty()，解决了上述问题

Proxy使用示例：

Proxy 对象用于创建一个对象的代理，从而实现基本操作的拦截和自定义（如属性查找、赋值、枚举、函数调用等）。

 let objectDemo = {
       keyA: 1,
       keyB: 2,
       keyC: 3
   }
   let proxyObject = new Proxy(objectDemo, {
       get(obj, prop){
           console.log('getter was called!')
           console.log(`value is ${obj[prop]}`)
           return obj[prop]
       },
       set(obj, prop, value){
           console.log('setter was called')
           obj[prop] = value
       },
       deleteProperty(target, prop) {
           console.log(`${p}属性被删除了`)
           return delete target[prop]
       }
   })

这段代码首先创建了一个普通对象objectDemo，然后实例化了一个Prox对象，构造函数中分别传入了objectDemo和一个配置对象。

配置对象中配置了getter和setter，可拦截数据进行操作。同时，当使用delete关键字删除Proxy对象的属性时，deleteProperty配置项的函数将会执行。

标签：console,log,prop,Proxy,Vue3,obj,JS
来源： https://www.cnblogs.com/xiecangfeng/p/16370353.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。