Vue 3 的 Composition API 引入了 <script setup> 語法，這是一種更簡潔、更直觀的方式來編寫組件邏輯。結(jié)合 watchEffect 和 watch，我們可以輕松地監(jiān)視響應(yīng)式數(shù)據(jù)的變化。本文將介紹如何使用 <script setup> 語法結(jié)合 watchEffect 和 watch，并通過一個(gè)示例展示它們的用法。

---

什么是 <script setup> 語法？

<script setup> 是 Vue 3 中的一種語法糖，它允許我們在單文件組件（SFC）中以更簡潔的方式編寫 Composition API 代碼。使用 <script setup> 后，我們無需顯式地使用 setup 函數(shù)，而是可以直接在 <script setup> 中編寫邏輯。

---

什么是 watchEffect？

watchEffect 是 Vue 3 中的一個(gè)函數(shù)，用于自動(dòng)跟蹤響應(yīng)式依賴，并在這些依賴發(fā)生變化時(shí)執(zhí)行指定的副作用函數(shù)。與 watch 不同，watchEffect 不需要顯式地指定要監(jiān)視的依賴，它會(huì)自動(dòng)收集在副作用函數(shù)中使用到的響應(yīng)式數(shù)據(jù)。

---

什么是 watch？

watch 是 Vue 3 中的另一個(gè)函數(shù)，用于顯式地監(jiān)視指定的響應(yīng)式數(shù)據(jù)，并在這些數(shù)據(jù)發(fā)生變化時(shí)執(zhí)行回調(diào)函數(shù)。與 watchEffect 不同，watch 需要明確指定要監(jiān)視的依賴。

---

示例代碼

假設(shè)我們有一個(gè)組件，需要監(jiān)視水溫和水位的變化，并在水溫達(dá)到 60 度或水位達(dá)到 80 時(shí)向服務(wù)器發(fā)送請求。我們可以使用 watchEffect 和 watch 來實(shí)現(xiàn)這一功能，并提供兩個(gè)按鈕來增加水溫和水位。

以下是完整的代碼示例：

<template><div><p>當(dāng)前水溫: {{ temp }}°C</p><p>當(dāng)前水位: {{ height }}cm</p><button @click="increaseTemp">增加溫度</button><button @click="increaseHeight">增加水位</button></div>
</template><script lang="ts" setup>
import { ref, watchEffect, watch } from 'vue';// 定義響應(yīng)式數(shù)據(jù)
const temp = ref(50); // 初始水溫為 50°C
const height = ref(70); // 初始水位為 70cm// 使用 watchEffect 監(jiān)視數(shù)據(jù)變化
watchEffect(() => {if (temp.value >= 60 || height.value >= 80) {console.log('watchEffect: 條件滿足，給服務(wù)器發(fā)請求');// 這里可以添加發(fā)送請求的邏輯}
});// 使用 watch 監(jiān)視數(shù)據(jù)變化
watch([temp, height], ([newTemp, newHeight]) => {if (newTemp >= 60 || newHeight >= 80) {console.log('watch: 條件滿足，給服務(wù)器發(fā)請求');// 這里可以添加發(fā)送請求的邏輯}
});// 增加溫度的函數(shù)
const increaseTemp = () => {temp.value += 10;
};// 增加水位的函數(shù)
const increaseHeight = () => {height.value += 10;
};
</script>

---

代碼解析

1. 定義響應(yīng)式數(shù)據(jù)：

   • 使用 ref 函數(shù)定義了兩個(gè)響應(yīng)式數(shù)據(jù) temp 和 height，分別表示水溫和水位。
   • 初始值設(shè)置為 temp = 50（水溫）和 height = 70（水位）。

2. 使用 watchEffect：

   • watchEffect 自動(dòng)跟蹤 temp 和 height 的變化。
   • 當(dāng) temp >= 60 或 height >= 80 時(shí)，觸發(fā)副作用函數(shù)，打印日志并模擬發(fā)送請求。

3. 使用 watch：

   • watch 顯式地監(jiān)視 temp 和 height 的變化。
   • 當(dāng) temp 或 height 發(fā)生變化時(shí)，觸發(fā)回調(diào)函數(shù)，打印日志并模擬發(fā)送請求。

4. 增加溫度和水位的函數(shù)：

   • increaseTemp：每次點(diǎn)擊按鈕，水溫增加 10°C。
   • increaseHeight：每次點(diǎn)擊按鈕，水位增加 10cm。

---

對比 watchEffect 和 watch

特性	watchEffect	watch
依賴收集	自動(dòng)收集副作用函數(shù)中的響應(yīng)式依賴	需要顯式指定要監(jiān)視的依賴
使用場景	適合不需要明確指定依賴的場景	適合需要明確指定依賴的場景
初始化執(zhí)行	立即執(zhí)行副作用函數(shù)	默認(rèn)不會(huì)立即執(zhí)行，除非設(shè)置 { immediate: true }
性能	依賴自動(dòng)收集，可能稍慢	依賴明確，性能稍高

---

總結(jié)

通過 <script setup> 語法，我們可以更簡潔地編寫 Vue 組件的邏輯。watchEffect 和 watch 是 Vue 3 中用于監(jiān)視響應(yīng)式數(shù)據(jù)變化的強(qiáng)大工具：

• watchEffect 適合自動(dòng)跟蹤依賴的場景。
• watch 適合需要顯式控制依賴的場景。

在實(shí)際開發(fā)中，可以根據(jù)具體需求選擇合適的工具。希望本文能幫助你更好地理解和使用 watchEffect 和 watch。如果你有任何問題或建議，歡迎在評論區(qū)留言討論！