【JS Web 前端知识库】25.说一说Vue3.0 实现数据双向绑定的方法 ？

25.说一说Vue3.0 实现数据双向绑定的方法 ？

得分点:

Proxy、数据拦截、劫持整个对象、返回一个新对象、有13种劫持

标准回答:

Vue3.0 是通过Proxy实现的数据双向绑定，Proxy是ES6中新增的一个特性，实现的过程是在目标对象之前设置了一层“拦截”，外界对该对象的访问，都必须先通过这层拦截，因此提供了一种机制，可以对外界的访问进行过滤和改写。

用法：

ES6 原生提供 Proxy 构造函数，用来生成 Proxy 实例。

var proxy = new Proxy(target, handler)

target:

是用Proxy包装的被代理对象（可以是任何类型的对象，包括原生数组，函数，甚至另一个代理）

handler:

是一个对象，其声明了代理target 的一些操作，其属性是当执行一个操作时定义代理的行为的函数。

加分回答:

1. Object.defineProperty 的问题：

① 在Vue中，Object.defineProperty无法监控到数组下标的变化，导致直接通过数组的下标给数组设置值，不能实时响应。
目前只针对以上方法做了hack处理，所以数组属性是检测不到的，有局限性

② Object.defineProperty只能劫持对象的属性,因此我们需要对每个对象的每个属性进行遍历。

③ Vue里，是通过递归以及遍历data对象来实现对数据的监控的，如果属性值也是对象那么需要深度遍历,显然如果能劫持一个完整的对象，不管是对操作性还是性能都会有一个很大的提升。

2. Proxy的两个优点：

可以劫持整个对象，并返回一个新对象，有13种劫持

💞💖💓💗每个时代，
✨🌟⭐️💫都悄悄犒赏会学习的人。