vuejs 综合介绍 - 译自Vuejs作者博客

原文地址：http://blog.evanyou.me/2015/1...

vuejs是一个建造web界面的库。配合其他工具，你也可以称它为“框架”（尽管它更多的看起来像是一堆配合很好的工具集）。如果你从未听说过vue，你可能会想，好吧，我懂了，又一个js框架。事实上Vue并不新，因为我两年以前就开始了它的原型开发，第一个正式版发布于2014年2月，随后不断更新进步，至今已经有很多产品在使用Vue。

那么，Vue到底是干嘛的呢？究竟什么造就了它的与众不同？当这个地球上已经有了angular，ember和react，我为什么还要学习vue？通过带你深入vuejs的设计概念，本篇文章希望能给你一些灵感， 我相信读后你自会有自己的答案。

响应式

保证数据和展现的一致很难，是吗？

我们先从最基本的任务开始，展示数据，假设我们有如下一个简单的对象

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

模板：

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

在Vue里面我们这样将它们结合：

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

看起来我们仅仅渲染了模板，当我们更新了数据，我们要如何去更新界面呢？什么都不用做，因为Vue已经把这个对象变成了响应式的，当你更改了object.message， html会自动更新。更重要的是，你无须担心如果超时去调用$apply，或者setState()，监听Store的事件，或者创建框架监听属性，比如ko.observable()或 Ember.Object.create()，vue就这样简单的运作。

Vue同时提供了一个完美的计算属性(computed properties)：

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

// both a & b are proxied on the created instance.
example.a // -> 1
example.b // -> 2
example.a++
example.b // -> 3

计算属性b追踪a，自动同步，不需要声明a为b的依赖。
另外，简单类模式（POJO-based）允许很简单的整合任意类型的数据资源或状态管理方案，比如，这里有一个整合了vuejs组件和Rxjs的观察模块，仅仅用了30行代码。

组件

数据绑定对小型demo来说还不错，那么大型应用呢？

对于结构复杂的界面，vue采用了与react十分类似的方案：从上至下的组件化。我们先来看一个可复用组件的例子:

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

// register it with the tag <example>
Vue.component('example', Example)

现在我们就可以用这个组件在其他模版里，就如同一个自定义页面元素：

<example></example>

一个组件包含另外一些组件，它们形成一个UI树。为了保证它们之间的组合性，Vue组件同时包含如下内容：

• 定义如何从父级获取数据，使用 props

• 发布自定义事件，以便在父级作用域中触发它

• 组合父级引入内容，使用<slot>

这里不过多探讨细节，感兴趣请查看官网。

模块化

21世纪了，我们不应该把所有东西都放在全局作用域里

我们使用打包工具（Webpack, Browerify）以及 ES2015.每个组件都是一个模块，Vue会自动把配置对象转换到组件结构里，所以我们只需要在模块里简单的输出如下内容：

// 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>
  `
}

看起来不错是吗？如果我们能讲页面的模版，样式和js逻辑封装到一个文件里会更好！尤其是他们本身还有各自的语法高亮。实用工具诸如 Webpack + vue-loader 或者 Browerify + 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组件？但是css依旧是全局的。

是的，一定程度上我们重新定义了web组件，除了：

• 我们也可以进行css封装，只需添加scoped属性到<style>标签内，它甚至不会继承到自己的子组件里。

• 每个Vue组件都会被压缩到一个js模块内，不许加任何垫片完美兼容至IE9以上，也可以将其添加到自定义元素里。

• ES2015 默认被支持。

• 你可以使用任何预处理器(less, coffeScript ...) 在任意语言块。

• 当使用Webpack + vue-loader 方案时，你可以引用webpack全部的强大功能，例如静态资源加载和处理，因为Vue里（单文件组件）模版和样式都是通过webpack的html-loader,css-loader来实现的，你可以通过组件URLS来加载模块依赖。

很好，我们的组件就长这个样子：

对了，我提到vue组件是热加载的了吗？

动画

可以用Vue做炫酷的东西吗？

Vue内置了过渡系统，目前已经有很多获奖网站使用它们。

Vue相应系统内部对渐变性质的状态改变有着非常好的支持，对于其他框架而言，这里有些混乱，比如采用脏检查(dirty-checking) 或者 dom差分(Virtual Dom diffing)。对于一个每秒60帧的状态改变，vue清楚的知道那些节点被影响，更新它们，而避免那些不受影响节点的更新。而脏检查或dom差分，往往会触发整个dom子树的重新渲染。对于小项目而言这还行，但是比如大项目里每秒60真的改变效率就不行了，就算是可以接受，这些方案也消耗了系统过多的资源。查看这篇讨论，搞明白react，vue对于动画渲染方面的效率差异。

下面是Vue一个状态渐变的例子：
http://codepen.io/yyx990803/p...

路由

我想创建的是应用，路由在哪里？

和React一样，Vue本身不提供路由，但是你可以通过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>

项目中的实际应用，参照 HackerNews Clone ，基于Vuejs, vue-router, webpack 和 vue-loader。

稳定性

Vue是个人项目？安全性如何？

是的，Vue是一个个人项目，如果你想找一个企业级技术支持团队，那么Vue并不是。但，我们来看下数字，Vue自从0.11版本就保持着100%测试覆盖率，而且肯定会继续，github issues平均13小时内解决，目前已解决1400+ issues。截至目前还未发现开放和可复现的bug。

译者：以下略去最后两段，作者主要说了历史版本，版本迁移，希望各位持续关注和支持以及相关资源。