Vue3.0使用Proxy对象代理拦截实现数据绑定视图的驱动操作。弥补了vue2.0中的限制,比如属性删除和添加监听,数组基于下标修改,长度变化等。参考网上流传的机制图。什么是代理?首先,让我们了解什么是代理。Proxy不是简单的serverProxy服务器代理,而是ES6中的一个新特性Proxy。我们先看看MDN官网上的描述。枚举、函数调用等)。####术语处理程序包含陷阱的占位符对象,可以将其翻译成处理器对象。陷阱提供属性访问的方法。这类似于操作系统中陷阱的概念。target是Proxy代理虚拟出来的对象。它通常用作代理的存储后端。根据目标验证关于对象不可扩展性或不可配置属性的不变量(保留不变语义)。####语法constp=newProxy(target,handler)参数targetProxy要包装的目标对象(可以是任何类型的对象,包括原生数组、函数,甚至是另一个代理)。handler是一个对象,通常有函数作为属性,每个属性中的函数定义了代理p执行各种操作时的行为。参考网址https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Proxy#%E8%AF%AD%E6%B3%95通过官网的描述,我们知道那么Proxy可以拦截对对象的各种操作,我们通过代理来演示一下。consttarget={list:[]}consthandle={/**/*监听器设置方法/*@paramstargetobjecttarget/*@paramspropobjectkey/*@paramsvaluesetvalue**/set(target,prop,value){//如果设置了list,添加元素if(prop==='list'){target[prop].push(value)console.log('customizabletriggerdiffpolicy-drivenview')returntrue}//增加属性值target[prop]=value}}constobservedData=newProxy(target,handle)observedData.list='123'observedData.list='456'observedData.list='789'console.log(observedData.list)//['123','456','789']从上面的代码可以看出我们已经自定义拦截了对象的setting操作,所以我在自定义一个视图驱动引擎和mapbuffer操作等,可以对数据进行双向绑定性能优化等操作。
