遞歸組件與動態(tài)組件

遞歸組件

遞歸組件就是指組件在模板中調(diào)用自己，開啟遞歸組件的必要條件，就是在組件中設置一個 name 選項。比如下面的示例：

<template>
  <div>
    <my-component></my-component>
  </div>
</template>
<script>
  export default {
    name: 'my-component'
  }
</script>

在 Webpack 中導入一個 Vue.js 組件，一般是通過 import myComponent from 'xxx' 這樣的語法，然后在當前組件（頁面）的 components: { myComponent } 里注冊組件。這種組件是不強制設置 name 字段的，組件的名字都是使用者在 import 進來后自定義的，但遞歸組件的使用者是組件自身，它得知道這個組件叫什么，因為沒有用 components 注冊，所以 name 字段就是必須的了。除了遞歸組件用 name，我們在之前的小節(jié)也介紹過，用一些特殊的方法，通過遍歷匹配組件的 name 選項來尋找組件實例。

不過呢，上面的示例是有問題的，如果直接運行，會拋出 max stack size exceeded 的錯誤，因為組件會無限遞歸下去，死循環(huán)。解決這個問題，就要給遞歸組件一個限制條件，一般會在遞歸組件上用 v-if 在某個地方設置為 false 來終結。比如我們給上面的示例加一個屬性 count，當大于 5 時就不再遞歸：

<template>
  <div>
    <my-component :count="count + 1" v-if="count <= 5"></my-component>
  </div>
</template>
<script>
  export default {
    name: 'my-component',
    props: {
      count: {
        type: Number,
        default: 1
      }
    }
  }
</script>

所以，總結下來，實現(xiàn)一個遞歸組件的必要條件是：

• 要給組件設置 name；
• 要有一個明確的結束條件

遞歸組件常用來開發(fā)具有未知層級關系的獨立組件，在業(yè)務開發(fā)中很少使用。比如常見的有級聯(lián)選擇器和樹形控件：

image

這類組件一般都是數(shù)據(jù)驅(qū)動型的，父級有一個字段 children，然后遞歸。下一節(jié)的實戰(zhàn)，會開發(fā)一個樹形控件 Tree。

動態(tài)組件

有的時候，我們希望根據(jù)一些條件，動態(tài)地切換某個組件，或動態(tài)地選擇渲染某個組件。在之前小節(jié)介紹函數(shù)式組件 Functional Render 時，已經(jīng)說過，它是一個沒有上下文的函數(shù)，常用于程序化地在多個組件中選擇一個。使用 Render 或 Functional Render 可以解決動態(tài)切換組件的需求，不過那是基于一個 JS 對象（Render 函數(shù)），而 Vue.js 提供了另外一個內(nèi)置的組件 <component> 和 is 特性，可以更好地實現(xiàn)動態(tài)組件。

先來看一個 <component> 和 is 的基本示例，首先定義三個普通組件：

<!-- a.vue -->
<template>
  <div>
    組件 A
  </div>
</template>
<script>
  export default {

  }
</script>

<!-- b.vue -->
<template>
  <div>
    組件 B
  </div>
</template>
<script>
  export default {

  }
</script>

<!-- c.vue -->
<template>
  <div>
    組件 C
  </div>
</template>
<script>
  export default {

  }
</script>

然后在父組件中導入這 3 個組件，并動態(tài)切換：

<template>
  <div>
    <button @click="handleChange('A')">顯示 A 組件</button>
    <button @click="handleChange('B')">顯示 B 組件</button>
    <button @click="handleChange('C')">顯示 C 組件</button>

    <component :is="component"></component>
  </div>
</template>
<script>
  import componentA from '../components/a.vue';
  import componentB from '../components/b.vue';
  import componentC from '../components/c.vue';

  export default {
    data () {
      return {
        component: componentA
      }
    },
    methods: {
      handleChange (component) {
        if (component === 'A') {
          this.component = componentA;
        } else if (component === 'B') {
          this.component = componentB;
        } else if (component === 'C') {
          this.component = componentC;
        }
      }
    }
  }
</script>

這里的 is 動態(tài)綁定的是一個組件對象（Object），它直接指向 a / b / c 三個組件中的一個。除了直接綁定一個 Object，還可以是一個 String，比如標簽名、組件名。下面的這個組件，將原生的按鈕 button 進行了封裝，如果傳入了 prop: to，那它會渲染為一個 <a> 標簽，用于打開這個鏈接地址，如果沒有傳入 to，就當作普通 button 使用。來看下面的示例：

<!-- button.vue -->
<template>
  <component :is="tagName" v-bind="tagProps">
    <slot></slot>
  </component>
</template>
<script>
  export default {
    props: {
      // 鏈接地址
      to: {
        type: String,
        default: ''
      },
      // 鏈接打開方式，如 _blank
      target: {
        type: String,
        default: '_self'
      }
    },
    computed: {
      // 動態(tài)渲染不同的標簽
      tagName () {
        return this.to === '' ? 'button' : 'a';
      },
      // 如果是鏈接，把這些屬性都綁定在 component 上
      tagProps () {
        let props = {};

        if (this.to) {
          props = {
            target: this.target,
            href: this.to
          }
        }

        return props;
      }
    }
  }
</script>

使用組件：

<template>
  <div>
    <i-button>普通按鈕</i-button>
    <br>
    <i-button to="https://juejin.im">鏈接按鈕</i-button>
    <br>
    <i-button to="https://juejin.im" target="_blank">新窗口打開鏈接按鈕</i-button>
  </div>
</template>
<script>
  import iButton from '../components/a.vue';

  export default {
    components: { iButton }
  }
</script>

最終會渲染出一個原生的 <button> 按鈕和兩個原生的鏈接 <a>，且第二個點擊會在新窗口中打開鏈接，如圖：

image

i-button 組件中的 <component> is 綁定的就是一個標簽名稱 button / a，并且通過 v-bind 將一些額外的屬性全部綁定到了 <component> 上。

再回到第一個 a / b / c 組件切換的示例，如果這類的組件，頻繁切換，事實上組件是會重新渲染的，比如我們在組件 A 里加兩個生命周期：

<!-- a.vue -->
<template>
  <div>
    組件 A
  </div>
</template>
<script>
  export default {
    mounted () {
      console.log('組件創(chuàng)建了');
    },
    beforeDestroy () {
      console.log('組件銷毀了');
    }
  }
</script>

只要切換到 A 組件，mounted 就會觸發(fā)一次，切換到其它組件，beforeDestroy 也會觸發(fā)一次，說明組件再重新渲染，這樣有可能導致性能問題。為了避免組件的重復渲染，可以在 <component> 外層套一個 Vue.js 內(nèi)置的 <keep-alive> 組件，這樣，組件就會被緩存起來：

<keep-alive>
  <component :is="component"></component>
</keep-alive>

這時，只有 mounted 觸發(fā)了，如果不離開當前頁面，切換到其它組件，beforeDestroy 不會被觸發(fā)，說明組件已經(jīng)被緩存了。

keep-alive 還有一些額外的 props 可以配置：

• include：字符串或正則表達式。只有名稱匹配的組件會被緩存。
• exclude：字符串或正則表達式。任何名稱匹配的組件都不會被緩存。
• max：數(shù)字。最多可以緩存多少組件實例。

結語

還有一類是異步組件，Vue.js 文檔已經(jīng)介紹的很清楚了，可以閱讀文末的擴展閱讀 1。事實上異步組件我們用的很多，比如 router 的配置列表，一般都是用的異步組件形式：

{
  path: '/form',
  component: () => import('./views/form.vue')
}

這樣每個頁面才會在路由到時才加載對應的 JS 文件，否則入口文件會非常龐大。

遞歸組件、動態(tài)組件和異步組件是 Vue.js 中相對冷門的 3 種組件模式，不過在封裝復雜的獨立組件時，前兩者會經(jīng)常使用。

擴展閱讀

• 異步組件