vue组件的递归自调用~代码思路分析

---

theme: channing-cyan

问题描述

在我们使用vue开发项目时，有时候需要用到递归思想去书写代码。在一些UI组件中，我们也可以看到其中运用了递归的思想。比如：饿了么UI中的el-tree组件、el-menu组件（动态菜单栏）、el-Cascader组件。所以本文就举个简单的例子，来记录一下递归思想，在vue组件中的使用。

什么是递归

我们知道，一个函数可以调用别的函数，让别的函数执行；而递归就是：

某个函数不去调用别的函数了，只调用自己，让自身函数一直执行。

当然如果一直执行的话，会导致栈溢出问题，所以递归需要有一个结束的条件，当达到这个条件的时候，就让函数不再调用自身，就停下来即可。感觉和循环有点类似

递归、循环、死循环的区别理解

• 递归：无限套娃，当找到某个娃娃时，就不套了
• 循环：一直套娃，要把所有的娃娃都套了一遍，才停止下来不套了
• 死循环：一直套娃，但是娃娃一直套不完

  这里是我个人的简单理解，具体区别，以官方为准

vue组件中使用递归

效果图

代码部分

App.vue组件入口页面代码

```js

```

tree.vue递归组件中的代码

注释如下图：

代码如下：

```js

```

总结

递归还是比较耗费性能的，所以要妙用，不能滥用。