分析vue双向绑定原理（MVVM）

Vue的响应式原理，也可以叫双向绑定原理，MVVM模式原理。

一、MVVM 理解

MVVM分为Model、View、ViewModel三者。

• Model 代表数据模型，数据和业务逻辑都在Model层中定义；
• View 代表UI视图，负责数据的展示；
• ViewModel 负责监听 Model 中数据的改变并且控制视图的更新，处理用户交互操作；

Model 和 View 并无直接关联，而是通过 ViewModel 来进行联系的，Model 和 ViewModel 之间有着双向数据绑定的联系。 因此当 Model 中的数据改变时会触发 View 层的刷新，View 中由于用户交互操作而改变的数据也会在 Model 中同步。
这种模式实现了 Model 和 View 的数据自动同步，因此开发者只需要专注对数据的维护操作即可，而不需要自己操作 dom。

二、实现MVVM 思路

1、数据监听器 observe：通过Object.defineProperty定义拦截,监听到数据变化，通过订阅-发布者模式，触发Watcher，从而改变虚拟dom重的具体数据。
2、订阅者模式 Watcher：作为连接Observer和Compile的桥梁，能够订阅并收到每个属性变动的通知，执行指令绑定的相应回调函数，从而更新视图。

1. 先定义发布者，作用：发送消息的。
2. 在定义订阅者（观察者）：接受发布者发布的新消息，内部声明一个update方法来触发订阅属性。

3、指令解析器 compile：对每个元素节点的指令进行扫描和解析，根据指令模板替换数据，以及绑定相应的更新函数。
4、mvvm入口函数

上述流程图：

参考文章：

剖析Vue原理&实现双向绑定MVVM
Vue原理解析——自己写个Vue