前端简单理解MVC、MVP、MVVM框架

一切从前后端分离开始

理解MVVM框架要先从前后端分离说起，传统前端先写一个静态页面，写好后，让后端去套模板，前端不涉及业务逻辑，只是静态页面的生产者，这种方式前端无法独立调试代码，很难关注用户体验，无论前端还是后端对页面的维护都非常困难。

前后端分离是指前端专注于客户端，复杂渲染页面和显示数据；后端专注做数据的操作；前后端通过接口交互，交互方式是前端发送异步请求后端给，后端接受请求返回数据，前端接受数据并使用数据，这种情况下前端和后端都涉及业务逻辑，前端的工作变的非常重要，前端这个名词才由此产生。

前后端分离后，前端和后端变成了两个相互独立的工程，通过API关联，前端工程的架构设计开始像后端一样重要起来了，前端的框架要解决的问题是分离数据和视图，并相互通信的问题。

不管是MVC、MVP、MVVM都是把应用程序分成3层，区别在于每一层要完成的任务的薄厚，以及相互通信的方式。

个人觉得在前端MVC、MVP、MVVM这些设计模式基本上都是模棱两可的，这里简单的理解一下。

MVC 框架，

MVC 即 Model-View-Controller 的缩写，就是 模型—视图—控制器，是一种软件设计模式，用于应用程序的分层开发。

Model（模型）

应用程序的最下层，模型是程序需要操作的数据

View（视图）

应用程序的最上层，给用户的操作界面，是显示数据的地方。

Controller（控制器）

中间业务逻辑层，控制器接受用户的输入，并调用模型和视图去完成用户的需求。
一旦用户与应用程序发生交互,控制器的事件处理器即被触发,控制器从模型中请求数据，并将其交给视图,视图将数据呈现给用户。
　
为了完成这样一个逻辑，MVC 框架的通信方式比较多样，如下图是其中一种，不同的框架可能会设计不同的通信方式。

MVC设计模式起源于后端的分层开发概念，各种语言都有自己完善的MVC框架，如thinkPHP,已经帮我们定义好了model,controller基类，用户只要继承过来就好了，而视图就是模板，模板有指令和表达式用来订阅数据，3层之间很清晰。

在前端MVC设计模式，更多的是一种思路，只要前端作为一个独立的项目，并且贯彻执行了这个思路，就可以认为是一个MVC框架，如:Backbone.js，Angular.js。

MVP

MVP 模式是MVC 的改进版，将 Controller 改名为 Presenter（协调器，主持者），与MVC的区别是改变了通信方向。

View、Model与 Presenter 都双向通信，而View 与 Model 不通信，都通过 Presenter 传递，View薄而Presenter厚。

MVVM

MVVM 也是MVC 的改进版，是Model-View-ViewModel的简写。

• Model （模型）：可以在Model中定义数据修改和操作的业务逻辑
• View （视图）：代表用户界面 前端可以理解为HTML+CSS
• ViewModel （视图模型） ：是同步View 和 Model的对象

与MVP模式类似，View 和 Model 之间并没有直接的联系，通过ViewModel进行交互。
区别在于MVVM追求的是View和Model的自动同步（响应式），意思是当数据改变时，开发者不需要自己手动操作视图来改变视图的显示，而是通过ViewModel把 View 层和 Model 层连接了起来，负责View 和 Model 之间的同步工作，开发者只需关注业务逻辑，不需要手动进行繁琐的DOM操作。

MVVM框架是将数据和视图分离，通过视图模型作为桥梁来同步数据和视图。

Vue是典型的MVVM框架,目前前端工程主流的框架angular.js,react到底是什么设计模式，还存在这不少争议。