核心是避免同一watchEffect既读又写同一响应式字段，需分离职责、防异步重入、拆分对象、验证依赖收集。
核心是不让同一个 watchEffect 既读又写同一个响应式字段——Vue 虽有基础防自调用，但只拦得住“直接读写”，拦不住间接闭环或跨 effect 误操作。
别在副作用里直接修改监听源
这是最常见也最危险的写法：
-
watchEffect(() => { count.value++ })—— 读count同时改count，触发自身重执行 -
watch(() => obj.name, () => obj.name = 'new')—— 同样形成闭环
这类写法本质是逻辑自引用，不是语法错，而是设计漏洞。应改为分离职责：用 computed 衍生值，再用 ref 或其他状态承接更新结果，不反向污染源头。
异步操作要加防重触发保护
异步请求后赋值容易引发循环，比如：
立即学习“前端免费学习笔记（深入）”；
Ainative Vue Sdk
下载
使用 `@ainative/vue-sdk` 为 Vue 3 应用添加 AI 聊天功能。适用于以下场景：(1) 安装 `@ainative/vue-sdk`，(2) 在 Vue 组件中使用 `useChat` 组合式函数，(3) 提供……
- 请求返回后更新
data.value，而这个data又是当前watchEffect的依赖之一 - 多次快速切换参数（如搜索关键词），导致多个请求并发、响应乱序、状态覆盖错乱
建议做法：
- 用
onInvalidate清理上一次未完成的请求（如abortController.abort()） - 加 loading 标志或请求 ID 对比，只接受最新一次响应的结果
- 把请求逻辑抽离成独立函数，避免副作用函数内混杂数据获取与状态更新
警惕间接依赖形成的隐式循环
看似没动原字段，但通过中间层间接影响了同一依赖链：
- A effect 读
user.profile，然后更新user.lastActive - B effect 读
user.lastActive，又触发user.profile.refresh() - 如果
profile和lastActive都在同一个 reactive 对象里，就可能绕过 Vue 的自调用过滤
解决思路：
- 拆分对象：把高频更新字段和只读字段放在不同
reactive或ref中 - 用
markRaw明确标记不需要响应的部分（如第三方类实例） - 必要时手动
pause和resume监听（配合watch的flush: 'sync'或自定义开关）
调试时确认依赖是否真被收集
有时候“没循环”不是因为防住了，而是根本没建立依赖关系：
- 条件渲染中首次访问为
undefined（如v-if="item?.id"），导致track没发生，后续赋值不会触发 - 解构后未用
toRefs，丢失响应性 - 异步代码里访问响应式数据（
await后），依赖收集已结束，这部分读取不被追踪
验证方法：
- 在
watchEffect开头加console.log('run')，看是否意外多执行 - 用 Vue Devtools 查看该 effect 的依赖列表，确认是否包含你不希望它依赖的字段
- 临时改用
watch显式指定 source，缩小影响范围，定位问题源头
