【JS】【Vue3】Proxy理解

【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配置项的函数将会执行。