本文已参与「新人创作礼」活动，一起开启掘金创作之路。
MVVM
MVVM 架构
MVVM 模型是由 Model、View 和 ViewModel 三部分。
- Model：数据模型，负责数据存储。泛指后端进行的各种业务逻辑处理和数据操作，主要围绕数据库系统展开；
- View：视图层，负责页面展示，主要由 html、css 构建；
- ViewModel：视图模型，View 和 Model 之间的沟通桥梁，负责监听 Model 或者 View 上的修改，实现 MVVM 双向绑定。
VUE 并没有完全遵循 MVVM，它专注于 MVVM 中的 ViewModel。Vue 实例化的对象就是 MVVM 模式中的 VM 层，模型可以通过它将数据绑定到页面上，视图可以通过它将数据映射到模型上。
MVVM 的优势
当前端业务场景越来越复杂时，前端开发就暴露出了一些痛点问题：
- 开发者在代码中大量调用相同的 DOM API，处理繁琐、操作冗余，代码很难维护；
- 大量的 DOM 操作使页面渲染性能降低，加载速度变慢，影响用户体验；
- 当 Model 频繁发生变化，开发者需要主动更新到 View ；当用户的操作导致 Model 发生变化，开发者同样需要将变化的数据同步到 Model 中，这样的工作不仅繁琐，而且很难维护复杂多变的数据状态。
正是基于对这些问题的解决需求，MVVM 模式应运而生。它的优点如下：
- 低耦合：View 可以独立于 Model 变化而修改；
- 可重用性；
- 前后端分离：开发人员可以专注于业务逻辑（ViewModel）和数据的开发，设计人员可以专注于页面设计。
MVC
MVC 是Model-View-Controller的缩写，即模型-视图-控制器。
- Model：后端传递的数据；
- View：展示出来的页面；
- Controller：业务逻辑。
MVC 是单向通信，即 View 和 Model，必须通过 Controller 来进行控制。使用 MVC 的目的就是将 Model 和 View 代码分离。
1. View 传送指令到 Controller；
2. Controller 完成业务逻辑后要求 Model 改变状态；
3. Model 将新的数据发送到 View，用户得到反馈。
MVP
MVP 模式将 Controller 改名为 Presenter，同时改变了通信方向。
- 各个部分之间的通信，都是双向的；
- View 和 Model 不发生联系，都通过 Presenter 传递；
- View 非常薄，不部署任何业务逻辑，即没有任何主动性。Presenter 非常厚，所有逻辑都部署在那里。
MVP 和 MVVM 完全一致，唯一的区别是它采用双向绑定：View 的变动、自动反应在 ViewModel 上。
