【Vue.js】Vue.js介绍及MVVM模式

傷城~ 2022-12-08 15:46 200阅读 0赞

## 1. Vue.js介绍 ##

#### 基本概念 ####

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

#### 官网 ####

*  英文网站：https://vuejs.org/
 *  中文网站：https://cn.vuejs.org/

#### 特点 ####

*  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 请求

## 2. MVC、MVP、MVVM ##

#### MVC ####

*  M是指业务模型，V是指用户界面，C则是控制器
 *  M即Model模型，数据层，负责数据的处理和获取的数据接口层
 *  V即View视图，视图层，是指用户看到并与之交互的界面。比如由html元素组成的网页界面，或者软件的客户端界面
 *  C即Controller控制器，控制器层，它是 Model 和 View 之间的胶水或者说是中间人，当用户对 View 有操作时它负责去修改相应 Model，当 Model 的值发生变化时它负责去更新对应 View
 *  理论上，所有通信都是单向的。M和View应该是完全隔离的，由C作为中间人来负责二者的交互。同时三者是完全独立分开的，这样可以保证M和V的可测试性和复用性
 *  由于C都是为特别的应用场景下的M和V做中介者，所以很难复用；而且V和M有时候也会存在耦合，View会依赖于Model
 *  优点：耦合性低、重用性高、拓展性好、可维护性高
 *  MVC并不适用于前端：（1）前端的View其实已经具备了独立处理用户事件的能力，当每个事件都流经Controller时，这层会变得十分臃肿。（2）MVC中View和Controller一般是一一对应的，捆绑起来表示一个组件，视图与控制器间的过于紧密的连接让Controller和View都变得无法复用

#### 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抽离出来做成组件，它只需要提供一系列接口提供给上层操作
 *  存在问题：（1）Presenter作为View和Model之间的“中间人”，除了基本的业务逻辑外，还有大量代码需要对从View到Model和从Model到View的数据进行“手动同步”，这样Presenter显得很重，维护起来会比较困难。（2）而且由于没有数据绑定，如果Presenter对视图渲染的需求增多，一旦视图需求发生改变，Presenter也需要改动

#### 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更适合视图更多的前端项目进行工程化开发

## 3. 安装DevTool ##

*  vue-devtools是一款基于chrome浏览器的插件，用于调试vue应用，能够极大地提高我们的调试效率
 *  手动安装：

1.  找到vue-devtools的github项目，并将其clone到本地：

>> git clone https://github.com/vuejs/vue-devtools.git

1.  安装项目所需要的npm包：

>> npm install

1.  编译项目文件：

>> npm run build

1.  添加至chrome浏览器：  
    浏览器输入地址“chrome://extensions/”进入扩展程序页面，点击“加载已解压的扩展程序…”按钮，选择vue-devtools>shells下的chrome文件夹

## 4. 安装vue-cli ##

#### vue-cli是什么？ ####

*  vue-cli是vue官方提供的脚手架工具，默认搭建好了一个项目的基本架子，我们在其基础上进行相应修改即可
 *  GitHub下载地址：https://github.com/vuejs/vue-cli
 *  全局安装vue-cli：

>> npm install -g @vue/cli

*  查看版本/是否安装成功：

>> vue -V

#### 初始化Vue项目 ####

>> vue create lk-demo

*  按键盘上下键可以选择默认（default）还是手动（Manually），如果选择default，一路回车执行下去就行了， 继续手动一下
 *  选择配置，空格键是选中与取消，A键是全选，选项说明：

1.  TypeScript：支持使用 TypeScript 书写源码
2.  Progressive Web App (PWA) Support：PWA 支持。PWA不是API或技术，但它是一种Web开发方法，它使用已有的工具和技术组合来创建有针对性的理想用户体验，用于渐进式网络应用程序
3.  Router：支持 vue-router
4.  Vuex：支持 vuex
5.  CSS Pre-processors：支持 CSS 预处理器
6.  Linter / Formatter：支持代码风格检查和格式化
7.  Unit Testing：支持单元测试
8.  E2E Testing：支持 E2E 测试

*  选择将这些配置文件写入到什么地方（In dedicated config files，专用配置文件中）
 *  是否保存这份预设配置？（n）选是的话，下次创建一个vue项目，可以直接使用这个预设文件，而无需再进行配置
 *  运行项目
 *  阻止启动生产消息：

Vue.config.productionTip = false

#### 理解Vue的 MVVM ####

*  双向绑定仅仅是一种高级语法糖
 *  数据流传递还是单向的