vue数据双向绑定

vue数据双向绑定分为视图层（view）、数据层（model）、业务逻辑层（ViewModel），也就是MVVM。

Model和View没有直接的联系，而是通过ViewModel进行关联的。Model和ViewModel之间有双向数据绑定的关系，因此model中的数据改变时，会触发View层的刷新，同理，View中的用户交互操作也会在model中同步

vue.js采用数据劫持结合发布者和订阅者模式的方法来进行数据双向绑定。通过Object.defineProperty()来劫持每个属性的getter和setter，并在数据发生变化时发布消息给订阅者，触发相应的监听回调：如下图

其中，vue2是使用Object.defineProperty来改变的原始数据，vue3是通过proxy直接代理整个对象实现的，是ES6中提供的功能，用于定义基本的自定义行为，Proxy的特点如下：

1、Proxy直接代理整个对象而非对象属性，可以直接监听统计结构下的所有属性变化，包括新增属性和删除属性

2、Proxy可以监听数组的变化

注：这些都是Object.defineProperty()无法直接做得到，vue2的Object.defineProperty()是通过重写内部方法才实现的这些功能