updated钩子本身不会死循环，死循环源于其中修改响应式引用类型数据且无防重控制；Vue通过内存地址变化触发新更新，导致updated反复执行，最终报“Maximum recursive updates exceeded”。

updated 钩子本身不会死循环，死循环的根源是你在它里面改了响应式数据——尤其是引用类型，而且没做防重或退出控制。

为什么 updated 里改数据会触发死循环

updated 是 DOM 更新完成后的回调，Vue 已完成一次响应式更新。但如果你在里面执行类似 this.list = [this.list] 或 this.obj.name = 'new' 这类操作：

• 引用类型（对象、数组）赋值时，Vue 比较的是内存地址；每次新创建的对象/数组地址都不同 → 触发新一轮响应式更新
• 新一轮更新又走到 updated → 你又改数据 → 再更新 → 无限套娃
• Vue 默认限制最多 100 次递归更新，超限就报 “Maximum recursive updates exceeded”

哪些写法看似安全实则危险

这些代码在开发中很常见，但都埋着死循环雷：

vue-composition-api-best-practices

Vue 3 组合式 API 与 最佳实践，涵盖代码组织、useXxx 模式、组合式函数设计、Store 集成、响应式优化及功能抽取。

下载

• 在 updated 中调用接口并直接赋值：请求返回后 this.data = res.data → 更新 → 再 updated → 再请求
• 用 computed 或模板表达式里修改响应式变量：比如 {{ list.push(item) }}，每次渲染都 push，list 变长，反复触发更新
• watch 监听一个 ref，回调里又给它赋新值且无条件限制：如 watch(count, () => count.value++)，没有 if 判断就必然死循环
• 嵌套循环中直接修改被遍历的响应式数组项：例如 v-for="item in list" @click="item.status = 'done'"，若 list 是响应式对象数组，频繁点击可能叠加触发

真正靠谱的替代方案

别硬扛 updated，换更可控的时机和方式：

立即学习“前端免费学习笔记（深入）”；

• 用 watch 替代 updated 做“变化后响应”：监听具体字段，加条件判断或使用 immediate: false 避免初始触发
• 异步操作放 created/mounted + nextTick：需要操作 DOM 时，用 this.$nextTick(() => {}) 确保 DOM 渲染完毕，不污染更新流
• 路由参数变更用 beforeRouteUpdate：避免在 updated 里监听 route.query，该钩子专为“复用组件+参数变”设计
• 复杂逻辑抽离到方法或事件中：比如按钮点击才刷新列表，而不是让更新自动触发刷新

调试和验证小技巧

遇到疑似死循环，快速定位：

• 在 updated 里加 console.count('updated')，看是否连续飙升（>50 次基本可断定）
• 把疑似修改响应式数据的语句临时注释掉，观察是否还触发
• 用 Vue Devtools 查看 “Reactivity” 面板，观察哪个属性在高频 setter
• 检查是否误将 data() 返回的对象写成共享引用（如导出 const obj = {}），导致多个组件共用同一份响应式状态