在 Vue 中，computed 和 watch 都是用來響應式地處理數據變化的工具，但它們的用途和行為有明顯區別。
🔍 一句話總結
-
computed：用于聲明式計算屬性，有緩存。 -
watch：用于監聽響應式數據的變化并執行副作用邏輯，無緩存。
🧠 computed（計算屬性）
? 特點：
-
有緩存：只有依賴的數據發生變化時，才會重新計算。
-
適用于：從已有的數據中派生出新數據，用于模板中綁定或復雜邏輯的復用。
-
聲明式：用于表示“這個值是根據什么計算出來的”。
📌 示例：
<template><div>{{ fullName }}</div>
</template><script setup>
import { ref, computed } from 'vue';const firstName = ref('張');
const lastName = ref('三');const fullName = computed(() => {return `${firstName.value} ${lastName.value}`;
});
</script>
? 優點：
fullName只有在firstName或lastName改變時才重新計算。
👀 watch（偵聽器）
? 特點：
-
無緩存：只要監聽的數據發生變化就會觸發回調。
-
適用于：執行異步操作、請求接口、副作用邏輯等。
-
命令式：用于處理數據變化后要做的事情。
📌 示例：
<script setup>
import { ref, watch } from 'vue';const query = ref('');watch(query, (newVal, oldVal) => {console.log('Query changed from', oldVal, 'to', newVal);// 例如發請求
});
</script>
? 常用于監聽用戶輸入、數據變化時觸發 API 請求、執行副作用等。
🆚 區別對比表
| 特性 | computed | watch |
|---|---|---|
| 是否有緩存 | ? 有 | ? 無 |
| 典型用途 | 派生新值（如模板中展示） | 監聽變化執行副作用（如請求/存儲） |
| 寫法風格 | 聲明式 | 命令式 |
| 是否必須有返回值 | ? 必須返回值 | ? 不需要（一般是執行回調） |
| 支持異步操作 | ? 不推薦（不適合） | ? 支持 |
🚀 總結使用場景
| 場景 | 使用建議 |
|---|---|
| 根據已有狀態組合出一個新值 | computed |
| 響應數據變化并執行副作用（如請求） | watch |
| 想避免重復計算，提高性能 | computed |
| 想監控某個數據的變化并執行一些邏輯 | watch |
)
