Vue.js 計算屬性(computed)、方法(methods)和偵聽屬性(watch)的區別與使用場景

參考資料:Vue.js 官網vue

1 計算屬性與方法

下面兩個代碼示例分別用計算屬性和方法實現同一個功能:ios

<!-- 計算屬示例 -->

<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>

就上述兩個案例而言,咱們的分析以下:axios

  1. 咱們能夠像綁定普通屬性同樣在模板中綁定計算屬性。
  2. 計算屬性是基於它們的依賴進行緩存的。也就是說,計算屬性只有在它的相關依賴發生改變時纔會從新求值。這就意味着,上述案例中,只要 message 尚未發生改變,屢次訪問 reversedMessage 計算屬性會當即返回以前的計算結果,而沒必要再次執行函數。
  3. 相反,每當觸發從新渲染時,調用方法將總會再次執行函數。
  4. 假設咱們有一個性能開銷比較大的計算屬性 A,它須要遍歷一個巨大的數組並作大量的計算。而後咱們可能有其餘的計算屬性依賴於 A 。若是沒有緩存,咱們將不可避免的屢次執行 A 的 getter!若是你不但願有緩存,請用方法來替代。

2 偵聽屬性

偵聽屬性是一個對象,鍵是須要觀察的表達式,值是對應回調函數。值也能夠是方法名,或者包含選項的對象。api

當你有一些數據須要隨着其它數據變更而變更時,或者當須要在數據變化時執行異步或開銷較大的操做時,你可使用 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。
相關文章
相關標籤/搜索