企业官网建设流程全解析

Vue 更新次数超限？一文搞懂“Max updates exceeded”背后死循环与 3 分钟修复法

正文目录

1. 报错含义：什么是“Max updates exceeded”
2. 常见死循环场景 & 现场复原
3. 3 步定位 + 修复方案（含代码）
4. 预防 checklist（不再踩坑）
5. 一句话总结

一、报错含义：什么是“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 步定位 + 修复方案

1. 看堆栈：控制台点击堆栈 → 找到反复触发的函数/计算属性/watcher。
2. 加判断：在修改数据前加if (newVal === oldVal) return或计数器退出。
3. 移副作用：把「改数据」挪到事件、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企业级项目开发实战（微课视频版》