Vue3报Maximum recursive updates exceeded警告排查求助

你遇到的递归更新警告，是因为在模板渲染阶段直接修改了响应式变量evenOddCount：evenOddCount++属于响应式数据的写操作，Vue在渲染模板时只要检测到响应式数据变更，就会触发新一轮渲染，新一轮渲染又会再次执行evenOddCount++，陷入无限更新循环，因此抛出该警告。你当前能拿到正确值是因为Vue内置了递归更新次数限制，到阈值后会强制终止更新，第一次渲染的计算结果刚好保留下来，但这个风险始终存在。

方案1：预计算索引（最推荐） #

通过计算属性把两层嵌套的列表打平，提前给每一项分配好序号，渲染时直接读取预计算的索引值，完全避免渲染过程中的数据修改，无任何副作用：

修改script部分 #

computed: {
    ...mapGetters('projects', { projects: 'getAllProjects' }),
    flatLaneItems() {
        let count = -1
        const list = []
        this.projects.forEach(project => {
            project.components.forEach(component => {
                list.push({
                    project,
                    component,
                    index: ++count
                })
            })
        })
        return list
    }
}

修改template部分 #

<template>
    <grid-swim-lane
        v-for="item in flatLaneItems"
        :key="`${item.project.id}-${item.component.id}`"
        :project="item.project"
        :component="item.component"
        :grid-row-even-odd-count="item.index"
    />
</template>

方案2：使用非响应式计数器（改动最小） #

如果不想调整原有循环结构，把计数器改为非响应式即可，修改非响应式变量不会触发重渲染，自然不会陷入循环：

修改script部分 #

export default {
    components: { GridSwimLane },
    // 移除data中的evenOddCount声明，改为在created中挂载非响应式属性
    created() {
        this.evenOddCount = -1
    },
    // 每次组件更新前重置计数器，避免重复累加
    beforeUpdate() {
        this.evenOddCount = -1
    },
    computed: {
        ...mapGetters('projects', { projects: 'getAllProjects' })
    },
}

template部分不需要做任何修改，保持原有写法即可。 #

内容的提问来源于stack exchange，提问作者Daniel