Vue3 的 watch，你们都手动清除过吗？-51CTO.COM

前言

大家好，我是林三心，用最通俗易懂的话讲最难的知识点是我的座右铭，基础是进阶的前提是我的初心~

在 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.
3.
4.
5.
6.
7.
8.
9.
10.
11.

1.2 自动停止机制

当在组件 setup() 中同步创建时，Vue3 会自动关联生命周期：

export default {
  setup() {
    const count = ref(0)
    
    // 自动绑定组件生命周期
    watch(count, (val) => {
      console.log('Count changed:', val)
    })

    return { count }
  }
}1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.

组件卸载时，Vue 会自动停止这些监听器，无需手动干预

二、必须手动清除的 3 种场景

2.1 异步创建的监听器

import { onMounted, onUnmounted } from'vue'

exportdefault {
  setup() {
    let stopWatch = null
    
    onMounted(() => {
      // 异步创建监听器
      setTimeout(() => {
        stopWatch = watch(/* ... */)
      }, 1000)
    })

    onUnmounted(() => {
      if (stopWatch) {
        stopWatch() // 必须手动清除
      }
    })
  }
}1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.

关键点：Vue 无法追踪异步创建的监听器，需要开发者自行管理

2.2 动态条件监听

const searchKeyword = ref('')
let searchWatch = null

// 根据用户操作动态创建
function enableSearch() {
  searchWatch = watch(searchKeyword, () => {
    // 执行搜索逻辑
  })
}

function disableSearch() {
  searchWatch?.() // 主动销毁
}1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.

典型场景：需要运行时动态启用的监听逻辑

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?.()
}1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.

风险提示：全局监听器不会自动销毁，必须提供显式清理接口

三、智能管理方案

3.1 自动管理组合式函数

import { watchEffect, onScopeDispose } from'vue'

exportfunction useAutoCleanWatcher() {
const stop = watchEffect(() => {
    // 副作用逻辑
  })

// 自动注册清理
  onScopeDispose(() => {
    stop()
  })

return { stop }
}1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.

优势：利用 onScopeDispose 实现自动清理

3.2 监听器工厂模式

function createSmartWatcher(source, callback) {
const stop = watch(source, callback)

return {
    stop,
    restart: () => {
      stop()
      return createSmartWatcher(source, callback)
    }
  }
}

// 使用示例
const { stop } = createSmartWatcher(value, () => {})1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.

扩展性：封装重启功能，增强可维护性