一、MVC的模型
1.1 什么是MVC模型？
MVC模型算是一种设计模式，其目的是给视图与模型数据构建桥梁，使其分离并便于通过控制台进行管理，为了代码更加的规范化但不能简化。
主要细分成下面三部分：
- M（模型model）：应用程序中与数据库存储连接的模型部分，负责进行数据逻辑处理的部分。
- V（视图view）：应用程序中负责显示数据的部分，既是用户页面显示。视图是根据数据模型而进行创建的。
- C(控制台controller)：应用程序中负责修改数据请求操作的部分，既是用户与页面交互操作。其本身只是进行数据的逻辑处理，并不具备像视图的输出以及模型的数据处理操作。它只接收用户交互请求，并给模型分配哪个模型部分需要进行请求，再给视图确定需要在哪个版块显示已处理的数据。
1.2 MVC的模型图
1.3 MVC的使用框架
例如C++语言使用的QT，就是通过MVC的框架来搭建的，毕竟QT也可以实现窗口化数据可视化，用户交互。
1.4 MVC的优缺点
优点：
- 更改视图层代码编译不需要编译模型与控制台的代码。
- 因为多个视图可以共享一个模型用户部分，使用手机或电脑的业务场景大为相同。
- 因为业务层与视图层分离，比较适合维护，而在开发阶段部署也相对较低（有点类似前后端分离，视图与业务分开）
缺点：
- 代码实现较为复杂。
- 不适合小型项目开发，因为模型与视图部分是完全分离的，调试起来比较繁琐。
- 视图与控制台联系比较频繁，而导致视图可能会对模型进行没有必要的联系重复，而影响性能。
二、MVVM的模型
2.1 什么是MVVM模型？
2.1.1 MVVM模型原理
本质上是MVC的改进版，视图与视图模型的响应式数据双向绑定。在开发中，模型就是后端进行业务操作，视图是前端的html,css的部分，视图模型既是js部分。
主要分为下面三部分：
- M（模型model）：与数据库存储联系的模型部分，负责进行数据逻辑处理的部分。（后端的数据）
- V（视图view）：负责显示数据的部分，既是用户页面显示。视图是根据数据模型而进行创建的。（DOM中的NODE节点树）
- VM(视图模型层viewModel)：是构建模型与视图的桥梁。因为模型传过来的数据平时是不能与视图上的控件一一对应上的，所以视图模型层负责是把模型封装成显示和接收的界面数据对象。
2.1.2 MVVM模型是怎么进行数据双向绑定的
MVVM中的数据双向绑定原理主要是在视图view与视图模型viewModel中进行处理的。
- 当视图模型监听到数据更新，会把此数据传给视图进行渲染显示。
- 当视图数据更新（通常是表单元素）时，如input输入字符串。框架监听到视图数据变化，会告知视图模型进行同步更新。
结合2.2 MVVM的模型图可以更直观理解数据双向绑定概念。
2.2 MVVM的模型图
2.2.1 MVVM的原型图
2.2.2 MVVM框架模型图
2.2.3 根据VUE框架以视图模型为中转站的MVVM模型图
2.2.4 MVVM与三剑客分配（html,css,js等）
2.3 MVVM的使用框架
微信小程序，vue.js等等
扫描二维码关注公众号，回复：
15481090 查看本文章
2.4 MVVM的使用框架
优点：
- 减少对DOM的操作，可以提升页面的性能。视图对立与model的变化与修改。
- 复用性高，可以把一些视图写在视图模型中，而多个视图可以服用这个视图的逻辑。
缺点：
- 简单的视图使用MVVM可能会大材小用。
- 随着页面的视图模块增加，对于视图模型的维护成本会更加困难。
三、MVC的模型与MVVM模型的区别
MVVM模型与MVC模型最大的区别是MVVM实现视图与模型的同步更新。当模型的数据发生改变的时候，不需要手动刷新DOM获得新的视图，会自动实现同步。
但MVC也不是完全摒弃，MVVM中的视图模型只是把控制台的一部分业务逻辑抽取出来，毕竟有些视图有关的业务逻辑操作还是需要放在控制台中完成。
四、总结
经过学习，可以看出MVC→MVVM中，在数据与页面的DOM进行独立分开，提高页面的DOM与数据动态双向绑定，更便于前端开发使用后端接收的数据以及进行相应的渲染操作。本人之后会进一步研究VUE中的数据双向绑定的底层原理。