Computed VS Watch

计算属性

计算属性是基于它们的响应式依赖进行缓存的。只在相关响应式依赖发生改变时它们才会重新求值。

缓存的重要性：当我们有一个性能开销很大的计算属性A时，他需要遍历一个巨大的数组并做大量计算。当有其他计算属性也依赖A时，如果不缓存A，我们将不可避免的多次执行 A 的 getter方法，这样十分耗费性能。

计算属性默认只有 getter，不过在需要时你也可以提供一个 setter

var vm = new Vue({
  el: '#demo',
  data: {
    firstName: 'Foo',
    lastName: 'Bar'
  },
  computed: {
    fullName: {
      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侦听器是最有用的。当值第一次绑定的时候，不会执行监听函数，只有值发生改变才会执行。

watch: {
    city：{
        //如果我们需要在最初绑定值的时候也执行函数，则就需要用到immediate属性
        immediate: true,
        //普通的watch方法无法监听到对象内部属性的改变，只有data中的数据才能够监听到变化，此时就需要deep属性对对象进行深度监听
        deep: true,
        handler(newVal, oldVal) {
            // do somethings
        },
    },
    // 当对象属性较多时，每个属性值的变化都会执行handler。如果只需要监听对象中的一个属性值，则可以做以下优化：使用字符串的形式监听对象属性
    'city.name': {
        handler(newName, oldName) {
            // ...
        },
    }
}

计算属性 vs 侦听器

• watch：一个值变化了，我要做那些事，适合一个值影响多个值的情景。

• computed：一个值由其他的值得来的，这些值变了我也要变，适合多个值影响一个值的场景。

• 计算属性有缓存性，计算所得的值没有变化不会重复执行，监听器提供更通用的方法，适合执行异步操作或者开销大的情况。

• 一个数据需要经过复杂计算就用 computed。一个数据需要被监听并且对数据做一些操作就使用 watch。