2024-11-26 vue computed 還有什麼特性及使用時機

2024-11-26 vue computed 還有什麼特性及使用時機

computed 的特性與使用時機

computed 是 Vue 的一個重要功能，用於定義依賴其他數據計算而來的屬性。它能有效提高代碼的可讀性和性能，是處理基於數據計算的場景的首選。

---

computed 的特性

1. 基於依賴的響應式更新

   • computed 屬性會根據它依賴的數據變化自動更新。
   • 不需要手動觸發重新計算。

   範例：

   computed: {
     fullName() {
       return this.firstName + ' ' + this.lastName;
     }
   }

   • 當 firstName 或 lastName 改變時，fullName 會自動更新。

2. 具有緩存功能

   • 當依賴的數據沒有發生變化時，computed 屬性不會重新計算，而是返回緩存的結果。
   • 適合用於涉及複雜計算的場景，提升性能。

   範例：

   computed: {
     expensiveCalculation() {
       console.log('正在重新計算...');
       return this.number * 100;
     }
   }

   • 如果 this.number 沒有變化，expensiveCalculation 不會再次執行。

3. 只讀屬性

   • 默認情況下，computed 屬性是只讀的。
   • 如果需要讀寫，可以設置 getter 和 setter。

   範例：

   computed: {
     fullName: {
       get() {
         return this.firstName + ' ' + this.lastName;
       },
       set(newValue) {
         const names = newValue.split(' ');
         this.firstName = names[0];
         this.lastName = names[1];
       }
     }
   }

4. 適合用於模板中

   • computed 屬性通常用於模板中，讓模板代碼更簡潔。
   • 與直接在模板內書寫邏輯相比，computed 讓邏輯集中在 JavaScript 部分，易於測試和維護。

   範例：

   <p>{{ fullName }}</p>

---

computed 與 methods 的區別

computed 和 methods 都可以實現數據的動態計算，但它們的行為不同。

特性	computed	methods
是否有緩存	有緩存，依賴數據不變時返回緩存的值	無緩存，每次調用都會執行
適合場景	基於依賴數據計算，且結果可能被多次使用	僅在需要時調用，不需要依賴數據變化更新
使用方式	通常用於模板中直接展示	通常用於事件處理或不頻繁的邏輯計算

---

computed 的使用時機

1. 需要基於數據進行邏輯計算

   • 當某個屬性需要根據其他數據的值計算得出時，應使用 computed。
   • 範例：

     computed: {
       fullName() {
         return `${this.firstName} ${this.lastName}`;
       }
     }

2. 避免模板中出現複雜的邏輯

   • 如果模板中需要顯示的內容涉及到條件判斷或計算，應該提取到 computed 中。
   • 範例：

     <!-- 不建議 -->
     <p>{{ firstName + ' ' + lastName }}</p>
     
     <!-- 建議 -->
     <p>{{ fullName }}</p>

3. 需要提高性能的計算場景

   • 如果一個計算結果會頻繁被多處使用，computed 能通過緩存機制提高性能。
   • 範例：

     computed: {
       filteredItems() {
         return this.items.filter(item => item.active);
       }
     }

4. 當計算屬性需要可讀可寫

   • 如果需要實現雙向數據綁定，可以為 computed 屬性設置 getter 和 setter。
   • 範例：

     computed: {
       userName: {
         get() {
           return this.firstName + ' ' + this.lastName;
         },
         set(newValue) {
           const parts = newValue.split(' ');
           this.firstName = parts[0];
           this.lastName = parts[1];
         }
       }
     }

---

computed 與 watch 的區別

特性	computed	watch
響應數據變化	自動更新，適合依賴數據計算	手動執行特定邏輯
是否返回計算值	是，直接返回計算值	否，通常用於執行副作用
適用場景	用於計算屬性	用於監視數據變化並執行副作用

---

小結

• 特性：computed 屬性基於依賴數據自動更新，且具有緩存功能，默認為只讀。
• 使用時機：
  • 當屬性依賴於其他數據計算得來。
  • 需要將複雜的邏輯從模板中移出。
  • 避免多次執行相同的計算。
• 與 methods 和 watch 的區別：
  • computed 適合依賴計算，並具有緩存功能。
  • methods 適合觸發執行。
  • watch 適合監聽數據變化並執行副作用。