Vue3.0新特性之Proxy实现双向绑定

Vue3中的双向绑定Proxy

双向绑定这个概念应该已经不是个陌生的概念了，只要提到MVVM那就不得不提到它，我们来看Vue的三要素：

• 响应式： Vue如何监听到data的每个属性变化
• 模板引擎： Vue的模板如何被解析，指令如何处理
• 渲染： Vue如何将监听到的数据变化和解析后的html进行渲染

其中第一要素响应式的实现方法，就是我们提到的双向绑定

在之前的文章中介绍了Vue2.0中基于数据劫持的双向绑定，使用的是Object.defineProperty()方法，但是这种方法在实现数据双向绑定时依然存在了许多不足和缺陷之处，因此，在即将到来的Vue3.0中，加入了Proxy来代替Object.defineProperty()方法，解决了2.0版本中关于双向绑定的若干缺陷。

Vue2.0中使用Object.definePorperty()的缺陷

在正式介绍Proxy之前，我们先来回顾一下使用Object.definePorperty()实现双向绑定时的不足和缺陷。

1. Object.definePorperty()递归遍历所有对象的所有属性，当数据层级较深时，会造成性能影响。
2. Object.definePorperty()只能作用在对象上，不能作用在数组上。
3. Object.definePorperty()只能监听定义时的属性，不能监听新增属性。
4. 由于Object.definePorperty()不能作用于数组，vue2.0选择通过重写数组方法原型的方式对数组数据进行监听，但是仍然无法监听数组索引的变化和长度的变更

vue2.0中基于数据劫持的双向绑定可以参考之前发布的这篇文章

Proxy

既然有问题了那就得解决，Vue3.0中就引入了Proxy

首先来关注一下Proxy到底是什么，以及它的具体用法：

Proxy是Es6中的新增特性，用于定义基本操作的自定义行为（如属性查找、赋值、枚举、函数调用等）

Proxy可以理解成，在目标对象之前架设一层“拦截”，外界对该对象的访问，都必须先通过这层拦截，因此提供了一种机制，可以对外界的访问进行过滤和改写，修改某些操作的默认行为，这样我们可以不直接操作对象本身，而是通过操作对象的代理对象来间接操作对象。Proxy这个词的原意是代理，用在这里表示由它来“代理”某些操作，可以译为“代理器”。

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

var proxy = new Proxy(target, handler)

targe