vue.js 使用递归函数实现菜单树和处理数据的思路

vue.js 使用递归实现菜单树和处理数据等思路！
1.首先我们需要模拟数据如下（可直接复制）：

data() {
    return {
      data: {
        name: "所有",
        children: [
          {
            name: "电子产品",
            children: [
              {
                name: "iphone",
                children: [{ name: "iphone11" }, { name: "iphone12" }],
              },
            ],
          },
          {
            name: "出行",
            children: [
              {
                name: "汽车",
                children: [{ name: "大众" }, { name: "奥迪" }],
              },
            ],
          },
          {
            name: "生活用品",
            children: [
              {
                name: "电脑类",
                children: [{ name: "Mac电脑" }, { name: "华为电脑" }],
              },
              {
                name: "工具类",
                children: [{ name: "剪刀" }, { name: "菜刀" }],
              },
              {
                name: "生活用品",
                children: [{ name: "洗发水" }, { name: "洗脸帕" }],
              },
            ],
          },
        ],
      },
    };
  },

2.大家看到这种数据是不是很熟悉，有时候后端就会给我们返回这种数据，我们的需求呢？就是拿到最底层childern的数据？怎么拿呢？有小伙伴就会说直接每层循环不就好了？当然可以！如下：

 fn() {
      // 正常写法
      // 首先定义一个空数组 用来最后把我们的数据装进去
      let arr = [];
      this.data.children.forEach((item) => {
        // 循环最外层 此时的console.log(item,'item');肯定输出是 电子产品 出行 生活用品
        item.children.forEach((ele) => {
          // 到这里console.log(ele,'ele');输出的是item.下一层
          ele.children.forEach((c) => {
             // 到这里console.log(ele,'ele');ele.下一层 也是最后一层
             // 到最后一层我们就把每一项数组push到我们最开始定义的数组里面去 这样理论上的话我们的效果就实现了
            arr.push(c.name);
          });
        });
      });
      // 最后我们来打印验证一下
      console.log(arr,'arr');
      // 打印结果为：
      //  ['iphone11', 'iphone12', '大众', '奥迪', 'Mac电脑', '华为电脑', '剪刀', '菜刀', '洗发水', '洗脸帕'] 'arr'
    },

总结一下这种方法，虽然能够实现我们的需求，但是有几个问题，就是我们如果不能确定它是不是只有三层，如果还有四层呢？五层呢？那我们这个方法不就有bug了吗？还有就是这个方法看起来也不太优雅呀，太臃肿了，兄弟们！所以还是让我们有请今天主角递归登场把！！！
3.递归递归顾名思义递了就要归，可不能让它去了就不回来这可是不行的！所以呢我们在写的时候一定记得有一个结束条件哦！！！请看下面我们用递归方式来实现！！！

fn() {
      // 递归遍历实现
      // 同上定义一个空数组 用于接收提取的数据
      let arr = [];
      // 首先我们要明白递归函数是什么 递归函数简单来说就是 => 在函数体内调用本函数
      // 这里的list作为形参 等会儿用于我们调取这个函数的时候对这个函数进行传参
      const dg = function (list) {
        // 如果调用这个函数时我们对它进行了传参 那么现在的这个list肯定是个数组并且有值的 可以看我们最开始定义的假数据
        // 接下来我们对这个传入的list进行循环 为什么要循环我就不解释了把（ 要想拿数组的值 必须循环 ）
        list.forEach(function (item) {
          // 此时我们循环出来已经进入到里层了  由于事先我们看了这个数据的结构 那我们直接判断就好了
          // 如果item.children存在 那就证明 它还有children这个子级 我们需要再次将它循环解刨出来
          if (item.children) {
            // 再次调用dg这个函数 再走一遍
            dg(item.children);
          } else {
            // 如果循环出来的item 没有childen这个子级了 那么我们就给它push到我们定义的数组里去
            arr.push(item.name);
          }
        });
      };
      // 我们的假设思想就是这样了 最后我们来调用它 看能不能成功呢？
      dg(this.data.children);

      console.log(arr, "arr"); // 输出结果为['iphone11', 'iphone12', '大众', '奥迪', 'Mac电脑', '华为电脑', '剪刀', '菜刀', '洗发水', '洗脸帕'] 'arr'
    },

我们可以看到递归函数一样能实现处理数据并且比多层循环更优雅更灵活，那为什么不用呢？没有太明白的可以私信我，我给你解答。学起来把，兄弟们！！！