简单介绍前端MVC与MVVM
MVC
一、概述
MVC全名是Model View Controller，是模型(model)－视图(view)－控制器(controller)的缩写，一种软件设计规范，用一种业务逻辑、数据、界面显示分离的方法组织代码，在改进和个性化定制界面及用户交互的同时，不需要重新编写业务逻辑。
- 视图（View）：用户界面。
- 控制器（Controller）：业务逻辑
- 模型（Model）：数据保存
二、通信方式
-
View 传送指令到 Controller
-
Controller 完成业务逻辑后，要求 Model 改变状态
-
Model 将新的数据发送到 View，用户得到反馈
MVC的通信是单向的：
浏览器发送请求
Contorller和Model交互获取数据
Contorller调用View
View渲染数据返回
MVVM
一、概述
MVVM（Model-View-ViewModel），是一种 基于前端开发的架构模式。
核心是提供对View 和 ViewModel 的双向数据绑定，View和Model之间并没有直接的联系，而是通过ViewModel进行交互，View的变动，自动反映在ViewModel上，反之亦然，这样就保证视图和数据的一致性。
- M----> model 代表数据模型层，也可以在Model中定义数据修改和操作的业务逻辑；
- V-----> view 视图层（界面），用来展示数据，它负责将数据模型转化成UI 展现出来。
- VM----> ViewModel（视图模型），是一个同步View 和 Model的对象。
二、通信方式
View 和 Model 之间并没有直接的联系，而是通过ViewModel进行交互。
ViewModel 通过双向数据绑定把 View 层和 Model 层连接了起来，而View 和 Model 之间的同步工作完全是自动的，无需人为干涉，因此开发者只需关注业务逻辑，不需要手动操作DOM, 不需要关注数据状态的同步问题，复杂的数据状态维护完全由 MVVM 来统一管理。
MVC和MVVM的区别
- MVC和MVVM的区别并不是VM完全取代了C，ViewModel存在目的在于抽离Controller中展示的业务逻辑，而不是替代Controller，它还是存在，在其它视图操作业务等还是应该放在Controller中实现。也就是说MVVM实现的是业务逻辑组件的重用。
- MVVM通过数据来显示视图层而不是节点操作，VM通过数据双向绑定来实现。
- MVVM解决了MVC中大量的DOM操作导致页面渲染性能降低,加载速度变慢,影响用户体验的问题。
- MVVM的优势在于不用亲自操作DOM, 数据是响应式的, 一旦数据变化, 自动更新界面。