深入理解Vue.js轻量高效的前端组件化方案

vue.js通过简洁的api提供高效的数据绑定和灵活的组件系统。在前端纷繁复杂的生态中，vue.js有幸受到一定程度的关注，目前在github上已经有5000+的star。本文将从各方面对vue.js做一个深入的介绍。

vue.js 是我在2014年2月开源的一个前端开发库，通过简洁的 api 提供高效的数据绑定和灵活的组件系统。在前端纷繁复杂的生态中，vue.js有幸受到一定程度的关注，目前在 github上已经有5000+的star。本文将从各方面对vue.js做一个深入的介绍。

开发初衷

2013年末，我还在google creative lab工作。当时在项目中使用了一段时间的angular，在感叹数据绑定带来生产力提升的同时，我也感到angular的api设计过于繁琐，使得学习曲线颇为陡峭。出于对angular数据绑定原理的好奇，我开始 “造*”，自己实现了一个非常粗糙的、基于依赖收集的数据绑定库。这就是vue.js的前身。同时在实际开发中，我发现用户界面完全可以用嵌套的组件树来描述，而一个组件恰恰可以对应mvvm中的viewmodel。于是我决定将我的数据绑定实验改进成一个真正的开源项目，其核心思想便是 “数据驱动的组件系统”。

mvvm 数据绑定

mvvm的本质是通过数据绑定链接view和model，让数据的变化自动映射为视图的更新。vue.js在数据绑定的api设计上借鉴了angular的指令机制：用户可以通过具有特殊前缀的html 属性来实现数据绑定，也可以使用常见的花括号模板插值，或是在表单元素上使用双向绑定：

<!-- 指令 -->
<span v-text="msg"></span>
<!-- 插值 -->
<span>{{msg}}</span>
<!-- 双向绑定 -->
<input v-model="msg"> 

插值本质上也是指令，只是为了方便模板的书写。在模板的编译过程中，vue.js会为每一处需要动态更新的dom节点创建一个指令对象。每当一个指令对象观测的数据变化时，它便会对所绑定的目标节点执行相应的dom操作。基于指令的数据绑定使得具体的dom操作都被合理地封装在指令定义中，业务代码只需要涉及模板和对数据状态的操作即可，这使得应用的开发效率和可维护性都大大提升。

与angular不同的是，vue.js的api里并没有繁杂的module、controller、scope、factory、service等概念，一切都是以“viewmodel 实例”为基本单位：

<!-- 模板 -->
<div id="app">
 {{msg}}
</div>
// 原生对象即数据
var data = {
 msg: 'hello!'
}
// 创建一个 viewmodel 实例
var vm = new vue({
 // 选择目标元素
 el: '#app',
 // 提供初始数据
 data: data
})

渲染结果：

<div id="app">
 hello!
</div> 

在渲染的同时，vue.js也已经完成了数据的动态绑定：此时如果改动data.msg的值，dom将自动更新。是不是非常简单易懂呢？除此之外，vue.js对自定义指令、过滤器的api也做了大幅的简化，如果你有angular的开发经验，上手会非常迅速。

数据观测的实现

vue.js的数据观测实现原理和angular有着本质的不同。了解angular的读者可能知道，angular的数据观测采用的是脏检查（dirty checking）机制。每一个指令都会有一个对应的用来观测数据的对象，叫做watcher；一个作用域中会有很多个watcher。每当界面需要更新时，angular会遍历当前作用域里的所有watcher，对它们一一求值，然后和之前保存的旧值进行比较。如果求值的结果变化了，就触发对应的更新，这个过程叫做digest cycle。脏检查有两个问题：
1.任何数据变动都意味着当前作用域的每一个watcher需要被重新求值，因此当watcher的数量庞大时，应用的性能就不可避免地受到影响，并且很难优化。
2.当数据变动时，框架并不能主动侦测到变化的发生，需要手动触发digest cycle才能触发相应的dom 更新。angular通过在dom事件处理函数中自动触发digest cycle部分规避了这个问题，但还是有很多情况需要用户手动进行触发。

vue.js采用的则是基于依赖收集的观测机制。从原理上来说，和老牌mvvm框架knockout是一样的。依赖收集的基本原理是：
1.将原生的数据改造成 “可观察对象”。一个可观察对象可以被取值，也可以被赋值。
2.在watcher的求值过程中，每一个被取值的可观察对象都会将当前的watcher注册为自己的一个订阅者，并成为当前watcher的一个依赖。
3.当一个被依赖的可观察对象被赋值时，它会通知所有订阅自己的watcher重新求值，并触发相应的更新。
4.依赖收集的优点在于可以精确、主动地追踪数据的变化，不存在上述提到的脏检查的两个问题。但传统的依赖收集实现，比如knockout，通常需要包裹原生数据来制造可观察对象，在取值和赋值时需要采用函数调用的形式，在进行数据操作时写法繁琐，不够直观；同时，对复杂嵌套结构的对象支持也不理想。

vue.js利用了es5的object.defineproperty方法，直接将原生数据对象的属性改造为getter和setter，在这两个函数内部实现依赖的收集和触发，而且完美支持嵌套的对象结构。对于数组，则通过包裹数组的可变方法（比如push）来监听数组的变化。这使得操作vue.js的数据和操作原生对象几乎没有差别[注:在添加/删除属性，或是修改数组特定位置元素时，需要调用特定的函数，如obj.$add(key, value)才能触发更新。这是受es5的语言特性所限。]，数据操作的逻辑更为清晰流畅，和第三方数据同步方案的整合也更为方便。

组件系统

在大型的应用中，为了分工、复用和可维护性，我们不可避免地需要将应用抽象为多个相对独立的模块。在较为传统的开发模式中，我们只有在考虑复用时才会将某一部分做成组件；但实际上，应用类 ui 完全可以看作是全部由组件树构成的：

因此，在vue.js的设计中将组件作为一个核心概念。可以说，每一个vue.js应用都是围绕着组件来开发的。

注册一个vue.js组件十分简单：

vue.component('my-component', {
 // 模板
 template: '<div>{{msg}} {{privatemsg}}</div>',
 // 接受参数
 props: {
  msg: string<br> 

 },
 // 私有数据，需要在函数中返回以避免多个实例共享一个对象
 data: function () {
  return {
   privatemsg: 'component!'
  }
 }
})

注册之后即可在父组件模板中以自定义元素的形式调用一个子组件：

<my-component msg="hello"></my-component>

渲染结果：

<div>hello component!</div>

vue.js的组件可以理解为预先定义好了行为的viewmodel类。一个组件可以预定义很多选项，但最核心的是以下几个：

•模板（template）：模板声明了数据和最终展现给用户的dom之间的映射关系。
•初始数据（data）：一个组件的初始数据状态。对于可复用的组件来说，这通常是私有的状态。
•接受的外部参数(props)：组件之间通过参数来进行数据的传递和共享。参数默认是单向绑定（由上至下），但也可以显式地声明为双向绑定。
•方法（methods）：对数据的改动操作一般都在组件的方法内进行。可以通过v-on指令将用户输入事件和组件方法进行绑定。
•生命周期钩子函数（lifecycle hooks）：一个组件会触发多个生命周期钩子函数，比如created，attached，destroyed等等。在这些钩子函数中，我们可以封装一些自定义的逻辑。和传统的mvc相比，可以理解为 controller的逻辑被分散到了这些钩子函数中。
•私有资源（assets）：vue.js当中将用户自定义的指令、过滤器、组件等统称为资源。由于全局注册资源容易导致命名冲突，一个组件可以声明自己的私有资源。私有资源只有该组件和它的子组件可以调用。

除此之外，同一颗组件树之内的组件之间还可以通过内建的事件api来进行通信。vue.js提供了完善的定义、复用和嵌套组件的api，让开发者可以像搭积木一样用组件拼出整个应用的界面。这个思路的可行性在facebook开源的react当中也得到了印证。

基于构建工具的单文件组件格式

vue.js的核心库只提供基本的api，本身在如何组织应用的文件结构上并不做太多约束。但在构建大型应用时，推荐使用webpack+vue-loader这个组合以使针对组件的开发更高效。

webpack是由tobias koppers开发的一个开源前端模块构建工具。它的基本功能是将以模块格式书写的多个javascript文件打包成一个文件，同时支持commonjs和amd格式。但让它与众不同的是，它提供了强大的loader api来定义对不同文件格式的预处理逻辑，从而让我们可以将css、模板，甚至是自定义的文件格式当做javascript模块来使用。webpack 基于loader还可以实现大量高级功能，比如自动分块打包并按需加载、对图片资源引用的自动定位、根据图片大小决定是否用base64内联、开发时的模块热替换等等，可以说是目前前端构建领域最有竞争力的解决方案之一。

我在webpack的loader api基础上开发了vue-loader插件，从而让我们可以用这样的单文件格式 (*.vue) 来书写vue组件：

<style>
.my-component h2 {
 color: red;
}
</style>
<template>
 <div class="my-component">
 <h2>hello from {{msg}}</h2>
 <other-component></other-component>
 </div>
</template>
<script>
// 遵循 commonjs 模块格式
var othercomponent = require('./other-component')
// 导出组件定义
module.exports = {
 data: function () {
 return {
  msg: 'vue-loader'
 }
 },
 components: {
 'other-component': othercomponent
 }
}
</script>

 同时，还可以在*.vue文件中使用其他预处理器，只需要安装对应的webpack loader即可：

<style lang="stylus">
.my-component h2
 color red
</style>
<template lang="jade">
div.my-component
 h2 hello from {{msg}}
</template>
<script lang="babel">
// 利用 babel 编译 es2015
export default {
 data () {
 return {
  msg: 'hello from babel!'
 }
 }
}
</script>

这样的组件格式，把一个组件的模板、样式、逻辑三要素整合在同一个文件中，即方便开发，也方便复用和维护。另外，vue.js本身支持对组件的异步加载，配合webpack的分块打包功能，可以极其轻松地实现组件的异步按需加载。

其他特性

vue.js还有几个值得一提的特性：

1.异步批量dom更新：当大量数据变动时，所有受到影响的watcher会被推送到一个队列中，并且每个watcher只会推进队列一次。这个队列会在进程的下一个 “tick” 异步执行。这个机制可以避免同一个数据多次变动产生的多余dom操作，也可以保证所有的dom写操作在一起执行，避免dom读写切换可能导致的layout。
2.动画系统：vue.js提供了简单却强大的动画系统，当一个元素的可见性变化时，用户不仅可以很简单地定义对应的css transition或animation效果，还可以利用丰富的javascript钩子函数进行更底层的动画处理。
3.可扩展性：除了自定义指令、过滤器和组件，vue.js还提供了灵活的mixin机制，让用户可以在多个组件中复用共同的特性。

与web components的异同

对web components有了解的读者看到这里可能会产生疑问：vue.js的组件和web components的区别在哪里呢？这里简要地做一下分析。

web components是一套底层规范，本身并不带有数据绑定、动画系统等上层功能，因此更合适的比较对象可能是polymer。polymer在api和功能上和vue.js比较相似，但它对web components的硬性依赖使得它在浏览器支持方面有一定的问题——在不支持web components规范的浏览器中，需要加载庞大的polyfill，不仅在性能上会有影响，并且有些功能，比如shadowdom，polyfill并没有办法完美支持。同时，web components规范本身尚未定稿，一些具体设计上仍存在不小的分歧。相比之下，vue.js在支持的浏览器中（ie9+）没有任何依赖。

除此之外，在支持web components的环境中，我们也可以很简单地利用web components底层api将一个vue.js组件封装在一个真正的自定义元素中，从而实现vue.js组件和其他框架的无缝整合。

总结

在发布之初，vue.js原本是着眼于轻量的嵌入式使用场景。在今天，vue.js也依然适用于这样的场景。由于其轻量（22kb min+gzip）、高性能的特点，对于移动场景也有很好的契合度。更重要的是，设计完备的组件系统和配套的构建工具、插件，使得vue.js在保留了其简洁api的同时，也已经完全有能力担当起复杂的大型应用的开发。

从诞生起到现在的一年半历程中，vue.js经历了一次彻底的重构，多次api的设计改进，目前已经趋于稳定，测试覆盖率长期保持在100%，github bug数量长期保持在个位数，并在世界各地都已经有公司/项目将vue.js应用到生产环境中。在2015年晚些时候，vue.js将发布1.0版本，敬请期待。

【参考链接】

vue.js官方网站：

vue.js github仓库：

webpack官方网站:

vue-loader单页组件示例：

总结

以上所述是小编给大家介绍的vue.js轻量高效的前端组件化方案，希望对大家有所帮助