Vue中的computed和watch的区别

最近依旧在面试，故会把面试时遇到的一些问题整理下来供自己查阅。因为之前的项目用vue用的不多，所以在被问到computed和watch的区别的时候挺懵的，查了一些资料，稍作整理，供以后查阅。

计算属性（computed）

官方对于计算属性的解释是：

对于任何复杂逻辑，你都应当使用计算属性。计算属性是基于它们的响应式依赖进行缓存的。只在相关响应式依赖发生改变时它们才会重新求值。

直接引用官方文档的例子：

  
Original message: "{{ message }}"
  
Computed reversed message: "{{ reversedMessage }}"

var vm = new Vue({
  el: '#example',
  data: {
    message: 'Hello'
  },
  computed: {
    // 计算属性的 getter
    reversedMessage: function () {
      // `this` 指向 vm 实例
      return this.message.split('').reverse().join('')
    }
  }
});

侦听器（watch）

Vue 通过 watch 选项提供了一个更通用的方法，来响应数据的变化。当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的。

官方文档很清晰地表达了，watch是在执行一些复杂的操作时候使用的。更直观的例子，我们可以看下官方对computed和watch的对比：
以下代码是针对fullname这个属性的监听：

  
{{ fullName }}

使用watch：

var vm = new Vue({
  el: '#demo',
  data: {
    firstName: 'Foo',
    lastName: 'Bar',
    fullName: 'Foo Bar'
  },
  watch: {
    firstName: function (val) {
      this.fullName = val + ' ' + this.lastName
    },
    lastName: function (val) {
      this.fullName = this.firstName + ' ' + val
    }
  }
})

使用computed：

var vm = new Vue({
  el: '#demo',
  data: {
    firstName: 'Foo',
    lastName: 'Bar'
  },
  computed: {
    fullName: function () {
      return this.firstName + ' ' + this.lastName
    }
  }
})

可以明显的看出，在执行简单的计算操作时，computed比watch更简洁易读。

总结：

1.如果一个数据依赖于其他数据的简易计算处理的，那么使用computed比较合适。
2.如果需要在某个数据变化时做一些事情，使用watch来观察这个数据变化

参考资料：

1. Vue -- 计算属性和侦听器
2. Vue中的 computed 和 watch的区别