实例生命周期钩子函数

beforeCreate    组件实例刚被创建，组件属性计算之前，如data属性等

created     组件实例创建完成，属性已绑定，但DOM还未生成，$el属性还不存在

beforeMount 模板编译/挂载之前

mounted     模板编译/挂载之后

beforeUpdate    组件更新之前

updated     组件更新之后

activated   for keep-alive，组件被激活时调用

deactivated for keep-alive，组件被移除时调用

beforeDestory   组件销毁前调用

destoryed   组件销毁后调用

computed 属性 这就是为什么对于所有复杂逻辑，你都应该使用 computed 属性

<div id="example">
  <p>初始 message 是："{{ message }}"</p>
  <p>计算后的翻转 message 是："{{ reversedMessage }}"</p>
</div>

 computed: {
    // 一个 computed 属性的 getter 函数

    reversedMessage: function () {

      // `this` 指向 vm 实例
      return this.message.split('').reverse().join('')
    }
  }

computed 属性默认只设置 getter 函数，不过在需要时，还可以提供 setter 函数

computed: {
  fullName: {
    // getter 函数
    get: function () {
      return this.firstName + ' ' + this.lastName
    },
    // setter 函数
    set: function (newValue) {
      var names = newValue.split(' ')
      this.firstName = names[0]
      this.lastName = names[names.length - 1]
    }
  }
}

method 方法 这里不使用 computed 属性，而是在 methods 中定义一个相同的函数。对于最终结果，这两种方式确实恰好相同。

    然而，细微的差异之处在于，computed 属性会基于它所依赖的数据进行缓存。

    每个 computed 属性，只有在它所依赖的数据发生变化时，才会重新取值(re-evaluate)。

    这就意味着，只要 message 没有发生变化，多次访问 computed 属性 reversedMessage，将会立刻返回之前计算过的结果，
    而不必每次都重新执行函数。

    你可能不希望有缓存，请使用 method 方法替代。

watch 属性 Vue 其实还提供了一种更加通用的方式，来观察和响应 Vue 实例上的数据变化：watch 属性。watch 属性是很吸引人的使用方式，
然而，当你有一些数据需要随着另外一些数据变化时，过度滥用 watch 属性会造成一些问题
- 尤其是那些具有 AngularJS 开发背景的开发人员。因此，更推荐的方式是，使用 computed 属性，而不是命令式(imperative)的 watch 回调函数。
- 当你需要监控某个变量，当其改变后进行某些操作，就用watch