为什么会出现 MVVM

MVVM是Model-View-ViewModel缩写，也就是把MVC中的Controller演变成ViewModel。Model层代表数据模型，View代表UI组件，ViewModel是View和Model层的桥梁，数据会绑定到viewModel层并自动将数据渲染到页面中，视图变化的时候会通知viewModel层更新数据。

为什么会出现 MVVM 呢？

MVC即 Model-View-Controller的缩写，就是 模型—视图—控制器，也就是说一个标准的Web 应用程式是由这三部分组成的：

在这里插入图片描述
将整个前端页面分成View，Controller，Modal，视图上发生变化，通过Controller（控件）将响应传入到Model（数据源），由数据源改变View上面的数据。

业务逻辑放在Model当中，页面渲染逻辑放在View当中，但在实际运用上却存在一个问题：那就是MVC框架允许View和Model直接进行通信

View和Model之间随着业务量的不断庞大，会出现蜘蛛网一样难以处理的依赖关系，随着前端应用的复杂程度越来越复杂。前端开发MVC就暴露出了三个痛点问题：

1、开发者在代码中大量调用相同的 DOM API，处理繁琐，操作冗余，使得代码难以维护。
2、大量的DOM 操作使页面渲染性能降低，加载速度变慢，影响用户体验。
3、当 Model 频繁发生变化，开发者需要主动更新到View ；当用户的操作导致 Model 发生变化，开发者同样需要将变化的数据同步到Model 中，这样的工作不仅繁琐，而且很难维护复杂多变的数据状态。

MVVM 的出现，完美解决了以上三个问题。

MVVM框架

在这里插入图片描述
可以看到MVVM分别指View，Model，View-Model，View通过View-Model的DOM Listeners将事件绑定到Model上，而Model则通过Data Bindings来管理View中的数据，View-Model从中起到一个连接桥的作用。

MVVM是 Model-View-ViewModel的缩写
Model:代表数据模型，也可以在Model中定义数据修改和操作的业务逻辑。我们可以把Model称为数据层，因为它仅仅关注数据本身，不关心任何行为
View: 用户操作界面。当ViewModel对Model进行更新的时候，会通过数据绑定更新到View
ViewModel：业务逻辑层，View需要什么数据，ViewModel要提供这个数据；View有某些操作，ViewModel就要响应这些操作，所以可以说它是Model for View.

总结： MVVM模式简化了界面与业务的依赖，解决了数据频繁更新。MVVM 在使用当中，利用双向绑定技术，使得 Model 变化时，ViewModel 会自动更新，而 ViewModel 变化时，View 也会自动变化。

MVVM框架与MVC框架的主要区别有两点：
1、实现数据与视图的分离
2、通过数据来驱动视图，开发者只需要关心数据变化，DOM操作被封装了。

扫描二维码关注公众号，回复： 12597084 查看本文章

Vue-MVVM 架构的最佳实践

Vue.js可以说是MVVM 架构的最佳实践，专注于 MVVM中的 ViewModel，ViewModel负责连接 View和 Model，保证视图和数据的一致性,不仅做到了数据双向绑定，而且也是一款相对来比较轻量级的JS 库,下面简单了解一下 Vue.js 关于双向绑定的一些实现细节

Vue.js是采用 Object.defineProperty的 getter和 setter，并结合观察者模式来实现数据绑定的。
当把一个普通 Javascript 对象传给 Vue 实例来作为它的 data 选项时，Vue 将遍历它的属性，用 Object.defineProperty 将它们转为 getter/setter。用户看不到 getter/setter，但是在内部它们让 Vue 追踪依赖，在属性被访问和修改时通知变化。

在这里插入图片描述

Observer：数据监听器，能够对数据对象的所有属性进行监听，如有变动可拿到最新值并通知订阅者，内部采用Object.defineProperty的getter和setter来实现
Compile：指令解析器，它的作用对每个元素节点的指令进行扫描和解析，根据指令模板替换数据，以及绑定相应的更新函数
Watcher：订阅者，作为连接 Observer 和 Compile 的桥梁，能够订阅并收到每个属性变动的通知，执行指令绑定的相应回调函数
Dep：消息订阅器，内部维护了一个数组，用来收集订阅者（Watcher），数据变动触发notify函数，再调用订阅者的 update方法

从图中可以看出，当执行 new Vue()时，Vue 就进入了初始化阶段，
一方面Vue 会遍历 data 选项中的属性，并用 Object.defineProperty将它们转为 getter/setter，实现数据变化监听功能；

另一方面，Vue的指令编译器Compile对元素节点的指令进行扫描和解析，初始化视图，并订阅 Watcher来更新视图，此时Wather会将自己添加到消息订阅器中(Dep)，初始化完毕。

当数据发生变化时，Observer中的 setter 方法被触发，setter 会立即调用Dep.notify()，Dep 开始遍历所有的订阅者watcher，并调用订阅者的 update方法，订阅者收到通知后对视图进行相应的更新。

谢谢你阅读到了最后
期待你关注、收藏、评论、点赞

MVC、MVP、MVVM 设计模式
 MVVM框架理解及其原理实现
 MVVM模式理解
 vue的双向绑定原理及实现
 vue的双向绑定原理及一步一步实现MVVM
剖析Vue原理&实现双向绑定MVVM