一、什么是watchEffect？

watchEffect是Vue3組合式API提供的響應(yīng)式偵聽器，用于監(jiān)聽響應(yīng)式數(shù)據(jù)變化并執(zhí)行副作用邏輯。核心定義：立即執(zhí)行一次副作用函數(shù)，自動追蹤函數(shù)內(nèi)訪問的響應(yīng)式數(shù)據(jù)，當(dāng)依賴變化時重新執(zhí)行函數(shù)，無需手動指定監(jiān)聽源。

它是watch的“簡化版”，專注于“副作用響應(yīng)”，解決了watch需手動指定依賴的繁瑣問題。

二、工作原理

基于Vue3響應(yīng)式系統(tǒng)的ReactiveEffect實現(xiàn)：

• 執(zhí)行watchEffect傳入的副作用函數(shù)，此時會觸發(fā)響應(yīng)式數(shù)據(jù)的getter
• 自動收集函數(shù)內(nèi)訪問的所有響應(yīng)式依賴（依賴追蹤）
• 當(dāng)依賴變化時，觸發(fā)setter，重新執(zhí)行副作用函數(shù)
• 組件卸載時，自動停止偵聽，避免內(nèi)存泄漏

三、核心特性

• 自動收集依賴：無需像watch那樣手動指定監(jiān)聽源，函數(shù)內(nèi)用到的響應(yīng)式數(shù)據(jù)都會被追蹤
• 立即執(zhí)行：默認首次渲染就執(zhí)行一次，無需配置immediate
• 自動清理：支持通過onInvalidate清理副作用（如移除事件監(jiān)聽、取消請求）
• 自動停止：在

四、實戰(zhàn)用法示例

4.1 基礎(chǔ)用法（修改頁面標(biāo)題）

<script setup>
import { ref, watchEffect } from 'vue'
const count = ref(0)
// 自動追蹤count，count變化時重新執(zhí)行
watchEffect(() => {
  document.title = `當(dāng)前計數(shù)：${count.value}`
})
</script>

4.2 自動清理副作用

<script setup>
import { watchEffect } from 'vue'
watchEffect((onInvalidate) => {
  // 綁定事件監(jiān)聽
  const handleClick = () => console.log('點擊事件')
  document.addEventListener('click', handleClick)
  // 依賴變化/組件卸載前清理
  onInvalidate(() => {
    document.removeEventListener('click', handleClick)
  })
})
</script>

4.3 手動停止偵聽

<script setup>
import { ref, watchEffect } from 'vue'
const count = ref(0)
// watchEffect返回停止函數(shù)
const stop = watchEffect(() => {
  console.log('count值：', count.value)
})
// 滿足條件時停止偵聽
if (count.value > 5) {
  stop()
}
</script>

五、與watch的核心區(qū)別

六、常見避坑點

• 副作用堆積：未清理副作用（如事件監(jiān)聽、定時器），導(dǎo)致多次執(zhí)行后重復(fù)綁定，需用onInvalidate清理
• 依賴未追蹤：函數(shù)內(nèi)未直接訪問響應(yīng)式數(shù)據(jù)（如嵌套過深未觸發(fā)getter），需確保依賴被直接訪問
• 異步邏輯問題：異步操作內(nèi)的響應(yīng)式數(shù)據(jù)不會被追蹤，需將依賴寫在同步代碼中

七、核心總結(jié)

watchEffect核心價值是“簡化響應(yīng)式偵聽”，無需手動指定依賴，適合動態(tài)依賴、簡單副作用場景（如DOM操作、頁面標(biāo)題修改、臨時調(diào)試）。記住3個關(guān)鍵點：

• 自動收集依賴，無需手動配置監(jiān)聽源
• 首次立即執(zhí)行，依賴變化重新執(zhí)行
• 必做：用onInvalidate清理副作用，避免內(nèi)存泄漏

與watch互補使用，簡單副作用用watchEffect，需舊值對比、異步節(jié)流用watch，高效駕馭Vue3響應(yīng)式偵聽。

到此這篇關(guān)于Vue3 watchEffect詳解：核心用法與原理剖析的文章就介紹到這了,更多相關(guān)Vue3 watchEffect用法內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論