2024-11-25 vue 在 computed 所依賴的數據 需要在 data 中定義？

2024-11-25 vue 在 computed 所依賴的數據 需要在 data 中定義？

是的，**computed 所依賴的數據** 通常需要在 data 中定義，因為 Vue 的響應式系統只能追蹤那些已經被定義為響應式的屬性。

---

為什麼 computed 的依賴數據需要定義在 data 中？

• Vue 的響應式特性
  Vue 會將 data 中的屬性轉換為響應式屬性（通過 Object.defineProperty 或代理的方式），從而實現自動追蹤和更新。
  當 computed 屬性依賴於這些響應式數據時，Vue 能自動知道什麼時候需要重新計算該屬性。

---

舉例說明

正確做法：依賴數據在 data 中定義

export default {
  data() {
    return {
      firstName: 'John',
      lastName: 'Doe'
    };
  },
  computed: {
    fullName() {
      return `${this.firstName} ${this.lastName}`;
    }
  }
};

• 流程：
  1. 當 firstName 或 lastName 改變時（例如透過某個事件修改它們），Vue 的響應式系統會檢測到變化。
  2. fullName 自動重新計算，模板中使用 fullName 的地方也會同步更新。

---

錯誤做法：依賴數據未在 data 中定義

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

• 問題：
  • 這裡的 firstName 和 lastName 沒有定義在 data 中，Vue 無法追蹤它們的變化。
  • 導致 fullName 永遠不會被重新計算，即使你試圖手動更改 firstName 或 lastName。

---

其他可被 computed 依賴的數據

除了 data 中的屬性，以下數據也可以被 computed 屬性依賴：

1. props
   如果是組件，props 傳入的數據也是響應式的，因此可以被 computed 屬性依賴。

   範例：

   props: ['items'],
   computed: {
     activeItems() {
       return this.items.filter(item => item.active);
     }
   }

2. 其他 computed 屬性
   一個 computed 屬性可以依賴其他 computed 屬性，前提是這些屬性本身依賴於響應式數據。

   範例：

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

---

總結

• computed 的依賴數據 必須是響應式數據，通常在 data 中定義。
• 如果依賴數據未定義為響應式，computed 屬性將無法感知變化，無法重新計算。
• data 是響應式數據的主要來源，但 props 和其他 computed 屬性也可以作為依賴數據。