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。