最直接方式是将 watchEffect 返回的 stop 函数暴露给调用方。watchEffect 同步返回可调用的 stop 函数，组合式函数应通过返回对象（如 { stop }）提供该接口，支持手动停止与 onBeforeUnmount 自动清理并存，且 stop 幂等、需配合 onInvalidate 清理异步副作用。
在组合式函数中使用 watchEffect 时，若想让调用方能主动停止监听，最直接的方式是将 watchEffect 返回的停止函数（stop）暴露出去。Vue 3 的 watchEffect 本身就会返回一个可调用的 stop 函数，你只需将其作为返回值的一部分即可。
返回 stop 函数供外部手动注销
组合式函数内部调用 watchEffect，把它的返回值（即 stop）通过对象或数组形式返回，调用方拿到后可随时执行它来清除副作用。
例如：
import { watchEffect } from 'vue'
export function useCustomWatcher(source, callback) {
let stop = null
watchEffect((onInvalidate) => {
// 可选：注册清理逻辑（如防抖取消、请求中止）
onInvalidate(() => {
console.log('watchEffect 即将重新运行或被停止')
})
callback(source.value)
}).then(stopper => {
stop = stopper
})
// ✅ 直接返回 stop 函数（注意：watchEffect 同步返回 stop，无需 then）
// 正确写法（同步）：
const stopFn = watchEffect((onInvalidate) => {
onInvalidate(() => {
// 清理逻辑
})
callback(source.value)
})
return {
stop: stopFn // ? 暴露停止函数
}
}
更实用的封装：自动绑定与显式控制分离
实际项目中，常需要「自动随组件卸载停止」+「支持手动提前停止」。可以结合 onBeforeUnmount 自动清理，同时保留手动 stop 接口。
- 使用
getCurrentInstance或onBeforeUnmount（需在 setup 中）自动注册销毁逻辑 - 但不要覆盖手动 stop 的能力 —— 手动调用
stop()应立即生效，且后续再调用无副作用（watchEffect 的 stop 是幂等的） - 推荐在组合式函数中统一管理生命周期，避免调用方重复处理
安全注销的关键细节
确保注销真正生效，要注意以下几点：
- stop 函数只能调用一次生效：多次调用不会报错，但只有首次有效；后续调用静默忽略
-
watchEffect 内部异步操作需自行清理：比如发起的 fetch 请求、setTimeout、addEventListener 等，必须在
onInvalidate或手动stop时一并中止 -
避免闭包引用导致内存泄漏：如果
callback捕获了大型对象或组件实例，应在onInvalidate中释放关键引用 - 组合式函数应返回纯净的 stop 接口：不依赖外部状态，不隐式绑定 this 或作用域，方便测试和复用
完整示例：带自动卸载 + 手动控制的 useFetchWatcher
import { watchEffect, onBeforeUnmount } from 'vue'
export function useFetchWatcher(urlRef, fetcher) {
let stopWatch = null
// 启动 watchEffect 并保存 stop 函数
stopWatch = watchEffect(async (onInvalidate) => {
const url = urlRef.value
if (!url) return
const controller = new AbortController()
onInvalidate(() => controller.abort()) // 响应重新运行或停止
try {
const res = await fetcher(url, { signal: controller.signal })
// 处理响应...
} catch (e) {
if (e.name !== 'AbortError') console.error(e)
}
})
// 组件卸载时自动停止（可选，取决于是否希望完全托管生命周期）
onBeforeUnmount(() => {
stopWatch?.()
})
// ✅ 显式暴露，供调用方随时手动停止
return {
stop() {
stopWatch?.()
stopWatch = null
}
}
}
调用时：
const { stop } = useFetchWatcher(url, myFetcher)
// 需要时手动停止
stop()
// 也可留空，由 onBeforeUnmount 自动处理
