CDRD TALK | Vue前端框架实战

Vue发展简介

Vue是一套用于构建用户界面的渐进式框架，与其它大型框架不同的是，Vue 被前Google员工尤雨溪设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

从2014年11月推出了Vue的第一个正式版本0.11，经2015年10月的1.0版本，到2016年10月的2.0版本，Vue的底层已经经历过一遍重写，引入了virtual DOM，使框架性能有了大幅提升。

Vue在GitHub上的star数量目前已经81000+，在JavaScript框架中排名第2，所有语言库中排名第6，由此可见Vue在开源社区受到了极大的关注和欢迎。

Vue具有一套生态系统如图所示：

• 其核心库Vue.js主要关注视图层，非常易于上手，开发者只要有Javascript基础就可以开始开发。

• vue-router专注于页面路由，主要用于SPA开发。

• vuex用于统一状态管理。

• vue-loader在webpack中使用，用于构建单文件的Vue组件。

• vue-resource主要功能是实现web请求。

每一层都是单独的项目和单独的js文件引用，这也是将Vue设定为渐进式框架的原因。在使用Vue时，可以根据项目需要，采用不同的库。同时Vue并不是一个具有排它性质的框架，可以非常方便整合到现有项目。

笔者之前的一个项目，前端技术栈是bootstrap+jQuery, 后来发现前端交互比较复杂，用jQuery开发效率比较低，虽然在项目后期才引入Vue.js，但之前的前端代码并不需要做任何修改。

目前基于Vue的开源项目也十分繁多，本文列举了如下一些项目，有兴趣的读者可以去官方详细了解。

Vue不仅在开源社区非常受欢迎，而且在商业生产环境，业界也有很多公司在使用Vue，这里列举了一些具有代表性的公司。

Vue核心概念介绍

双向绑定简就是视图层和数据层无论哪一方发生变化，另外一方也随着相应变化。如图，使用v-model指令将content变量和input的value属性进行了双向绑定，input的value初始值就是content，当我们修改输入框的内容，可以看到content的值也发生了变量，这就是双向绑定。

Vue.js 2.0的模板渲染与Vue.js 1.0 完全不同，1.0中采用DocumentFragmen，而2.0中借鉴了React的Virtual DOM。基于 Virtual DOM的2.0 不仅支持服务端渲染(SSR)，也支持 JSX 语法。

Vue.js的模板渲染主要步骤如下:

• $mount函数：主要是获取 template，然后进入 compileToFunctions 函数。

• 将 template 编译成 render 函数：首先parse生成AST(抽象语法树)，然后对AST对象进行优化，找出AST对象中所有最大静态子树（可以简单理解为不包含参数data属性的dom节点，每次data数据改变导致页面重新渲染的时候，最大静态子树不需要重新计算生成），最后生成render函数的字符串形式。

• render函数调用后会生成vnode对象，也就是大家熟知的虚拟dom树，调用update方法就能根据vonde更新真实的浏览器dom。

这里介绍两个工具来帮助理解模板渲染过程：

• Vue的抽象语法树查看工具

• render函数生成工具