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 的区别在于，前者是在依赖的属性发生改变时触发回调函数，后者则是在属性本身发生改变时触发回调函数。

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

data

computed

watch