Vue的架构模式

前端框架

• angular
  MVC模式，双向数据绑定，依赖注入
• react
  virtual DOM（虚拟DOM，即与DOM一样的对象，操作对象避免DOM的直接操作从而提高性能），性能上辗轧angular
• vue
  结合angular和react的优点，MVVM模式，高性能高效率框架

架构模式

MVC模式

• M： Model (数据) => 数据保存
  Model(模型)表示应用程序核心(比如数据库记录列表)。
  Model(模型)是应用程序中用于处理应用程序数据逻辑的部分。
  通常模型对象负责在数据库中存取数据。
• V： View (视图) => 用户界面
  View(视图)显示数据(数据库记录)。
  View(视图)是应用程序中处理数据显示的部分。
  通常视图是依据模型数据创建的。
• C： Controller (控制器) => 业务逻辑
  Controller(控制器)处理输入(写入数据库记录)。
  Controller(控制器)是应用程序中处理用户交互的部分。
  通常控制器负责从视图读取数据，控制用户输入，并向模型发送数据。

MVC 分层有助于管理复杂的应用程序，因为您可以在一个时间内专门关注一个方面。例如，您可以在不依赖业务逻辑的情况下专注于视图设计。同时也让应用程序的测试更加容易。

MVC 分层同时也简化了分组开发。不同的开发人员可同时开发视图、控制器逻辑和业务逻辑。

MVC是一个框架模式，它强制性的使应用程序的输入、处理和输出分开。使用MVC应用程序被分成三个核心部件:模型、视图、控制器。它们各自处理自己的任务。最典型的MVC就是JSP + servlet + javabean的模式。

---

MVP

MVP是模型（Model）、视图（View）、主持人（Presenter）的缩写，分别代表项目中3个不同的模块。

• 模型（Model）：
  负责处理数据的加载或者存储，比如从网络或本地数据库获取数据等；
• 视图（View）：
  负责界面数据的展示，与用户进行交互；
• 主持人（Presenter）：
  相当于协调者，是模型与视图之间的桥梁，将模型与视图分离开来。
  
  View与Model并不直接交互，而是使用Presenter作为View与Model之间的桥梁。其中Presenter中同时持有View层以及Model层的Interface的引用，而View层持有Presenter层Interface的引用。当View层某个界面需要展示某些数据的时候，首先会调用Presenter层的某个接口，然后Presenter层会调用Model层请求数据，当Model层数据加载成功之后会调用Presenter层的回调方法通知Presenter层数据加载完毕，最后Presenter层再调用View层的接口将加载后的数据展示给用户。这就是MVP模式的整个核心过程。

---

MVVM

MVVM架构模式是MVP的演变

• Model
• View
• ViewModel类似于MVP中的Presenter，唯一区别是它为双向绑定，View的变动自动反映在ViewModel，反之亦然。

核心：关注Model的变化，让MVVM框架利用自己的机制去更新DOM，让开发者从操作DOM的繁琐解脱。

不管是哪个，让Model和View不能直接通信是非常关键的限制。让Model和View直接通信在系统变得复杂时会成为灾难，Model和View直接耦合，会使得系统失控。