摘要

watchEffect() 是一個簡化的偵聽器，它會立即執行一個副作用函式，同時自動追蹤該函式執行期間所用到的所有響應式依賴。當任何依賴變化時，該函式會被重新執行。

定義與說明

watchEffect 與 watch 的主要區別：

依賴追蹤：

watch 需要你明確指定要偵聽的來源；watchEffect 則是隱式地、自動地收集依賴。

執行時機：

watch 預設在資料變化後才執行；watchEffect 總是在建立時就立即執行一次，以便收集初始依賴。

它更關心「副作用函式本身」，只要函式內部用到的任何東西變了，就重新執行。

實作範例

Vue SFC

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

const userId = ref(1);

// watchEffect 會立即執行，並自動追蹤 userId 的變化
watchEffect(async () => {
  // 在這個函式中，我們用到了 userId.value
  // 所以當 userId.value 改變時，這個函式會自動重新執行
  console.log(`正在為使用者 ${leftBrace}userId.value${rightBrace} 獲取資料...`);
  // const response = await fetch(`api/users/${leftBrace}userId.value${rightBrace}`);
  // ...
});
</script>

<template>
  <p>目前使用者 ID: {{ userId }}</p>
  <button @click="userId++">獲取下一個使用者</button>
</template>

結論

當你的副作用邏輯與其依賴的資料來源高度耦合時，watchEffect() 提供了一種更簡潔、更直接的寫法。它免去了手動聲明依賴的步驟，讓程式碼更加精簡，尤其適用於那些「只要用到的東西變了，就重新執行」的場景。

watchEffect 副作用自動追蹤