递归组件的小心得

0. 递归与迭代

1. 递归

我调我自己，那就是递归。
没有结束条件就是无穷地递归下去，会造成堆栈溢出。

2. 迭代

迭代是重复反馈过程的活动，其目的通常是为了逼近所需目标或结果。每一次对过程的重复称为一次“迭代”，而每一次迭代得到的结果会作为下一次迭代的初始值。

3. 对比

递归与迭代都是基于控制结构：迭代用重复结构，而递归用选择结构。

举个例子吧：你要给某个小孩子买玩具。
递归：你自己不太了解小孩子的需求，为了缩小范围，让你的儿子去给孙子挑选。儿子比你强点有限，但依然不太了解小孩子的需求。为了缩小范围，你又让你孙子去挑选。如此这般，直到找到合适的玩具。
迭代：你挑了一件觉得不行，又挑了一件又不行。如此这般，直到找到合适的玩具。
所以一句话：递归是自己调用自己，每次旨在缩小问题规模。迭代是自己执行很多次，每次旨在更接近目标。

迭代是逐渐逼近，用新值覆盖旧值，直到满足条件后结束，不保存中间值，空间利用率高。
递归是将一个问题分解为若干相对小一点的问题，遇到递归出口再原路返回，因此必须保存相关的中间值，这些中间值压入栈保存，问题规模较大时会占用大量内存。

1. 递归组件

父组件
// RecursionCom.vue

<template>
  <div>
    <child-component :count="count" />
  </div>
</template>

<script>
import childComponent from "./childComponent.vue";
export default {
  name: "recursionCom",
  components: {
    childComponent
  },
  data() {
    return {
      count: 1,
    };
  },
};
</script>

子组件
// childComponent.vue

<template>
  <div class="child">
    <child-component :count="count + 1" v-if="count < 3"></child-component>
  </div>
</template>

<script>
export default {
  name: "child-component",
  props: ["count"],
  mounted(){
    console.log('c',this.count);
  }
};
</script>

控制台打印信息