MVC与MVVM

MVVM模式和MVC模式一样，主要目的是分离视图（View）和模型（Model）

MVVM？

M=>Model, V=>View, VM=>ViewModel
（Model View ViewModel） 模型，视图，视图模型
是对MVC的改进
（控制器：主要负责和视图相关的业务逻辑，比如：用户的输入，给用户显示数据，控制DOM）

MVVM（Model-View-ViewModel）框架的由来便是MVP（Model-View-Presenter）模式与WPF结合的应用方式时发展演变过来的一种新型架构框架

---

用JavaScript在浏览器中操作HTML，经历了若干发展阶段：

第一阶段，直接用JavaScript操作DOM节点，使用浏览器提供的原生API：

var dom = document.getElementById('name');
dom.innerHTML = 'Homer';
dom.style.color = 'red';

第二阶段，由于原生API不好用，还要考虑浏览器兼容性，jQuery横空出世，以简洁的API迅速俘获了前端开发者的芳心：

$('#name').text('Homer').css('color', 'red');

第三阶段，MVC模式，需要服务器端配合，JavaScript可以在前端修改服务器渲染后的数据。

现在，随着前端页面越来越复杂，用户对于交互性要求也越来越高，想要写出Gmail这样的页面，仅仅用jQuery是远远不够的。MVVM模型应运而生。

MVVM最早由微软提出来，它借鉴了桌面应用程序的MVC思想，
在前端页面中，把Model用纯JavaScript对象表示，View负责显示，两者做到了最大限度的分离。

把Model和View关联起来的就是ViewModel。ViewModel负责把Model的数据同步到View显示出来，还负责把View的修改同步回Model。

MVVM的设计思想：关注Model的变化，让MVVM框架去自动更新DOM的状态，从而把开发者从操作DOM的繁琐步骤中解脱出来！

廖雪峰介绍mvvm的官网

---

MVC?

(model view Controller) 模型， 视图，控制器
模型：数据模型，主要负责提供数据的，在vue中可把data属性当成模型或者生命周期钩子提供ajax技术从接口层获得数据。
视图：数据展示的页面或容器，在vue中可把根实例对应的<div id="app">容器当成视图，或者把组件中的template属性当做视图，或者把组件所对应的视图模板<script id="tpl" type="text/html">当成视图
控制器：是把模型和视图链接起来的“桥梁”，在vue可把el属性当成控制器