vue-cli学习笔记 vue-cli学习笔记 MVC、MVP、MVVM
程序员文章站
2022-04-11 12:01:55
Vue.js介绍 基本概念 1. Vue.js 是目前最火的一个前端框架 React是最流行的一个前端框架 React除了开发网站,还可以开发手机原生App, Vue语法也是可以用于进行手机App开发的,需要借助于Weex 3. Vue.js 是前端的主流框架之一,和Angular.js、React ......
vue.js介绍
基本概念
- vue.js 是目前最火的一个前端框架
react是最流行的一个前端框架 react除了开发网站,还可以开发手机原生app, vue语法也是可以用于进行手机app开发的,需要借助于weex- vue.js 是前端的主流框架之一,和angular.js、react.js 一起,并称为前端三大主流框架
- vue.js 是一套构建用户界面的框架,只关注视图层,它不仅易于上手,还便于与第三方库或已有项目整合 vue有丰富的配套三方类库,可以整合起来做大型项目的开发
介绍
- 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更适合视图更多的前端项目进行工程化开发