vue-cli学习笔记 vue-cli学习笔记 MVC、MVP、MVV…

2020-04-25 16:08:10来源：博客园阅读 ()

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

Vue.js介绍

基本概念

Vue.js 是目前最火的一个前端框架
React是最流行的一个前端框架 React除了开发网站，还可以开发手机原生App， Vue语法也是可以用于进行手机App开发的，需要借助于Weex

Vue.js 是前端的主流框架之一，和Angular.js、React.js 一起，并称为前端三大主流框架

Vue.js 是一套构建用户界面的框架，只关注视图层，它不仅易于上手，还便于与第三方库或已有项目整合 Vue有丰富的配套三方类库，可以整合起来做大型项目的开发

官网
English Site

中文网站

介绍

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

特点

Vue.js 是基于MVVM架构

编码简洁, 体积小, 运行效率高, 适合移动/PC 端开发

它本身只关注 UI, 可以轻松引入 vue 插件或其它第三库开发项目

参考了React的组件化和虚拟DOM技术，借鉴了angular的模板和数据绑定技术

Vue的生态

Vue.js 关注UI层面
工具 DevTools vue-cli: vue 脚手架 vue-loader
核心插件 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 之间的胶水或者说是中间人

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

Models：?数据层，负责数据的处理和获取的数据接口层

Views：展示层(GUI)，对于web来说所有以.html开头的文件基本都属于这层

Controller：控制器层，它是 Model 和 View 之间的胶水或者说是中间人当用户对 View 有操作时它负责去修改相应 Model 当 Model 的值发生变化时它负责去更新对应 View

理论上：所有通信都是单向的
M和View应该是完全隔离的，由C作为中间人来负责二者的交互
同时三者是完全独立分开的，这样可以保证M和V的可测试性和复用性
由于C都是为特别的应用场景下的M和V做中介者，所以很难复用；而且V和M有时候也会存在耦合
V和M很多时候会存在耦合，view会依赖于Model

好处

耦合性低

重用性高

拓展性好

可维护性高

MVC并不适用于前端

前端的View其实已经具备了独立处理用户事件的能力，当每个事件都流经Controller时，这层会变得十分臃肿

MVC中View和Controller一般是一一对应的，捆绑起来表示一个组件，视图与控制器间的过于紧密的连接让Controller和View都变得无法复用

2. MVP

概念

MVP（Model-View-Presenter）是MVC模式的改良，由IBM的子公司Taligent提出

和MVC的相同之处在于：Controller/Presenter负责业务逻辑，Model管理数据，View负责显示

特点

在MVC里，View是可以直接访问Model的，但MVP中的View并不能直接使用Model，而是通过为Presenter提供接口，让Presenter去更新Model，再通过观察者模式更新View

与MVC相比，MVP模式通过解耦View和Model，完全分离视图和模型，使职责划分更加清晰

View不依赖Model，可以将View抽离出来做成组件，它只需要提供一系列接口提供给上层操作

存在问题

Presenter作为View和Model之间的“中间人”，除了基本的业务逻辑外，还有大量代码需要对从View到Model和从Model到View的数据进行“手动同步”，这样Presenter显得很重，维护起来会比较困难

而且由于没有数据绑定，如果Presenter对视图渲染的需求增多，一旦视图需求发生改变，Presenter也需要改动

3. MVVM

概念

MVVM（Model-View-ViewModel）最早由微软提出

ViewModel指 "Model of View"——视图的模型

特点

MVVM把View和Model的同步逻辑自动化了

以前Presenter负责的View和Model同步不再手动地进行操作，而是交给框架所提供的数据绑定功能进行负责，只需要告诉它View显示的数据对应的是Model哪一部分即可

通过ViewModel进行数据绑定，当Model发生变化，ViewModel就会自动更新；ViewModel变化，Model也会更新

总结

整体上看，MVVM比MVC/MVP精简了很多，不仅仅简化了业务与界面的依赖，还解决了数据频繁更新的问题 jQuery操作DOM就很频繁

在MVVM中，View不知道Model的存在，ViewModel和Model也察觉不到View，这种低耦合模式可以使开发过程更加容易，提高应用的可重用性

MVVM更适合视图更多的前端项目进行工程化开发

原文链接:https://www.cnblogs.com/joker-dj/p/12772368.html
如有疑问请与原作者联系

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有