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中可把根实例对应的

容器当成视图,或者把组件中的template属性当做视图,或者把组件所对应的视图模板

你可能感兴趣的:(MVC与MVVM)