watchEffect适合变量变更即触发联动计算，自动追踪依赖无需手动声明，支持多ref响应、竞态清理及computed预处理，但不提供新旧值对比。
watchEffect 适合做“只要变量一变，就重新执行逻辑”的联动计算，它自动追踪内部读取的响应式值，不用手动列依赖，写起来更轻量、语义更直接。
用 watchEffect 自动收集多个 ref 的变化
当你有多个独立的响应式变量（比如搜索关键词、分类、状态），又希望它们任意一个变动都触发一次计算或请求，watchEffect 是最自然的选择。它会在回调里自动识别你读取了哪些 ref，并在任一值更新时重新运行整个函数。
- 直接在回调中读取 ref 的 .value，Vue 就会把它加入依赖追踪列表
- 不需要传数组，也不用担心漏掉某个变量
- 适合做搜索过滤、图表重绘、表单校验汇总等“结果驱动型”联动
配合 onInvalidate 处理竞态与清理
联动计算常伴随异步操作（如 fetch、setTimeout），新触发可能覆盖旧结果。watchEffect 提供 onInvalidate 回调，让你能主动中断前序未完成任务。
Ainative Vue Sdk
下载
使用 `@ainative/vue-sdk` 为 Vue 3 应用添加 AI 聊天功能。适用于以下场景：(1) 安装 `@ainative/vue-sdk`，(2) 在 Vue 组件中使用 `useChat` 组合式函数，(3) 提供……
- 每次新执行前，onInvalidate 会先被调用，可在这里 clearTimeout 或 abort fetch
- 避免旧请求返回后错误地覆盖新状态
- 例如：用户快速输入时，只保留最后一次搜索的结果
结合 computed 预处理参数再联动
如果联动逻辑依赖组合条件（比如“只有关键词非空且分类有效才发起请求”），建议先把判断逻辑抽到 computed 中，再在 watchEffect 里读取它。
立即学习“前端免费学习笔记（深入）”；
- computed 负责业务规则表达，watchEffect 负责副作用执行，职责分离更清晰
- 比如 const shouldSearch = computed(() => keyword.value && isValidCategory(category.value))
- watchEffect 里 if (!shouldSearch.value) return，跳过无效触发
注意 watchEffect 不提供新旧值对比
它只关心“现在该算什么”，不暴露 oldValue。如果你需要基于差异做不同处理（比如仅当页码变化才滚动到顶部），就得改用 watch 数组方式；但多数联动计算只需最新状态，watchEffect 更简洁可靠。
