Vue

Vue的logo

简介

Vue是独立开源开发者尤雨溪的作品，目前已经发展到Vue3。

Vue是一个实现了MVVM的前端框架，MVVM是对传统MVC框架的改进，MVC框架中Controller框架承载从Model到视图层的展示逻辑，存在大量数据结构以及字段级别的转换和映射，使得MVC框架中的C（Controller）异常冗余。MVVM增加了ViewModel的概念，ViewModel可以通过模版渲染的方式自动同步数据到视图。

ViewModel的数据修改之后，Vue检测到数据的变化，会通知ViewModel的观察者 Wacher，观察者自动触发重新渲染当前组件（不包括自组件），生成新的虚拟 DOM 树，Vue 框架会遍历并对比新旧 DOM 树中每个节点的差别，最终将这些差别局部修改到真实 DOM 树。

原理

Vue重要的原理包括数据的双向绑定，虚拟DOM树，以及渲染流程。

Vue的响应式处理过程图

数据绑定

数据的双向绑定需要两个能力，数据变化的响应能力，数据变化驱动页面组件更新的能力。

数据变动的响应能力建立在对数据劫持监听的基础上。

• 构造订阅者，View和ViewModel的绑定逻辑由指令解析器Compile进行扫描解释，将这些需要监听的逻辑构造成订阅者。
• 订阅者绑定消息队列，Compile生成订阅者Watch之后，Watch会绑定在消息订阅器Dep上。
• 监测属性变动，通过核心API，Object.DefineProperties实现。
• 属性变化监听，Vue有全局的监听器Observer监听所有属性。如果属性发上变化了，会通知消息订阅模块Dep。
• 属性变动响应，Watch收到Dep的属性变化，执行对应的更新函数，对视图进行更新。

虚拟DOM树

HTML文档的标签构成了一个树状结构，也就是DOM。因为DOM的操作依赖浏览器环境，所以效率较低，而且不具备跨平台的能力。

虚拟DOM（Virtual DOM）是一棵以 JavaScript 对象( VNode 节点)为基础的树，用对象属性来描述节点，通过虚拟DOM可以和实际的DOM之间建立映射关系。

为了减少不必要的DOM操作，虚拟DOM在虚拟节点映射到视图的过程中，将虚拟节点与上一次渲染视图所使用的旧的虚拟节点（oldVnode）进行比较，有差异的节点才需要进行DOM的更新操作。

虚拟DOM具有如下优点：

• 跨平台，由于 Virtual DOM 是以 JavaScript 对象为基础而不依赖真实平台环境，所以它具有了跨平台的能力，比如说浏览器平台、Weex、Node 等。
• 提升渲染性能，在大量、频繁的数据更新下，Virtual DOM能够对视图进行合理、高效的更新。

• 虚拟DOM的JS操作比DOM的操作效率更高，虚拟DOM对比（Diff）在JS层实现，提高了DOM更新的效率。

虚拟DOM树的Diff算法对性能影响较大。

Diff 算法包括几个步骤：

• 数据初始化的时候，用 JavaScript 对象结构表示 虚拟DOM 树的结构
• 当状态发生变更，重新构造一棵新的虚拟DOM树。然后和旧的树进行比较，记录两棵树差异
• 把差异应用到真正的DOM树上，实现视图更新。

使用

Vue推荐使用npm进行安装。

npm install vue@next

Vue提供了脚手架用于初始化项目。

vue init webpack TEST_APPLICATION_NAME

其中webpack是前端打包工具。

脚手架生成的工程目录结构如下：

Vue3的工程目录

其中dist存放打包的结果；

node_modules存放依赖的三方库，三方库一般采用npm install thirdpath的方式进行安装。

public中存放静态文件。

vue项目的启动命令如下：

npm run serve