问题遇到的现象和发生背景
在花裤衩的后台管理项目中，做到更改权限时遇到一直递归渲染 SideBarItem 组件导致超出了最大递归更新
问题相关代码，请勿粘贴截图
更改权限部分的代码
<template>
<div class="changeRoles-container">
<el-switch v-model="identify" active-value="super" inactive-value="common" :active-text="'super admin'"
:inactive-text="'common admin'">
</el-switch>
</div>
</template>
<script setup>
const identify = computed({
get () {
return store.state.user.roles[0].slice(0, 5)
},
set (val) {
store.dispatch('user/changeRoles', val)
router.push({ path: '/Permission/ChangeRoles' })
}
})
</script>
递归渲染部分
```vue
子组件：
<template>
<div v-if="!item?.hidden" class="sideBar-item-container">
<template v-if="hasOneShowingChild(item?.children, item)">
<app-link v-if="onlyOneChild?.meta" :to="resolvePath(onlyOneChild?.path)">
<el-menu-item :index="resolvePath(onlyOneChild.path)">
<IconItem :icon="onlyOneChild.meta.icon || (item.meta && item.meta.icon)" />
<template v-if="onlyOneChild?.meta" #title>
<span class="onlyOneChild-title" style="font-weight: 600">{{ onlyOneChild.meta?.title }}</span>
</template>
</el-menu-item>
</app-link>
</template>
<el-sub-menu v-else ref="subMenu" :index="resolvePath(item.path)">
<template v-slot:title>
<IconItem v-if="item.meta" :icon="item.meta && item.meta.icon" />
<span class="parent-title" v-if="item?.meta">{{ item.meta?.title }}</span>
</template>
<SideBarItem v-for="child in item.children" :key="child.name" :item="child"
:base-path="resolvePath(child.path)" />
</el-sub-menu>
</div>
</template>
父组件:
<SideBarItem v-for="route in routes" :key="route.name" :item="route" :base-path="route.path" />
<script>
import SideBarItem from './SideBarItem.vue'
setup () {
const permissionState = useState('permission', ['routes'])
return {
variables,
...settingsState,
...permissionState,
activeMenu
}
}
}
###### 运行结果及报错内容
```javascript
javascript
Maximum recursive updates exceeded in component <SideBarItem>. This means you have a reactive effect that is mutating its own dependencies and thus recursively triggering itself. Possible sources include component template, render function, updated hook or watcher source function.
每当我进入更改权限页面时就会出现这24个warn（路由中有24个分组）
我的解答思路和尝试过的方法
我想知道是具体什么原因造成的，我猜测是因为computed 依赖的缘故，每次进入该页面时都会去遍历所有路由一遍，为啥造成这样有望提点提点……
