浅谈MVVM模式的理解

做前端就要不断的学习各种流行的框架，react,angular,vue……你有没有发现，这些框架跟jquery这些框架不一样，他们采用的都是mvvm的软件架构设计模式。

• 如果使用传统的jquery和ajax的模板引擎，前端需要手动拼接模板字符串，然后手动操作dom元素把拼接出来的模板字符串，渲染到页面指定的区域。
• 前端能不能只关心业务，尽量不操作dom元素？这时候就需要用到mvvm思想了！

首先我们先了解一下MVC模式

MVC全名是Model View Controller，是模型(model)－视图(view)－控制器(controller)的缩写

在这其中：

• Model：负者处理数据的逻辑和从数据库存取数据
• View：负者展示数据，UI界面，用户交互
• Controller： 处理用户的交互动作，负责数据在View和Model之间的连通

什么是mvvm呢

简单来说，mvvm是modal-view-viewmodel的缩写。

• 数据层（Model）：应用的数据及业务逻辑
• 视图层（View）：应用的展示效果，各类UI组件
• 业务逻辑层（ViewModel）：框架封装的核心，它负责将数据与视图关联起来
  
  在MVVM中最重要的是实现了数据的双向绑定。

MVVM把前端的每一个页面分成了三个部分：Model，View，ViewModel

• V：页面结构
  • view层，就是前端的html结构，用户呈现数据给用户的
• M：页面中要渲染的数据
  • Model中的数据都是通过调接口从服务器端获取回来的，这些数据都要通过某种方式渲染到页面上去
• VM：调度者
  • VM调度者会能够把页面上数据的变化，自动同步到model层中，自动帮我们渲染前端的页面

MVVM的好处

MVVM这种概念，主要的好处就是实现了数据的双向绑定，实现的核心就是VM这个调度者。它解放了前端程序员更少的操作dom。
**注意：**MVC和MVVM的主要区别就是MVVM实现了数据的双向绑定，同时MVC是后端的开发思想，MVVM是前端的开发思想。