一:递归的概念
递归,在数学与计算机科学中,是指在方法的定义中使用方法自身。也就是说,递归算法是一种直接或者间接调用自身方法的算法。简言之:在定义自身的同时又出现自身的直接或间接调用。
注意:递归必须要有一个退出的条件!
递归算法解决问题的特点:
- 递归就是方法里调用自身
- 在使用递归策略时,必须有一个明确的递归结束条件,称为递归出口。
- 递归算法解题通常显得很简洁,但递归算法解题的运行效率较低
- 在递归调用的过程中,系统为每一层的返回点、局部变量等开辟了栈来存储。递归次数过多容易造成栈溢出等,所以一般不提倡使用递归算法设计程序。
在做递归算法的时候,一定要把握住出口,也就是做递归算法必须要有一个明确的递归结束条件。这一点是非常重要的。其实这个出口是非常好理解的,就是一个条件,当满足了这个条件的时候我们就不再递归了。
二:实际项目运用
在项目中可以使用到递归来完成一些需要多次调用自身的设计
1.在设计菜单时可以使用到递归来解决
如以下情况:
设计一个侧边菜单,需要分为一级,二级,三级等菜单,此时多级菜单需要不断的调用自身的子菜单来分下一级菜单。
代码如下:
<template v-for="(item, index) in menuList" :key="item.path">
<!-- 没有子路由 -->
<template v-if="!item.children" >
<el-menu-item :index="item.path" v-if="!item.meta.hidden">
<template #title>
<span>标 </span>
<span>{
{ item.meta.title }}</span>
</template>
</el-menu-item>
</template>
<!-- 有子路由,但是只有一个子路由 -->
<template v-if="item.children && item.children.length == 1">
<el-menu-item
v-if="item.children[0].meta.hidden"
:index="item.children[0].path"
>
<template #title>
<span>{
{ item.children[0].meta.title }}</span>
</template>
</el-menu-item>
</template>
<!-- 有子路由且个数大于一个 -->
<el-sub-menu
:index="item.path"
v-if="item.children && item.children.length > 1"
>
<template #title>
<span>{
{ item.meta.title }}</span>
</template>
</el-sub-menu>
</template>
在设计多级菜单的时候,我们可以用递归的方法来解决。
需要将整个template设计为一个<Menu>组件来进行
代码如下:
//设计多级菜单
<el-sub-menu
:index="item.path"
v-if="item.children && item.children.length > 1"
>
<template #title>
<span>{
{ item.meta.title }}</span>
</template>
<Menu :menuList="item.children"></Menu>
</el-sub-menu>
其中<Menu>组件就是在不断调用自身来解决多级菜单的问题