Vue 更新次数超限？一文搞懂“Max updates exceeded”背后死循环与 3 分钟修复法
正文目录
- 报错含义：什么是“Max updates exceeded”
- 常见死循环场景 & 现场复原
- 3 步定位 + 修复方案（含代码）
- 预防 checklist（不再踩坑）
- 一句话总结
一、报错含义：什么是“Max updates exceeded”
当你在控制台看到：
[Vue warn]: Maximum recursive updates exceeded. 这意味着你有一段代码在**本轮更新周期内反复修改响应式数据**，超过 Vue 设定的阈值（默认约 100 次）。 本质：**响应式副作用死循环**。 --- ## 二、常见死循环场景 & 现场复原 ### ① 计算属性里修改自身依赖 ```vue <script setup> const a = ref(1) // ❌ 计算属性里又改自己依赖的响应式数据 const b = computed(() => { a.value++ // 读 a → 触发计算 → 又改 a → 又触发计算 ... return a.value * 2 }) </script>修复：计算属性只做纯计算，副作用挪到watch/ 事件。
② watch 里循环赋值
<script setup> const count = ref(0) // ❌ watch 里又改自己 watch(count, (newVal) => { count.value = newVal + 1 // 改自己 → 又触发 watch → 死循环 }) </script>修复：用watch的终止条件或watchEffect+ 判断。
watch(count,(newVal)=>{if(newVal<10)count.value=newVal+1// ✅ 有退出条件})③ 模板里调用副作用方法
<template> <!-- ❌ 渲染阶段改响应式数据 --> <div>{{ computeAndModify() }}</div> </template> <script setup> const list = ref([1, 2, 3]) function computeAndModify() { list.value.push(list.value.length); // 渲染 → 改数据 → 再渲染 ... return list.value.length; } </script>修复：不要在模板/计算属性里改响应式数据；用事件或watch。
④ 双向绑定死循环（v-model 自循环）
<!-- 父 --> <MyInput v-model="num" /> <!-- 子 --> <script setup> const props = defineProps(['modelValue']) const emit = defineEmits(['update:modelValue']) // ❌ input 事件里又改自己 prop 并 emit const onInput = (e) => { emit('update:modelValue', Number(e.target.value) + 1) } </script>修复：不要 emit 比输入更大的值；或加阈值判断。
三、3 步定位 + 修复方案
- 看堆栈：控制台点击堆栈 → 找到反复触发的函数/计算属性/watcher。
- 加判断：在修改数据前加
if (newVal === oldVal) return或计数器退出。 - 移副作用：把「改数据」挪到事件、watch、nextTick，不要在计算/渲染阶段改响应式数据。
快速止血模板：
watch(count,(newVal,oldVal)=>{if(newVal===oldVal)return;// 1. 值没变if(newVal>100)return;// 2. 上限退出count.value=newVal+1;// 3. 真正的业务});四、预防 checklist
- 计算属性纯函数，不改外部状态
watch/watchEffect里有退出条件- 模板里不调副作用函数（只读数据）
- 双向绑定不 emit 比输入更大的值
- 复杂链式反应用
nextTick打散
五、一句话总结
「Max updates exceeded」= 响应式死循环。
把「改数据」挪出计算/渲染阶段，加退出条件，让更新停在 100 次以内，Vue 立刻安静。
最后问候亲爱的朋友们，并邀请你们阅读我的全新著作
📚 《Vue.js 3企业级项目开发实战（微课视频版》
