详细聊聊Vue.js中的MVVM 详细聊聊Vue.js中的MVVM

MVVM的理解
MVVM的原理

脏检查机制：
数据劫持
相同点

实现MVVM

总结

MVVM的理解

文章图片

MVVM拆开来即为Model-View-ViewModel，有View，ViewModel，Model三部分组成。View层代表的是视图、模版，负责将数据模型转化为UI展现出来。Model层代表的是模型、数据，可以在Model层中定义数据修改和操作的业务逻辑。ViewModel层连接Model和View。
在MVVM的架构下，View层和Model层并没有直接联系，而是通过ViewModel层进行交互。ViewModel层通过双向数据绑定将View层和Model层连接了起来，使得View层和Model层的同步工作完全是自动的。因此开发者只需关注业务逻辑，无需手动操作DOM，复杂的数据状态维护交给MVVM统一来管理。在Vue.js中MVVM的体现：

文章图片

MVVM的原理在不同的框架当中，MVVM实现的原理是不同的：

脏检查机制：
Angular.js就是采取的脏检查机制，当发生了某种事件（例如输入），Angular.js会检查新的数据结构和之前的数据结构是否发生来变动，来决定是否更新视图。

数据劫持
Vue.js的实现方式，对数据（Model）进行劫持，当数据变动时，数据会出发劫持时绑定的方法，对视图进行更新。

相同点
脏检查机制和数据劫持是有许多相同点的，例如，它们都有三个步骤：