Javascript

【JS】【Vue3】Proxy理解

本文主要是介绍【JS】【Vue3】Proxy理解,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

【JS】【Vue3】Proxy理解

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

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

这篇关于【JS】【Vue3】Proxy理解的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!