vue-cli学习笔记 MVC、MVP、MVVM

vue-cli学习笔记

Vue.js介绍

基本概念

1. Vue.js 是目前最火的一个前端框架 React是最流行的一个前端框架 React除了开发网站，还可以开发手机原生App， Vue语法也是可以用于进行手机App开发的，需要借助于Weex
2. Vue.js 是前端的主流框架之一，和Angular.js、React.js 一起，并称为前端三大主流框架
3. Vue.js 是一套构建用户界面的框架，只关注视图层，它不仅易于上手，还便于与第三方库或已有项目整合 Vue有丰富的配套三方类库，可以整合起来做大型项目的开发

官网 English Site

中文网站

介绍

1. Vue.js是一个渐进式框架，动态构建用户界面
2. 作者：尤雨溪 华裔 前Google 工程师

特点

1. Vue.js 是基于MVVM架构
2. 编码简洁, 体积小, 运行效率高, 适合移动/PC 端开发
3. 它本身只关注 UI, 可以轻松引入 vue 插件或其它第三库开发项目
4. 参考了React的组件化和虚拟DOM技术，借鉴了angular的模板和数据绑定技术

Vue的生态

1. Vue.js 关注UI层面
2. 工具 DevTools vue-cli: vue 脚手架 vue-loader
3. 核心插件 vue-router: 路由,vuex: 状态管理,vue服务器端渲染,vue-resource(axios): ajax 请求

MVC、MVP、MVVM

1. MVC

概念 1. M是指业务模型，V是指用户界面，C则是控制器

> 1. M即model模型,  数据层，负责数据的处理和获取的数据接口层
> 2. V即View视图,  视图层, 是指用户看到并与之交互的界面。比如由html元素3. 组成的网页界面，或者软件的客户端界面
> 4. C即controller控制器, 控制器层，它是 Model 和 View 之间的胶水或者说是中间人

1. MVC各个部分之间通信的方式

1. Models： 数据层，负责数据的处理和获取的数据接口层
2. Views： 展示层(GUI)，对于web来说所有以.html开头的文件基本都属于这层
3. Controller： 控制器层，它是 Model 和 View 之间的胶水或者说是中间人 当用户对 View 有操作时它负责去修改相应 Model 当 Model 的值发生变化时它负责去更新对应 View
4. 理论上：所有通信都是单向的 M和View应该是完全隔离的，由C作为中间人来负责二者的交互 同时三者是完全独立分开的，这样可以保证M和V的可测试性和复用性 由于C都是为特别的应用场景下的M和V做中介者，所以很难复用；而且V和M有时候也会存在耦合 V和M很多时候会存在耦合，view会依赖于Model

好处

1. 耦合性低
2. 重用性高
3. 拓展性好
4. 可维护性高
5. MVC并不适用于前端

1. 前端的View其实已经具备了独立处理用户事件的能力，当每个事件都流经Controller时，这层会变得十分臃肿
2. MVC中View和Controller一般是一一对应的，捆绑起来表示一个组件，视图与控制器间的过于紧密的连接让Controller和View都变得无法复用

2. MVP

概念

1. MVP（Model-View-Presenter）是MVC模式的改良，由IBM的子公司Taligent提出
2. 和MVC的相同之处在于：Controller/Presenter负责业务逻辑，Model管理数据，View负责显示

特点

1. 在MVC里，View是可以直接访问Model的，但MVP中的View并不能直接使用Model，而是通过为Presenter提供接口，让Presenter去更新Model，再通过观察者模式更新View
2. 与MVC相比，MVP模式通过解耦View和Model，完全分离视图和模型，使职责划分更加清晰
3. View不依赖Model，可以将View抽离出来做成组件，它只需要提供一系列接口提供给上层操作
4. 存在问题

1. Presenter作为View和Model之间的“中间人”，除了基本的业务逻辑外，还有大量代码需要对从View到Model和从Model到View的数据进行“手动同步”，这样Presenter显得很重，维护起来会比较困难
2. 而且由于没有数据绑定，如果Presenter对视图渲染的需求增多，一旦视图需求发生改变，Presenter也需要改动

3. MVVM

概念

1. MVVM（Model-View-ViewModel）最早由微软提出
2. ViewModel指 “Model of View”——视图的模型

特点

1. MVVM把View和Model的同步逻辑自动化了
2. 以前Presenter负责的View和Model同步不再手动地进行操作，而是交给框架所提供的数据绑定功能进行负责，只需要告诉它View显示的数据对应的是Model哪一部分即可
3. 通过ViewModel进行数据绑定，当Model发生变化，ViewModel就会自动更新；ViewModel变化，Model也会更新

总结

1. 整体上看，MVVM比MVC/MVP精简了很多，不仅仅简化了业务与界面的依赖，还解决了数据频繁更新的问题 jQuery操作DOM就很频繁
2. 在MVVM中，View不知道Model的存在，ViewModel和Model也察觉不到View，这种低耦合模式可以使开发过程更加容易，提高应用的可重用性
3. MVVM更适合视图更多的前端项目进行工程化开发