当前位置: 首页 > Web前端 > HTML

学习VUE3,你必须知道如何使用Proxy

时间:2023-03-28 17:31:34 HTML

学习VUE3,你必须知道如何使用Proxy。我们都知道vue2是使用object.defineProxy来实现数据监控的,但是在vue3中,改成了使用JS新增的Proxy对象。今天我们就来看看Proxy是如何使用Proxy对象为一个对象创建一个代理,进而实现基本操作的拦截和定义。它的基本语法是constp=newProxy(target,handler)target是Proxy包裹的目标对象。Handler是一个对象,通常具有功能作为属性。每个属性定义执行各种操作时的代理行为。它可以有一些配置constobj={name:'博悦同学',age:18}constobjProxy=newProxy(obj,{//取值时的捕手get(target,key){console.log(`Listento对象的${key}属性已被访问`,target)returntarget[key]},//设置值时的捕手set(target,key,newValue){console.log(`monitor${对象的键}propertyisset`,target)target[key]=newValue},//listenincapturerhas(target,key){console.log(`listentoobject'sinoperator`,target)returnkeyintarget},//监听deletecapturedeleteProperty(target,key){console.log(`监听对象的delete操作符`,target)deletetarget[key]},//获取对象原型capturegetPrototypeOf(target){xxx},//设置对象原型捕获setPrototypeOf(target,prototype){xxx},//是否可以扩展捕获isExtensible(){xxx},//防止扩展捕获preventExtensions(){xxx},//得到自己的权利ty描述符捕获器getOwnPropertyDescriptor(){xxx},//定义属性捕获器defineProperty(){xxx},//监控属性名称和符号捕获器ownKeys(){xxx},//函数调用操作的捕获器,用于函数对象apply(){xxx},//新的算子捕获器,用于函数对象construct(){xxx}})vue3中使用的是get和set方法。使用proxy代理相当于在对象外围做了一层拦截。不需要像vue2一样对每个属性做专门的遍历来监控属性。数组对象的属性变化也比较好,不需要写专门的方法来处理。