25.说一说Vue3.0 实现数据双向绑定的方法 ?
得分点:
Proxy
、数据拦截、劫持整个对象、返回一个新对象、有13种劫持
标准回答:
Vue3.0
是通过Proxy
实现的数据双向绑定,Proxy
是ES6
中新增的一个特性,实现的过程是在目标对象之前设置了一层“拦截”,外界对该对象的访问,都必须先通过这层拦截,因此提供了一种机制,可以对外界的访问进行过滤和改写。
用法:
ES6
原生提供Proxy
构造函数,用来生成Proxy 实例
。
var proxy = new Proxy(target, handler)
target
:
是用
Proxy
包装的被代理对象(可以是任何类型的对象,包括原生数组,函数,甚至另一个代理)
handler
:
是一个对象,其声明了代理
target
的一些操作,其属性是当执行一个操作时定义代理的行为的函数。
加分回答:
Object.defineProperty
的问题:
① 在
Vue
中,Object.defineProperty
无法监控到数组下标的变化,导致直接通过数组的下标给数组设置值,不能实时响应。
目前只针对以上方法做了hack
处理,所以数组属性是检测不到的,有局限性
②
Object.defineProperty
只能劫持对象的属性,因此我们需要对每个对象的每个属性进行遍历。
③
Vue
里,是通过递归以及遍历data对象
来实现对数据的监控的,如果属性值也是对象那么需要深度遍历,显然如果能劫持一个完整的对象,不管是对操作性还是性能都会有一个很大的提升。
Proxy
的两个优点:
可以劫持整个对象,并返回一个新对象,有13种劫持
💞💖💓💗每个时代,
✨🌟⭐️💫都悄悄犒赏会学习的人。