理解MVVM框架要先从前后端分离说起，传统前端先写一个静态页面，写好后，让后端去套模板，前端不涉及业务逻辑，只是静态页面的生产者，这种方式前端无法独立调试代码，很难关注用户体验，无论前端还是后端对页面的维护都非常困难。
前后端分离是指前端专注于客户端，复杂渲染页面和显示数据；后端专注做数据的操作；前后端通过接口交互，交互方式是前端发送异步请求后端给，后端接受请求返回数据，前端接受数据并使用数据，这种情况下前端和后端都涉及业务逻辑，前端的工作变的非常重要，前端这个名词才由此产生。
前后端分离后，前端和后端变成了两个相互独立的工程，通过API关联，前端工程的架构设计开始像后端一样重要起来了，前端的框架要解决的问题是分离数据和视图，并相互通信的问题。
不管是MVC、MVP、MVVM都是把应用程序分成3层，区别在于每一层要完成的任务的薄厚，以及相互通信的方式，现在前端工程主流的软件设计模式师MVVM框架。
MVC 即 Model-View-Controller 的缩写，就是 模型—视图—控制器，是一种软件设计模式，用于应用程序的分层开发。 由三部分组成的： Model（模型）：应用程序的最下层，模型是程序需要操作的数据 View（视图）：应用程序的最上层，给用户的操作界面，是显示数据的地方。 Controller（控制器）：中间业务逻辑层，控制器接受用户的输入，并调用模型和视图去完成用户的需求。
用户和应用程序交互控制器的事件处理器被触发控制器从模型中请求数据，并将其交给视图视图将数据呈现给用户 为了完成这样一个逻辑，MVC 框架的通信方式比较多样，如下图是其中一种，不同的框架可能会设计不同的通信方式。 MVC设计模式起源于后端的分层开发概念，各种语言都有自己完善的MVC框架，如thinkPHP,已经帮我们定义好了model,controller基类，用户只要继承过来就好了，而视图就是模板，模板有指令和表达式用来订阅数据，3层之间很清晰。在前端MVC设计模式，更多的是一种思路，只要前端作为一个独立的项目，并且贯彻执行了这个思路，就可以认为是一个MVC框架，如:Backbone.js，Angular.js
MVP 模式是MVC 的改进版，将 Controller 改名为 Presenter（协调器，主持者），与MVC的区别是改变了通信方向。 View、Model与 Presenter 都双向通信，而View 与 Model 不通信，都通过 Presenter 传递，View薄而Presenter厚。
MVVM 也是MVC 的改进版，是Model-View-ViewModel的简写。
Model （模型）：可以在Model中定义数据修改和操作的业务逻辑View （视图）：代表UI 组件，可以理解为DOMViewModel （视图模型） ：是同步View 和 Model的对象与MVP模式类似，View 和 Model 之间并没有直接的联系，通过ViewModel进行交互。 区别在于MVVM追求的是View和Model的自动同步，简单的说就是当Model的属性改变时，用户不再需要自己手动操作Dom元素，来改变View的显示，而是通过ViewModel通过数据绑定把 View 层和 Model 层连接了起来。
即：ViewModel通过数据绑定把 View 层和 Model 层连接了起来，负责View 和 Model 之间的同步工作，开发者只需关注业务逻辑，不需要手动进行繁琐的DOM操作。
典型的MVVM框架,如Vue.js，angular.js,react, 这也是目前前端工程主流的3大框架。
