Vue3 的 watch，你們都手動清除過嗎？
作者：林三心不學挖掘機
在 Vue3 的響應式系統中，watch 是監聽數據變化的核心 API 之一。隨著 Composition API 的普及，開發者需要更清晰地理解副作用管理機制。
前言
大家好，我是林三心，用最通俗易懂的話講最難的知識點是我的座右銘，基礎是進階的前提是我的初心~
在 Vue3 的響應式系統中，watch 是監聽數據變化的核心 API 之一。隨著 Composition API 的普及，開發者需要更清晰地理解副作用管理機制。
一、Vue3 的 watch 機制
1.1 基本用法
import { ref, watch } from 'vue'
const count = ref(0)
// 基本監聽模式
const stopWatch = watch(count, (newVal, oldVal) => {
console.log(`值從 ${oldVal} 變為 ${newVal}`)
})
// 停止監聽
// stopWatch() // 手動調用停止監聽1.2 自動停止機制
當在組件 setup() 中同步創建時，Vue3 會自動關聯生命周期：
export default {
setup() {
const count = ref(0)
// 自動綁定組件生命周期
watch(count, (val) => {
console.log('Count changed:', val)
})
return { count }
}
}組件卸載時，Vue 會自動停止這些監聽器，無需手動干預
二、必須手動清除的 3 種場景
2.1 異步創建的監聽器
import { onMounted, onUnmounted } from'vue'
exportdefault {
setup() {
let stopWatch = null
onMounted(() => {
// 異步創建監聽器
setTimeout(() => {
stopWatch = watch(/* ... */)
}, 1000)
})
onUnmounted(() => {
if (stopWatch) {
stopWatch() // 必須手動清除
}
})
}
}關鍵點：Vue 無法追蹤異步創建的監聽器，需要開發者自行管理
2.2 動態條件監聽
const searchKeyword = ref('')
let searchWatch = null
// 根據用戶操作動態創建
function enableSearch() {
searchWatch = watch(searchKeyword, () => {
// 執行搜索邏輯
})
}
function disableSearch() {
searchWatch?.() // 主動銷毀
}典型場景：需要運行時動態啟用的監聽邏輯
2.3 全局狀態監聽
// store.js
import { watch } from'vue'
import store from'./store'
// 全局監聽（危險操作?。?let globalWatcher = null
exportfunction initGlobalWatch() {
globalWatcher = watch(
() => store.state.user,
(user) => {
console.log('User changed:', user)
}
)
}
exportfunction cleanupGlobalWatch() {
globalWatcher?.()
}風險提示：全局監聽器不會自動銷毀，必須提供顯式清理接口
三、智能管理方案
3.1 自動管理組合式函數
import { watchEffect, onScopeDispose } from'vue'
exportfunction useAutoCleanWatcher() {
const stop = watchEffect(() => {
// 副作用邏輯
})
// 自動注冊清理
onScopeDispose(() => {
stop()
})
return { stop }
}優勢：利用 onScopeDispose 實現自動清理
3.2 監聽器工廠模式
function createSmartWatcher(source, callback) {
const stop = watch(source, callback)
return {
stop,
restart: () => {
stop()
return createSmartWatcher(source, callback)
}
}
}
// 使用示例
const { stop } = createSmartWatcher(value, () => {})擴展性：封裝重啟功能，增強可維護性
責任編輯：武曉燕
來源：
前端之神
