关于 MVVM 设计模式

本文主要浅析传统 MVP 设计模式与先进流行的 MVVM 设计模式的一些区别，以及简要分析 MVVM 设计模式的优势等。作为 Vuejs 学习过程中的资料。由于本人水平有限，如文中出现错误请多多包涵并指正，感谢。

传统 MVP

传统前端开发中的 MVP 设计模式。把代码分为 Model 数据层、Presenter 业务逻辑控制层、View 视图层（DOM展示）。

在这种设计模式中，Presenter 层在 MVP 中是最核心的一层，里面的业务逻辑是 视图 和 模型层之间的中转站。

之前的 todoList 我们通过 jQuery 去实现相同的功能的时候，观察代码我们也可以得出这样的结论。

在 MVP 这种设计模式里，最核心的层是 Presenter 层。而 Model 层实际上非常的边缘。
同时在这种设计模式里，大量的代码被写在 Presenter 层。而这些代码之中，大多数都是在做 DOM 操作。

MVVM

通过 Vuejs 官方提供的示例图，可以看到 MVVM 设计模式和 MVP 的区别。

在 MVVM 设计模式中，也有 Model 层，负责存储数据。有 View 层，用于显示数据。但 MVVM 设计模式中，没有 Presenter 层。取而代之的是 V-Model 层级。
而 V-Model 并不需要我们来 进行编写，使用 MVVM 设计模式进行编码的时候，无需关注 V-Model 这一层是如何实现的，它完全是 Vue 内置的（因为涉及到Vue框架源码的实现，不做讲解）。而我们只需要更多的关注 M 层与 V层，即模型层和视图层。

对应之前通过 Vue 实现的 todoList 代码中，我们可以看到，模板标签实际上就是 MVVM 设计模式的 V层。接下来 M 层当中的代码都是在针对数据进行操作。
而随着M层数据的操作，V层也会随之改变。这样的实现就是通过V-M层实现的。而 V-M层就是通过 Vue 实现的。这样我们就更好的理解了上面那张 Vue 的官方示例图。
当使用 MVVM 设计模式进行开发的时候，着重把注意力放在 M层的开发之上。

小结

以前我们通过 MVP 设计模式进行开发的时候，是面向 DOM 进行开发。
而使用 MVVM 设计模式进行开发的时候，是面向数据编程。即极大程度的简化了代码量。这大量的代码，几乎都来自于以前的 DOM 操作。

作者：evenyao
链接：https://www.jianshu.com/p/7779e5505006