watcheffect 不会自动停止，必须手动调用返回的 stop 函数终止监听以防内存泄漏；可在组件卸载时用 onunmounted 清理，或在回调中条件调用 stop 实现一次性监听。
Vue 3 的 watchEffect 会自动追踪其回调中访问的响应式依赖，并在依赖变化时重新执行。但它**不会自动停止**，必须手动调用返回的 stop 函数来终止监听，否则可能引发内存泄漏或无效回调。
stop 函数的基本用法
watchEffect 执行后立即返回一个可调用的函数，即 stop。调用它即可立刻解除所有依赖追踪和后续触发：
- 赋值保存：const stop = watchEffect(() => { console.log(count.value) })
- 手动调用：stop() —— 此后即使
count再变，回调也不会执行 - 可在任意时机调用，包括异步逻辑、条件判断内部（如达到阈值后停）
在组件卸载时自动清理
推荐在组件生命周期钩子中绑定清理逻辑，确保组件移除时监听器被释放：
- 使用
onUnmounted（组件从 DOM 移除后执行）：
onUnmounted(() => stop()) - 若需同步中断副作用（如取消未完成的请求、清除定时器），改用
onBeforeUnmount - 不建议仅依赖 Vue 自动清理 —— 组合式 API 中
watchEffect不会自动解绑，无论是否在setup内定义
在回调内条件性停止
可以在 watchEffect 的回调中直接调用 stop()，实现“一次性监听”或状态驱动的终止：
- 示例：当某个 ref 值达到临界点时退出监听
watchEffect(() => { if (counter.value >= 5) stop() }) - 注意：不能在回调外层直接写
stop()，否则监听器尚未建立就已终止 - 异步回调中调用前建议加存在性判断：
if (stop) stop()
与 watch 的 stop 行为一致，但机制不同
watchEffect 的 stop 和 watch 返回的 stop 功能完全相同，都是立即切断响应式连接。区别在于：
-
watchEffect是自动收集依赖，无需显式指定数据源 -
watch需明确传入响应式源（ref、getter 或数组），并能拿到新/旧值 - 两者都支持
onInvalidate处理中间副作用（如防抖取消、请求中止），但stop是最直接的终止方式
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
