Vue生命周期updated钩子为什么会死循环?教你正确的避坑姿势

夏强小哥_1753

夏强小哥_1753

2026-05-30

459人浏览

原创

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

vue生命周期updated钩子为什么会死循环?教你正确的避坑姿势

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-composition-api-best-practices

Vue 3 组合式 API 与

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
uni-app快速上手
uni-app快速上手

共0课时 | 0人学习

Vue 教程
Vue 教程

共42课时 | 17.2万人学习

Vue3.x 工具篇--十天技能课堂
Vue3.x 工具篇--十天技能课堂

共26课时 | 2.5万人学习