computed

4932發表於2024-10-28

計算屬性關鍵詞: computed。

計算屬性在處理一些複雜邏輯時是很有用的。

在 Vue.js 中，computed 屬性是一種強大的特性，用於定義依賴於其他響應式資料的計算值。

computed 屬性不僅能夠簡化模板中的表示式，還能夠快取計算結果，避免不必要的重複計算，從而提高效能。

本文將深入探討 Vue 中 computed 屬性的實現原理，包括其工作機制、依賴追蹤、快取策略等方面。
1. Computed 屬性概述

Computed 屬性是 Vue 例項中的一個特殊屬性，它允許開發者定義一個計算值，該值依賴於其他響應式資料。Computed 屬性具有以下特點：

響應式：當依賴的資料發生變化時，computed 屬性會自動重新計算。
快取：computed 屬性會快取計算結果，只有當依賴的資料發生變化時，才會重新計算。
惰性求值：computed 屬性在首次訪問時才會進行計算，之後會根據依賴資料的變化情況決定是否重新計算。

可以看下以下反轉字串的例子：

不使用computed

<div id="app">
  {{ message.split('').reverse().join('') }}
</div>

使用computed

{{ reversedMessage }} 是一個 computed 屬性，它依賴於 massage。當 massage 發生變化時，massage 會自動重新計算

<div id="app">
  <p>原始字串: {{ message }}</p>
  <p>計算後反轉字串: {{ reversedMessage }}</p>
</div>
 
<script>
var vm = new Vue({
  el: '#app',
  data: {
    message: 'Runoob!'
  },
  computed: {
    // 計算屬性的 getter
    reversedMessage: function () {
      // `this` 指向 vm 例項
      return this.message.split('').reverse().join('')
    }
  }
})
</script>

不使用computed使用method

methods: {
  reversedMessage2: function () {
    return this.message.split('').reverse().join('')
  }
}

computed和methods區別

我們可以使用 methods 來替代 computed，效果上兩個都是一樣的，但是 computed 是基於它的依賴快取，

只有相關依賴發生改變時才會重新取值。而使用 methods ，在重新渲染的時候，函式總會重新呼叫執行。

可以說使用 computed 效能會更好，但是如果你不希望快取，你可以使用 methods 屬性。

使用 Watcher 進行效能最佳化

在某些情況下，可以使用 watch 選項來替代 computed 屬性，以實現更細粒度的控制和效能最佳化。

   watch: {
      firstName: 'updateFullName',
      lastName: 'updateFullName'
    },
    methods: {
      updateFullName() {
        this.fullName = `${this.firstName} ${this.lastName}`;
      }
    }

總結

Vue 的 computed 屬性透過依賴追蹤和快取策略，實現了響應式計算和效能最佳化。在實現原理上，computed 屬性依賴於 Vue 的響應式系統，

透過 Watcher 例項進行依賴收集和快取控制。透過深入理解和掌握 computed 屬性的實現原理，開發者可以更好地利用這一特性，提高應用的效能和可維護性。

在實際開發中，應根據具體需求合理使用 computed 屬性，並結合其他最佳化手段，如避免不必要的計算和使用 Watcher 進行細粒度控制，從而構建高效、穩定的 Vue 應用。

相關文章