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

问题描述

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

什么是递归

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

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

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

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

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

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

vue组件中使用递归

效果图

代码部分

App.vue组件入口页面代码

<template>
  <div>
    <!-- 传递数据到用来做递归的组件 -->
    <tree :data="data"></tree>
  </div>
</template>

<script>
// 引入递归组件
import tree from "./tree.vue";
export default {
  name: "App",
  components: { tree }, // 注册递归组件
  data() {
    return {
      /*  
        假设data是我们向后端发请求获取的数据，
        我们需要把这个数据通过props的方式传递给用来做递归组件的.vue文件
        这里要注意一下数据字段结构（实际工作中这里需要和后端商量定规则）
      */ 
      data: [
        {
          name: "西游记",
          children: [
            {
              name: "孙悟空",
              children: [
                {
                  name: "筋斗云",
                },
                {
                  name: "金箍棒",
                },
                {
                  name: "紧箍咒",
                },
              ],
            },
            { name: "沙和尚" },
            { name: "白龙马" },
            { name: "唐僧" },
          ],
        },
        {
          name: "三国演义",
          children: [
            { name: "刘备" },
            {
              name: "关羽",
              children: [
                { name: "一技能" },
                { name: "二技能" },
                { name: "大招" },
              ],
            },
            {
              name: "张飞",
            },
            {
              name: "小鲁班",
              children: [
                { name: "福禄兄弟" },
                { name: "木偶奇遇记" },
                { name: "电玩小子" },
                { name: "星空梦想" },
                { name: "狮舞东方" },
                { name: "乒乓小将" },
              ],
            },
          ],
        },
        {
          name: "水浒传",
          children: [
            { name: "宋江" },
            { name: "鲁智深" },
            {
              name: "武松",
              children: [
                {
                  name: "喝酒",
                },
                {
                  name: "打老虎",
                },
              ],
            },
          ],
        },
      ],
    };
  },
};
</script>

tree.vue递归组件中的代码

注释如下图：

代码如下：

<template>
  <ul>
    <li v-for="(item, index) in data" :key="index">
      {{ item.name }}
      <!-- 在遍历时递归调用组件自身，当然，要有children，有数据的时候才去递归调用自身(递归需要有一个结束条件) -->
      <template v-if="item.children">
        <tree :data="item.children"></tree>
        <!-- 因为组件调用渲染，需要有数据，而这个tree.vue组件是的数据是通过props接收的，
        所以需要把子内容数据再传递给子组件，子组件用props接收，就能够一层一层的渲染了 -->
      </template>
    </li>
  </ul>
</template>

<script>
export default {
  name: "tree",
  props: {
    data: {
      type: Array,
      default() {
        return [];
      },
    },
  },
};
</script>

总结

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