Vue.js的MVVM模式_vue.js mvvm图

开头先放出这张大家看过很多遍的图。简单理解就是：在模板（Model）上绑定JavaScript对象（数据），当视图层（View）发生改变，VM层会监听视图层的变化并通知Model数据更新，数据更新后再通过VM层通知View层发生改变。View层和Model层并不能直接通信，两者得到了最大限度的分离。

具体执行过程看这张图：

1. 实现一个Obverse数据监听器，监听所有节点数据对象的属性，如果检测到发生变化便通知Dep（订阅者）

2. 实现一个Compile模板编译类，对每个节点进行解析编译，根据要求更新数据，以及绑定更新函数

3. 实现一个Watcher，是联系监听器和编译类的桥梁，能够订阅并收到每个属性的变化，执行指令绑定更新函数，让视图发生变化。

   在Vue中采用的是数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()对各个属性的setter，getter进行劫持，在数据变动时发布信息给订阅者，触发相应的回调函数。

   然而，最近尤大大发布的更新后Vue3.0改变成用Proxy来实现双向绑定，简单点来说就是在目标对象上加了一层拦截，代理的是对象而不是对象的属性。具体的将在后续的博客中展开叙述。

和MVC模式的比较

• MVVM是MVC的改进版，但不是VM完全取代了C，ViewModel 存在目的 在于抽离 Controller 中展示的业务逻辑，而不是替代Controller，其它视图操作业务等还是应该放在 Controller 中实现。也就是说MVVM实现的是业务逻辑组件的重用。
• 降低了代码的耦合性，View层可以独立于Model变化和改变，一个ViewModel可以绑定到不同的“View”上。
• MVC是单向通信，要通过Controller来进行“承上启下”。