建立 2026-09-15 更新 2026-09-15

計算與偵聽

computed 用來從既有狀態算出新值；watch 用來在狀態變了之後做副作用（打 API、寫 localStorage、同步非 Vue 的東西）。兩者不要混用。官方：Computed、Watchers。

computed：快取的衍生值

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

const items = ref([
  { name: '茶', done: false },
  { name: '咖啡', done: true },
])

const remaining = computed(() => items.value.filter((i) => !i.done).length)
</script>

<template>
  <p>還有 {{ remaining }} 項未完成</p>
</template>

computed 只在依賴變了才重算，樣板多次讀同一個 computed 不會重跑函式。它預設是唯讀的；需要可寫再查 writable computed。

該用 computed 的時候：顯示用的字串、過濾後的清單、價錢小計。不要在 computed 裡改狀態或發請求。

watch：依賴變了再做事

import { ref, watch } from 'vue'

const keyword = ref('')

watch(keyword, async (next, prev) => {
  // 去搜尋；prev 是舊值
  const result = await search(next)
})

預設是懶執行：建立時不跑，要等來源先變一次。需要一開始就跑，加 { immediate: true }。

偵聽物件內部欄位：

watch(
  () => form.name,
  (name) => { /* ... */ },
)

或 watch(form, callback, { deep: true })。深層偵聽成本較高，能用 getter 就用 getter。

watchEffect

watchEffect 會自動追蹤回呼裡讀到的響應式資料，一開始就執行一次。適合「這段邏輯依賴一組狀態，不想逐一列出」；來源不明確時，還是寫 watch 比較好讀。

怎麼選

下一步把畫面拆成可重用的 元件。

推薦影音

Vue JS 3 Tutorial #10 — The Composition API (part 1)

來源：Net Ninja　約 45 分鐘

後半段專門講 computed、watch 與 watchEffect（約 32 分起）。前面的 ref／reactive 可與 響應式 對照。