Vue.js报错-Maximum-recursive-updates-exceeded-育师

Vue.js 报错：Maximum recursive updates exceeded in component

一句话总结：用「watch + computed + nextTick」三件套，让响应式更新不再无限递归，警告瞬间消失！

正文目录

报错含义：Vue 在警告什么「递归更新」？
5 大高频翻车场景 & 修复代码
万能兜底：watch、computed、nextTick
预防 checklist（不再踩坑）
一句话总结

一、报错含义：Vue 在警告什么「递归更新」？

当你在控制台看到：

Maximum recursive updates exceeded in component <xxx>. This means you have a reactive effect that is mutating its own dependency and recursively triggering itself.

Vue 在告诉你：

「你的响应式逻辑形成了无限循环 —— A 修改了 B，B 变化又触发修改 A，A 又修改 B……死循环了！」

Vue 内置了递归保护机制，当同一个组件的渲染函数被递归触发超过 100 次时，就会抛出此警告并停止更新。

本质：响应式依赖形成了循环引用。

二、5 大高频翻车场景 & 修复代码

① watch 修改了被监听的数据 —— 自我递归

<script setup> import { ref, watch } from 'vue'; const count = ref(0); // ❌ watch 修改了被监听的 count，count 变化又触发 watch watch(count, (newVal) => { count.value = newVal + 1; // ❌ 死循环 }); </script>

修复：用中间变量或条件退出

<script setup> import { ref, watch } from 'vue'; const count = ref(0); // ✅ 加退出条件，避免无限递归 watch(count, (newVal) => { if (newVal >= 10) return; // ✅ 有上限 count.value = newVal + 1; }); </script>

② computed 里修改了依赖的响应式数据

<script setup> import { ref, computed } from 'vue'; const price = ref(100); const count = ref(2); // ❌ computed 中修改了依赖的 price const total = computed(() => { price.value = price.value + 10; // ❌ 修改依赖 → 死循环 return price.value * count.value; }); </script>

修复：computed 只读，不修改依赖

<script setup> import { ref, computed } from 'vue'; const price = ref(100); const count = ref(2); // ✅ computed 只做计算，不修改依赖 const total = computed(() => price.value * count.value); // ✅ 需要修改 price，用 watch 或事件 function updatePrice() { price.value += 10; } </script>

③ 模板中绑定了互相依赖的数据

<script setup> import { ref, computed } from 'vue'; const firstName = ref('张'); const lastName = ref('三'); // ❌ fullName 依赖 firstName，firstName 又依赖 fullName const fullName = computed(() => { firstName.value = fullName.value; // ❌ 互相依赖 return firstName.value + lastName.value; }); </script>

修复：单向数据流，避免互相依赖

<script setup> import { ref, computed } from 'vue'; const firstName = ref('张'); const lastName = ref('三'); // ✅ 单向依赖：fullName 依赖 firstName，但 firstName 不依赖 fullName const fullName = computed(() => firstName.value + lastName.value); // ✅ 需要反向更新，用 watch watch(fullName, (val) => { // 单独处理 }); </script>

④ watch 监听 computed，又在回调中修改 computed 的源数据

<script setup> import { ref, computed, watch } from 'vue'; const list = ref([1, 2, 3]); // ❌ doubleList 依赖 list，watch 修改 list → doubleList 变化 → watch 触发 const doubleList = computed(() => list.value.map(i => i * 2)); watch(doubleList, () => { list.value.push(list.value.length + 1); // ❌ 修改源数据 → 死循环 }); </script>

修复：监听不同数据源，或用 once 标志

<script setup> import { ref, computed, watch } from 'vue'; const list = ref([1, 2, 3]); const doubleList = computed(() => list.value.map(i => i * 2)); // ✅ 监听 doubleList 的长度而非内容，或加条件 watch(() => doubleList.value.length, (newLen, oldLen) => { if (newLen === oldLen) return; // ✅ 避免无意义触发 // 只在真正需要时更新 }); </script>

⑤ 组件 props 和 emit 形成循环

<!-- 父组件 --> <script setup> import { ref } from 'vue'; import Child from './Child.vue'; const value = ref(''); const handleUpdate = (val) => { value.value = val.toUpperCase(); // ❌ 转换后又传给子组件 → 子组件 emit → 再传回 }; </script> <template> <Child :modelValue="value" @update:modelValue="handleUpdate" /> </template>

<!-- 子组件 --> <script setup> const props = defineProps(['modelValue']); const emit = defineEmits(['update:modelValue']); // ❌ watch props 变化后立即 emit，父组件又修改 → 循环 watch(() => props.modelValue, (val) => { emit('update:modelValue', val.toLowerCase()); // ❌ 死循环 }); </script>

修复：子组件不做反向转换，或用 computed 只读

<!-- 子组件（修复版） --> <script setup> import { computed } from 'vue'; const props = defineProps(['modelValue']); const emit = defineEmits(['update:modelValue']); // ✅ 用 computed 展示转换后的值，不 emit 回去 const displayValue = computed(() => props.modelValue.toLowerCase()); // ✅ 只在用户输入时 emit function handleInput(e) { emit('update:modelValue', e.target.value); } </script>

三、万能兜底：watch、computed、nextTick

场景	工具	示例
需要修改被监听的数据	watch + 条件退出	`if (val >= 10) return;`
需要派生数据	computed（只读）	`computed(() => a + b)`
需要延迟更新	nextTick	`nextTick(() => { ... })`
需要批量更新	watch + flush:‘post’	`watch(src, fn, { flush: 'post' })`

万能模板：

<script setup> import { ref, watch, nextTick } from 'vue'; const data = ref(null); // ✅ 万能模板：条件退出 + nextTick 延迟 watch(data, async (newVal) => { if (!newVal) return; // ✅ 条件退出 await nextTick(); // ✅ 延迟到 DOM 更新后 // 安全地修改数据 }); </script>