摘要

computed() 用於根據一個或多個響應式資料，派生出一個新的、會自動更新且帶有快取的計算值。

定義與說明

computed() 接收一個 getter 函數，並回傳一個唯讀的 ref 物件。這個 getter 函數的返回值就是計算屬性的值。它有兩大特性：

響應式依賴：

它會自動追蹤 getter 函數中用到的所有響應式資料。當任何依賴改變時，它會自動重新計算。

結果快取：

只要依賴沒有改變，無論你存取計算屬性多少次，它都會立即回傳上一次計算好的快取結果，而不會重複執行 getter 函數，效能極高。

實作範例

Vue SFC

<script setup>
import { ref, computed } from 'vue';

const firstName = ref('John');
const lastName = ref('Doe');

// 建立一個 computed property 來組合全名
const fullName = computed(() => {
  console.log('計算中...'); // 這句話只會在依賴改變時打印
  return `${leftBrace}firstName.value${rightBrace} ${leftBrace}lastName.value${rightBrace}`;
});
</script>

<template>
  <p>First Name: <input v-model="firstName"></p>
  <p>Last Name: <input v-model="lastName"></p>
  <p>Full Name: {{ fullName }}</p>
  <p>Full Name (again): {{ fullName }}</p>
</template>

結論

當你需要基於現有狀態派生出新狀態時，computed() 是你的首選。因其快取特性，它比在方法中進行相同計算或使用 watch 來更新一個 ref 都更加高效和宣告式。

computed 計算屬性快取