Vue.js 响应式系统中避免副作用循环触发的技巧

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 后又试图响应其子属性，都会中断依赖链