Vue.js 计算属性（computed）、方法（methods）和侦听属性（watch）的区别与使用场景

参考资料：Vue.js 官网

1 计算属性与方法

下面两个代码示例分别用计算属性和方法实现同一个功能：

<!-- 计算属示例 -->

<p>Computed reversed message: "{{ reversedMessage }}"</p>

<script>
// ...

computed: {
    reversedMessage: function () {
      return this.message.split('').reverse().join('');
}
</script>

<!-- 方法示例 -->

<p>Reversed message: "{{ reversedMessage() }}"</p>

<script>
// ...

methods: {
  reversedMessage: function () {
    return this.message.split('').reverse().join('');
  }
}
</script>

就上述两个案例而言，我们的分析如下：

1. 我们可以像绑定普通属性一样在模板中绑定计算属性。
2. 计算属性是基于它们的依赖进行缓存的。也就是说，计算属性只有在它的相关依赖发生改变时才会重新求值。这就意味着，上述案例中，只要 message 还没有发生改变，多次访问 reversedMessage 计算属性会立即返回之前的计算结果，而不必再次执行函数。
3. 相反，每当触发重新渲染时，调用方法将总会再次执行函数。
4. 假设我们有一个性能开销比较大的计算属性 A，它需要遍历一个巨大的数组并做大量的计算。然后我们可能有其他的计算属性依赖于 A 。如果没有缓存，我们将不可避免的多次执行 A 的 getter！如果你不希望有缓存，请用方法来替代。

2 侦听属性

侦听属性是一个对象，键是需要观察的表达式，值是对应回调函数。值也可以是方法名，或者包含选项的对象。

当你有一些数据需要随着其它数据变动而变动时，或者当需要在数据变化时执行异步或开销较大的操作时，你可以使用 watch。

在下面这个示例中，使用 watch 选项允许我们执行异步操作 (访问一个 API)，限制我们执行该操作的频率，并在我们得到最终结果前，设置中间状态。这些都是计算属性无法做到的。

<div id="watch-example">
  <p>
    Ask a yes/no question:
    <input v-model="question">
  </p>
  <p>{{ answer }}</p>
</div>

var watchExampleVM = new Vue({
  el: '#watch-example',
  data: {
    question: '',
    answer: 'I cannot give you an answer until you ask a question!'
  },
  watch: {
    // 如果 `question` 发生改变，这个函数就会运行
    question: function (newQuestion, oldQuestion) {
      this.answer = 'Waiting for you to stop typing...'
      this.debouncedGetAnswer()
    }
  },
  created: function () {
    this.debouncedGetAnswer = _.debounce(this.getAnswer, 500)
  },
  methods: {
    getAnswer: function () {
      if (this.question.indexOf('?') === -1) {
        this.answer = 'Questions usually contain a question mark. ;-)'
        return
      }
      this.answer = 'Thinking...'
      var vm = this
      axios.get('https://yesno.wtf/api')
        .then(function (response) {
          vm.answer = _.capitalize(response.data.answer)
        })
        .catch(function (error) {
          vm.answer = 'Error! Could not reach the API. ' + error
        })
    }
  }
})

3 总结

1. 当你在模板内使用了复杂逻辑的表达式时，你应当使用计算属性。
2. 虽然方法也能实现同样的效果，但是因为计算属性可以基于它们的依赖进行缓存，所以选择计算属性会比方法更优。
3. 当需要在数据变化时执行异步或开销较大的操作时，可以使用 watch。