Vue.js 是一个用来开发 web 界面的前端库。它也有配套的周边工具。如果把这些东西都算在一起,那么你也可以叫它一个『前端框架』。但我个人更倾向于把它看做是一套可以灵活选择的工具组合。如果你到现在都还没听说过 Vue.js,你心里可能在想:前端的幺蛾子就是多,怎么又来一个框架?其实 Vue.js 已经开发了两年多了。第一次公开发布则是在 2014 年 2 月。这两年间它一直在不断进化,今天也已经有许多人在生产环境中使用它

所以,Vue.js 到底提供了什么?和其他框架又有何不同?在已经有了 Angular、React、Ember 的情况下,为什么要关注 Vue ?这篇文章会简要地介绍 Vue 的特点,希望读者看完以后能自行判断。

响应式编程

都说保持状态和视图的同步是困难的。真的是这样么?

让我们从最基本的任务说起:展示数据。假设我们有这样一个对象:

var object = {
  message: 'Hello World!'
}

以及这样的模板:

<div id="example">
  {{ message }}
</div>

我们可以用 Vue 这样将两者绑定:

new Vue({
  el: '#example',
  data: object
})

看上去和渲染模板没什么两样。那么当我们改动了 object 时,如何更新视图呢?答案是... 你什么都不用做。Vue 已经把 object 对象改造成了一个『响应式对象』。当你修改 object.message 的值时,渲染的 HTML 会自动更新。更关键的是,你不需要担心你是否因为是在一个 timeout 里面修改了状态而需要调用 $apply,或是需要调用 setState(),也不需要给 Flux store 上侦听一堆事件,更不需要创建一些框架专有的可观察对象,比如 ko.observable() 或是 Ember.Object.create() ... It just works。

Vue 也提供了无缝的『计算属性』:

var example = new Vue({
  data: {
    a: 1
  },
  computed: {
    b: function () {
      return this.a + 1
    }
  }
})

// example 实例会同时代理 a 和 b 这两个属性.
example.a // -> 1
example.b // -> 2
example.a++
example.b // -> 3

这里,计算属性 b 会将 a 作为一个依赖进行追踪,每当 a 变化,b 也自动跟着变化。你不需要特意去声明 b 的依赖,因为这本来就不应该由你来做。

组件化

你这个做小 demo 还不错,可是大项目呢?

在如何组织复杂界面的问题上,Vue 和 React 可以说是异曲同工:一切都是组件。我们可以把一开始的那个例子做成一个可复用的组件:

var Example = Vue.extend({
  template: '<div>{{ message }}</div>',
  data: function () {
    return {
      message: 'Hello Vue.js!'
    }
  }
})

// 将该组件注册为 <example> 标签
Vue.component('example', Example)

这样一来我们就可以在其他组件的模板里这样使用它:

<example></example>

组件可以套其他组件,最终形成一个代表了你的 UI 视图的树状结构。为了让组件之间能够有效的进行动态组构,Vue 组件可以:

  • 用 props 来定义如何接收外部数据;
  • 用自定义事件来向外传递消息;
  • 用 <slot> API 来将外部动态传入的内容(其他组件或是 HTML)和自身模板进行组合。

这里就不过多深入细节了。有兴趣的同学可以自行查阅官方文档

模块化

都已经 2015 年了,再不模块化都不好意思跟人打招呼。

让我们用一个模块打包工具来配合 Vue.js,比如 Webpack 或者 Browserify,然后再加上 ES2015。每一个 Vue 组件都可以看做一个独立的模块。同时因为 Vue 会自动用 Vue.extend 把对象转化为组件构建函数,我们在模块里不需要自己调用 Vue.extend,直接导出一个对象即可:

// ComponentA.js
export default {
  template: '<div>{{ message }}</div>',
  data () {
    return {
      message: 'Hello Vue.js!'
    }
  }
}


// App.js
import ComponentA from './ComponentA'

export default {
  // use another component, in this scope only.
  // ComponentA maps to the tag <component-a>
  components: { ComponentA },
  template: `
    <div>
      <p>Now I'm using another component.</p>
      <component-a></component-a>
    </div>
  `
}

看上去还不错。但如果能把一个组件的模板、样式和 JavaScript 逻辑都放在同一个文件里,并且有正确的语法高亮,岂不是更妙?只要配上 vue-loader 或是 vueify,我们就能做到:

<!-- MyComponent.vue -->

<!-- css -->
<style>
.message {
  color: red;
}
</style>

<!-- template -->
<template>
  <div class="message">{{ message }}</div>
</template>

<!-- js -->
<script>
export default {
  props: ['message'],
  created() {
    console.log('MyComponent created!')
  }
}
</script>

等一下!这不就是 Web Components 吗!而且你的 CSS 依然是全局的呢!

好吧,这确实很像是阉割版的 Web Components,但是:

  • Vue 文件格式可以支持局部 CSS,只要在 <style> 标签上加上一个 scoped 属性。并且一个组件的局部 CSS 不会像单纯的选择器嵌套那样『渗透』到它包含的子组件当中去。
  • 每一个 Vue 组件最终都被编译为纯粹的 JavaScript 模块,并且不需要任何浏览器 polyfill 即可支持到最低 IE9。如果你想,你也可以把它包在一个原生的自定义元素中。
  • Vue 文件的 <script> 默认支持 ES2015。
  • 你可以在每一个语言块中使用任何你想用的预处理器。
  • 当使用 Webpack + vue-loader 时,你可以借助 Webpack 的强大功能将静态资源作为模块依赖来处理。

所以,只要你想,你就可以写这个样子的 Vue 组件:

哦对了,我有没有提到,Vue 组件支持热替换

动画

Vue 能用来做酷炫的东西不?

Vue 自带简洁易用的过渡动画系统。有很多获奖的互动类网站是用 Vue 开发的。

Vue 的反应式系统也使得它可以用来开发高效的数据驱动的逐帧动画。这一类逐帧动画在基于脏检查或是 Virtual DOM 的框架中,往往会导致性能问题,因为即使只是改了一个值,整个所处的子树(scope 或是 component)都需要重新计算。而 Vue 则是改了多少,计算多少,不会有无谓的浪费。在小 demo 中,脏检查或是 Virtual DOM 往往也足够快,但是在大型应用中可就不一定了。而且,即使足够快,那些浪费的计算也会无谓地消耗用户设备的电池。虽然在 React 中可以通过 shouldComponentUpdate 或是 Immutable data 来优化,但这都是额外的开发成本 - 相比之下,Vue 在此类用例中默认就是最优化状态。

一个用 Vue 配合逐帧动画的例子

路由

做单页应用,没有路由怎么行?

和 React 一样,Vue 本身是不带路由功能的。但是,有 vue-router 这个可选的库来配合。vue-router 让你可以将嵌套的路径映射到嵌套的组件,并且提供了细致的路径跳转控制。这里是个简单的例子:

import Vue from 'vue'
import VueRouter from 'vue-router'
import App from './app.vue'
import ViewA from './view-a.vue'
import ViewB from './view-b.vue'

Vue.use(VueRouter)

const router = new VueRouter()

router.map({
  '/a': { component: ViewA },
  '/b': { component: ViewB }
})

router.start(App, '#app')

app.vue 的模板:

<div>
  <h1>This is the layout that won't change</h1>
  <router-view><!-- matched component renders here --></router-view>
</div>

如果你想看一个更全面的实例,可以参考 vue-hackernews。这个小应用用到了 Vue, vue-router, Webpack 和 vue-loader。

稳定性

这是个个人项目,会不会不稳定啊。

是的,这是个个人项目,背后并没有大公司支持的全职团队。但是,数据往往更有说服力。从 0.11 版本开始,Vue 的每一个 commit 都保持了 100% 的测试覆盖率,并且将一直保持;GitHub 上的 1400 多个 issue 平均在 13 小时内关闭。在我写下这篇文章的同时,尚未修复的可重现的 bug 数量为:

Vue 近日刚刚发布了 1.0,现在已经适合应用于生产环境中。如果你是从 0.12 升级到 1.0,则有配套的升级版本,全面兼容 0.12 并且带有兼容性的提示警告。以后的所有带有不兼容变化的版本,都会用这样的方式升级。

希望这篇文章让你对 Vue 有了一个比较大致的了解。我相信相对于市面上的现有方案,Vue 有着其独特的存在价值。