Vue 遞歸組件

什麼是遞歸？

程序調用自身的編程技巧稱爲遞歸（ recursion）。

構成遞歸需具有的條件：

• 化繁爲簡：子問題須與原始問題爲一樣的事，且更爲簡單；
• 出口：不能無限制地調用自己，須有個出口，化簡爲非遞歸情況處理。

以用 JavaScript 求解斐波那契數列做爲例子，瞭解遞歸。

斐波那契數列的遞推關係：

JavaScript 代碼實現：

function fibonacci(n) {
    if (n === 0 || n === 1) {
        return n;  // 出口
    }
    return fibonacci(n - 1) + fibonacci(n - 2); // 化繁爲簡
}

經過對 JavaScript 代碼進行 Debug，能夠發現遞歸最重要的就是：一、化繁爲簡；二、出口。

化繁爲簡就是將問題分解；出口必定要有，若是沒有出口或者調用層級過深都會致使 stack overflow。

---

什麼是遞歸組件？

遞歸組件就是指組件在模板中調用本身。

遞歸都須要 化繁爲簡 和 出口 ，遞歸組件的化繁爲簡很簡單，只須要指定組件的 name 屬性便可；遞歸組件的出口也很簡單，就是經過 v-if 指定遞歸的終點。

容器：

<template>
  <div>
    <recursion :tree="tree"></recursion>
  </div>
</template>

<script>
import recursion from '@/components/VueDataStream/recursion.vue'
export default {
  name: 'HelloWorld',
  data () {
    return {
      tree: [{
        label: '一級 1',
        children: [{
          label: '二級 1-1',
          children: [{
            label: '三級 1-1-1',
            children: [{
              label: '四級 1-1-1'
            }]
          }]
        }]   
      }]
    }
  },
  components: {
    recursion
  }
}
</script>

遞歸組件：

<template>
  <ul>
    <li v-for="item in tree" :key="item.label">
      <div>{{item.label}}</div>
      <recursion v-if="item.children" :tree="item.children"></recursion>
    </li>
  </ul>
</template>

<script>
export default {
  name: 'recursion',
  props: {
    tree: {
      type: Array,
      default: () => []
    }
  }
}
</script>

---

遞歸組件有什麼用？

Tree 樹形控件

Cascader 級聯選擇器

參考

• 遞歸組件
• tree-node