watchEffect 返回的 stop 函数可直接调用以立即停止侦听，自动清理副作用和依赖追踪，幂等且安全；常在 onUnmounted 或条件逻辑中调用。
可以通过 watchEffect 返回的函数直接调用，来立即停止侦听。
watchEffect 返回的是一个可执行的 stop 函数
watchEffect 的返回值本身就是一个函数，调用它即可清除当前副作用和关联的响应式依赖追踪。这个函数没有参数，也不需要额外配置。
- 它会自动清理内部注册的 effect、清除对响应式数据的依赖订阅
- 多次调用不会报错，但后续调用无效（即幂等）
- 即使 effect 已经因组件卸载等原因被自动清理，手动调用也安全
常见使用方式：保存句柄并按需调用
通常在 setup 或生命周期中保存返回值，在合适时机（如组件卸载、条件切换、用户操作）触发停止。
- 在
onUnmounted中调用，确保组件销毁时清理 - 配合条件逻辑，例如弹窗关闭、表单提交后停止监听
- 用于临时监听，比如只监听第一次变化后就取消
示例代码
import { watchEffect, onUnmounted } from 'vue'
export default {
setup() {
const stop = watchEffect((onInvalidate) => {
// 副作用逻辑，比如发起请求、更新 DOM
console.log('watchEffect 执行')
// 可选：注册清理函数（在下次执行前或停止前调用）
onInvalidate(() => {
console.log('上一次副作用被清除')
})
})
// 手动停止侦听
const handleStop = () => stop()
// 组件卸载时自动停止
onUnmounted(() => {
stop()
})
return { handleStop }
}
}
注意点
- 不能在
watchEffect的回调内部直接调用stop，否则会导致无限循环或警告 - 如果使用了
onInvalidate，它会在stop()被调用时立即执行（如果存在待执行的 invalidate 回调） - Vue 3.4+ 中，
watchEffect支持传入{ flush: 'post' }等选项，但不影响 stop 的使用方式
