Vue.js 响应式系统内置防循环机制，但需开发者配合合理模式避免副作用函数重复触发或死循环；其核心是 trigger 时过滤 self-invocation，仅对同一 effect 内读写有效，跨 effect 或间接依赖仍需手动规避。
Vue.js 响应式系统本身已内置防循环机制，但开发者仍需配合使用合理模式，才能真正避免副作用函数（如 watchEffect、computed、渲染函数）因读写同源导致的重复触发或死循环。
理解触发闭环的根源
循环触发不是语法错误，而是逻辑闭环：同一个 effect 既读取又修改了同一响应式字段。例如 data.count++ 在 effect 内执行时，会先 track 记录自己为依赖，再 trigger 通知自己更新——若不拦截，就会形成“自己通知自己→再次执行→再通知”的无限链。
Vue 3 的 trigger 函数内部已强制过滤：只执行 effectFn !== activeEffect 的副作用，这从源头阻断了自调用。但该守卫仅对“同一 effect 内读写”有效，无法覆盖跨 effect 或间接依赖形成的循环。
避免 watch / watchEffect 中的隐式循环
常见错误是监听某值后直接修改它，或修改其上游依赖：
立即学习“前端免费学习笔记（深入）”；
- 不要在
watch(() => obj.a, () => obj.a = newValue)中直接赋值原监听路径 - 避免
watchEffect(() => { count.value++; })—— 这等价于obj.foo++，必然触发自身 - 若需衍生计算并同步更新，改用
computed+ref分离读写职责，例如：const derived = computed(() => source.value * 2);<br>const synced = ref(derived.value); // 后续仅更新 synced，不反向影响 source
更新 DOM 后操作数据要加防护
updated 钩子中修改响应式数据极易引发重渲染循环，因为 DOM 更新完成即触发新一轮依赖收集，此时赋值会立刻启动 diff 流程：
- 用缓存比对：记录上一次处理依据（如
lastHeight.value = $el.offsetHeight），仅当变化时才更新状态 - 延迟执行：配合
nextTick把副作用推到下次 DOM 更新前，避开当前渲染周期 - 优先用
watch替代updated：监听 DOM 尺寸变化（如 ResizeObserver）再驱动状态更新，更可控
调试与验证是否真被触发
有时“没执行”不是防循环生效，而是依赖未建立成功：
- 确认数据是通过
ref、reactive创建，解构后要用toRefs保持响应性 - 检查属性是否首次访问时条件为假（如
v-if="item?.price"），导致track未发生，后续赋值不会trigger - 异步操作中修改原始对象（绕过 proxy）、使用
markRaw后又试图响应其子属性，都会中断依赖链
