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。