Vue3 的 watch，你們都手動清除過嗎？

作者：林三心不學挖掘機 2025-04-07 08:50:36

在 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, () => {})

擴展性：封裝重啟功能，增強可維護性

責任編輯：武曉燕來源：前端之神

Vue3 系統數據