遞歸組件
遞歸組件就是指組件在模板中調用自己，開啟遞歸組件的必要條件，就是在組件中設置一個 name 選項。比如下面的示例：
在 Webpack 中導入一個 Vue.js 組件，一般是通過 import myComponent from 'xxx' 這樣的語法，然後在當前組件（頁面）的 components: { myComponent } 裡註冊組件。這種組件是不強制設置 name 字段的，組件的名字都是使用者在 import 進來後自定義的，但遞歸組件的使用者是組件自身，它得知道這個組件叫什麼，因為沒有用 components 註冊，所以 name 字段就是必須的了。除了遞歸組件用 name，一些特殊的方法，通過遍歷匹配組件的 name 選項來尋找組件實例。
不過呢，上面的示例是有問題的，如果直接運行，會拋出 max stack size exceeded 的錯誤，因為組件會無限遞歸下去，死循環。解決這個問題，就要給遞歸組件一個限制條件，一般會在遞歸組件上用 v-if 在某個地方設置為 false 來終結。比如我們給上面的示例加一個屬性 count，當大於 5 時就不再遞歸：
所以，總結下來，實現一個遞歸組件的必要條件是：
- 要給組件設置 name；
- 要有一個明確的結束條件
遞歸組件常用來開發具有未知層級關係的獨立組件，在業務開發中很少使用。比如常見的有級聯選擇器和樹形控件：
這類組件一般都是數據驅動型的，父級有一個字段 children，然後遞歸。
動態組件
有的時候，我們希望根據一些條件，動態地切換某個組件，或動態地選擇渲染某個組件。 Vue.js 提供了另外一個內置的組件 <component> 和 is 特性，可以更好地實現動態組件。/<component>
先來看一個 <component> 和 is 的基本示例，首先定義三個普通組件：/<component>
然後在父組件中導入這 3 個組件，並動態切換：
這裡的 is 動態綁定的是一個組件對象（Object），它直接指向 a / b / c 三個組件中的一個。除了直接綁定一個 Object，還可以是一個 String，比如標籤名、組件名。下面的這個組件，將原生的按鈕 button 進行了封裝，如果傳入了 prop: to，那它會渲染為一個
使用組件：
最終會渲染出一個原生的 <button> 按鈕和兩個原生的鏈接 /<button>
i-button 組件中的 <component> is 綁定的就是一個標籤名稱 button / a，並且通過 v-bind 將一些額外的屬性全部綁定到了 <component> 上。/<component>/<component>
再回到第一個 a / b / c 組件切換的示例，如果這類的組件，頻繁切換，事實上組件是會重新渲染的，比如我們在組件 A 里加兩個生命週期：
只要切換到 A 組件，mounted 就會觸發一次，切換到其它組件，beforeDestroy 也會觸發一次，說明組件再重新渲染，這樣有可能導致性能問題。為了避免組件的重複渲染，可以在 <component> 外層套一個 Vue.js 內置的 <keep-alive> 組件，這樣，組件就會被緩存起來：/<keep-alive>/<component>
<keep-alive>
<component>
/<keep-alive>
這時，只有 mounted 觸發了，如果不離開當前頁面，切換到其它組件，beforeDestroy 不會被觸發，說明組件已經被緩存了。
keep-alive 還有一些額外的 props 可以配置：
- include：字符串或正則表達式。只有名稱匹配的組件會被緩存。
- exclude：字符串或正則表達式。任何名稱匹配的組件都不會被緩存。
- max：數字。最多可以緩存多少組件實例。
結語
還有一類是異步組件。事實上異步組件我們用的很多，比如 router 的配置列表，一般都是用的異步組件形式：
{
path: '/form',
component: () => import('./views/form.vue')
}
這樣每個頁面才會在路由到時才加載對應的 JS 文件，否則入口文件會非常龐大。
遞歸組件、動態組件和異步組件是 Vue.js 中相對冷門的 3 種組件模式，不過在封裝複雜的獨立組件時，前兩者會經常使用。
閱讀更多 代碼開發 的文章
