寫本篇文章之前其實也關注過vue中的一個關于加載動態組件is的API，最開始研究它只是用來實現一個tab切換的功能，使用起來也蠻不錯的。

is

預期：string | Object (組件的選項對象)

用于動態組件且基于 DOM 內模板的限制來工作。

示例：

<!-- 當 `currentView` 改變時，組件也跟著改變 --><component v-bind:is="currentView"></component>

詳見vue API中關于is的定義和用法

至于用在tab切換中，大概就是：

<template> <div> 　　<div>#動態組件實現tab切換效果#</div><br><br><br> 　　　　<nav> 　　　　　　<a href="javascript:void(0);" rel="external nofollow" rel="external nofollow" rel="external nofollow" @click="toggleTabs(first);">{{first}}</a>   　 　　<a href="javascript:void(0);" rel="external nofollow" rel="external nofollow" rel="external nofollow" @click="toggleTabs(second);">{{second}}</a>   　　　 <a href="javascript:void(0);" rel="external nofollow" rel="external nofollow" rel="external nofollow" @click="toggleTabs(third);">{{third}}</a> 　　　　</nav>　　　　　<first :is="currentView" keep-alive></first>　　 </div></template><script>import first from 'components/first';import second from 'components/second';import third from 'components/third';export default {  data () {    return {     first: "first",    second: "second",    third: "third",    currentView: 'first',    };   },   components: {     first,    second,    third   },   methods: {    toggleTabs (tabText) {     this.currentView = tabText;    }   } }</script>

但是今天，一個前端同行在群里問我“如果當前頁面是根據傳進來的參數的不同而顯示不同的組件，而且當前頁面中可能會import進來幾十個子組件，而我又不想挨個去import這些組件，同時這些組件又是按需加載的，該咋實現？” 說實話，一開始我也懵了。

我在想，實在不行就用const demo = () => import ( './demo.vue')，或者在組件的components:中按需引入：

components: { demo: () => import ( './demo.vue')}

但是我一想，也不對啊，這樣雖然能實現按需加載，但是還是要挨個import這些組件，還是沒有解決實際的問題。

經過查閱資料發現，vue有一個extend的方法可以實現。那么這個extend方法到底是干嘛的？

Vue.extend( options )

Vue.extend 返回的是一個“擴展實例構造器”,也就是預設了部分選項的Vue實例構造器。經常服務于Vue.component用來生成組件，可以簡單理解為當在模板中遇到該組件名稱作為標簽的自定義元素時，會自動調用“擴展實例構造器”來生成組件實例，并掛載到自定義元素上。