Vue原生实现数据双向绑定,defineProperty和Proxy分别实现

数据双向绑定是Vue的一个重要特点，使得整个框架可以基于数据驱动实现各种数据渲染及交互。
Vue2利用Object.defineProperty来劫持data数据的getter和setter操作。这使得data在被访问或赋值时，动态更新绑定的数据的页面元素。

Object.defineProperty存在的问题

1. 只能劫持一个属性，需要对对象遍历进行批量劫持
2. 新增数据无法实现
3. 无法监听数组变化

Proxy第一个参数是要劫持的目标对象，第二个参数是一个处理器对象
get()和set()是最常用的两个方法
当执行一个操作时定义代理行为的函数，拦截所有发生在data数据上的操作

Object.defineProperty只能监听属性，而Proxy能监听整个对象
Object.defineProperty只能监听对象一个属性，通过遍历监听所有
Proxy可以监听整个对象，不用再去遍历所有属性进行劫持了，这样就省去了遍历元素
Object.defineProperty不能监测到数组变化，Proxy可以。