总结 vue data、计算属性 computed 与侦听属性 watch

data

当一个 Vue 实例被建立时，它将 data 对象中的全部的属性加入到 Vue 的响应式系统中。当这些属性的值发生改变时，视图将会产生“响应”，即匹配更新为新的值。（只有在实例化的data会产生“响应”，然后期加入的属性则不会产生“响应”）

如何在实例化以后中止对数据的响应（Object.freeze（））

例：

var obj = {
  foo: 'bar'
}

Object.freeze(obj)

data 为何要使用 return 返回对象的方式呢？

由于不使用return包裹的数据会在项目的全局可见，会形成变量污染。 使用return包裹后数据中变量只在当前组件中生效，不会影响其余组件。

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]
    }
  }
}

watch

虽然计算属性在大多数状况下更合适，但有时也须要一个自定义的侦听器。这就是为何 Vue 经过 watch 选项提供了一个更通用的方法，来响应数据的变化。当须要在数据变化时执行异步或开销较大的操做时，这个方式是最有用的。

computed 与 watch 的区别在于，前者是在依赖的属性发生改变时触发回调函数，后者则是在属性自己发生改变时触发回调函数。