Vue 3.0 中如何使用動(dòng)態(tài)組件

這篇文章給大家介紹Vue 3.0 中如何使用動(dòng)態(tài)組件，內(nèi)容非常詳細(xì)，感興趣的小伙伴們可以參考借鑒，希望對(duì)大家能有所幫助。

一、組件注冊(cè)

1.1 全局注冊(cè)

在 Vue 3.0 中，通過(guò)使用 app 對(duì)象的 component 方法，可以很容易地注冊(cè)或檢索全局組件。component 方法支持兩個(gè)參數(shù)：

• name：組件名稱;

• component：組件定義對(duì)象。

接下來(lái)，我們來(lái)看一個(gè)簡(jiǎn)單的示例：

<div id="app">    <component-a></component-a>    <component-b></component-b>    <component-c></component-c> </div> <script>    const { createApp } = Vue    const app = createApp({}); // ①    app.component('component-a', { // ②      template: "<p>我是組件A</p>"    });    app.component('component-b', {      template: "<p>我是組件B</p>"    });    app.component('component-c', {      template: "<p>我是組件C</p>"    });    app.mount('#app') // ③ </script>

在以上代碼中，我們通過(guò) app.component 方法注冊(cè)了 3 個(gè)組件，這些組件都是全局注冊(cè)的  。也就是說(shuō)它們?cè)谧?cè)之后可以用在任何新創(chuàng)建的組件實(shí)例的模板中。

該示例的代碼比較簡(jiǎn)單，主要包含 3 個(gè)步驟：創(chuàng)建 App 對(duì)象、注冊(cè)全局組件和應(yīng)用掛載。其中創(chuàng)建 App  對(duì)象的細(xì)節(jié)，阿寶哥會(huì)在后續(xù)的文章中單獨(dú)介紹，下面我們將重點(diǎn)分析其他 2 個(gè)步驟，首先我們先來(lái)分析注冊(cè)全局組件的過(guò)程。

1.2 注冊(cè)全局組件的過(guò)程

在以上示例中，我們使用 app 對(duì)象的 component 方法來(lái)注冊(cè)全局組件：

app.component('component-a', {   template: "<p>我是組件A</p>" });

當(dāng)然，除了注冊(cè)全局組件之外，我們也可以注冊(cè)局部組件，因?yàn)榻M件中也接受一個(gè) components 的選項(xiàng)：

const app = Vue.createApp({   components: {     'component-a': ComponentA,     'component-b': ComponentB   } })

需要注意的是，局部注冊(cè)的組件在其子組件中是不可用的。接下來(lái)，我們來(lái)繼續(xù)介紹注冊(cè)全局組件的過(guò)程。對(duì)于前面的示例來(lái)說(shuō)，我們使用的 app.component  方法被定義在 runtime-core/src/apiCreateApp.ts 文件中：

export function createAppAPI<HostElement>(   render: RootRenderFunction,   hydrate?: RootHydrateFunction ): CreateAppFunction<HostElement> {   return function createApp(rootComponent, rootProps = null) {     const context = createAppContext()     const installedPlugins = new Set()     let isMounted = false      const app: App = (context.app = {       // 省略部分代碼       _context: context,        // 注冊(cè)或檢索全局組件       component(name: string, component?: Component): any {         if (__DEV__) {           validateComponentName(name, context.config)         }         if (!component) { // 獲取name對(duì)應(yīng)的組件           return context.components[name]         }         if (__DEV__ && context.components[name]) { // 重復(fù)注冊(cè)提示           warn(`Component "${name}" has already been registered in target app.`)         }         context.components[name] = component // 注冊(cè)全局組件         return app       },     })      return app   } }

當(dāng)所有的組件都注冊(cè)成功之后，它們會(huì)被保存到 context 對(duì)象的 components 屬性中，具體如下圖所示：

顧名思義 context 是表示應(yīng)用的上下文對(duì)象，那么該對(duì)象是如何創(chuàng)建的呢?其實(shí)，該對(duì)象是通過(guò) createAppContext 函數(shù)來(lái)創(chuàng)建的：

const context = createAppContext()

而 createAppContext 函數(shù)被定義在 runtime-core/src/apiCreateApp.ts 文件中：

// packages/runtime-core/src/apiCreateApp.ts export function createAppContext(): AppContext {   return {     app: null as any,     config: { // 應(yīng)用的配置對(duì)象       isNativeTag: NO,       performance: false,       globalProperties: {},       optionMergeStrategies: {},       isCustomElement: NO,       errorHandler: undefined,       warnHandler: undefined     },     mixins: [], // 保存應(yīng)用內(nèi)的混入     components: {}, // 保存全局組件的信息     directives: {}, // 保存全局指令的信息     provides: Object.create(null)   } }

分析完 app.component  方法之后，是不是覺(jué)得組件注冊(cè)的過(guò)程還是挺簡(jiǎn)單的。那么對(duì)于已注冊(cè)的組件，何時(shí)會(huì)被使用呢?要回答這個(gè)問(wèn)題，我們就需要分析另一個(gè)步驟 —— 應(yīng)用掛載。

1.3 應(yīng)用掛載的過(guò)程

為了更加直觀地了解應(yīng)用掛載的過(guò)程，阿寶哥利用 Chrome 開(kāi)發(fā)者工具的 Performance 標(biāo)簽欄，記錄了應(yīng)用掛載的主要過(guò)程：

在上圖中我們發(fā)現(xiàn)了一個(gè)與組件相關(guān)的函數(shù) resolveComponent。很明顯，該函數(shù)用于解析組件，且該函數(shù)在 render  方法中會(huì)被調(diào)用。在源碼中，我們找到了該函數(shù)的定義：

// packages/runtime-core/src/helpers/resolveAssets.ts const COMPONENTS = 'components'  export function resolveComponent(name: string): ConcreteComponent | string {   return resolveAsset(COMPONENTS, name) || name }

由以上代碼可知，在 resolveComponent 函數(shù)內(nèi)部，會(huì)繼續(xù)調(diào)用 resolveAsset 函數(shù)來(lái)執(zhí)行具體的解析操作。在分析  resolveAsset 函數(shù)的具體實(shí)現(xiàn)之前，我們?cè)?resolveComponent 函數(shù)內(nèi)部加個(gè)斷點(diǎn)，來(lái)一睹 render 方法的 “芳容”：

在上圖中，我們看到了解析組件的操作，比如 _resolveComponent("component-a")。前面我們已經(jīng)知道在  resolveComponent 函數(shù)內(nèi)部會(huì)繼續(xù)調(diào)用 resolveAsset 函數(shù)，該函數(shù)的具體實(shí)現(xiàn)如下：

// packages/runtime-core/src/helpers/resolveAssets.ts function resolveAsset(   type: typeof COMPONENTS | typeof DIRECTIVES,   name: string,   warnMissing = true ) {   const instance = currentRenderingInstance || currentInstance   if (instance) {     const Component = instance.type     // 省略大部分處理邏輯     const res =       // 局部注冊(cè)       // check instance[type] first for components with mixin or extends.       resolve(instance[type] || (Component as ComponentOptions)[type], name) ||       // 全局注冊(cè)       resolve(instance.appContext[type], name)     return res   } else if (__DEV__) {     warn(       `resolve${capitalize(type.slice(0, -1))} ` +         `can only be used in render() or setup().`     )   } }

因?yàn)樽?cè)組件時(shí)，使用的是全局注冊(cè)的方式，所以解析的過(guò)程會(huì)執(zhí)行 resolve(instance.appContext[type], name)  該語(yǔ)句，其中 resolve 方法的定義如下：

// packages/runtime-core/src/helpers/resolveAssets.ts function resolve(registry: Record<string, any> | undefined, name: string) {   return (     registry &&     (registry[name] ||       registry[camelize(name)] ||       registry[capitalize(camelize(name))])   ) }

分析完以上的處理流程，我們?cè)诮馕鋈肿?cè)的組件時(shí)，會(huì)通過(guò) resolve 函數(shù)從應(yīng)用的上下文對(duì)象中獲取已注冊(cè)的組件對(duì)象。

(function anonymous() {     const _Vue = Vue      return function render(_ctx, _cache) {         with (_ctx) {           const {resolveComponent: _resolveComponent, createVNode: _createVNode,              Fragment: _Fragment, openBlock: _openBlock, createBlock: _createBlock} = _Vue              const _component_component_a = _resolveComponent("component-a")             const _component_component_b = _resolveComponent("component-b")             const _component_component_c = _resolveComponent("component-c")              return (_openBlock(),             _createBlock(_Fragment, null, [               _createVNode(_component_component_a),                _createVNode(_component_component_b),                _createVNode(_component_component_c)], 64))         }     } })

在獲取到組件之后，會(huì)通過(guò) _createVNode 函數(shù)創(chuàng)建 VNode 節(jié)點(diǎn)。然而，關(guān)于 VNode 是如何被渲染成真實(shí)的 DOM  元素這個(gè)過(guò)程，阿寶哥就不繼續(xù)往下介紹了，后續(xù)會(huì)寫(xiě)專(zhuān)門(mén)的文章來(lái)單獨(dú)介紹這塊的內(nèi)容，接下來(lái)我們將介紹動(dòng)態(tài)組件的相關(guān)內(nèi)容。

二、動(dòng)態(tài)組件

在 Vue 3 中為我們提供了一個(gè) component 內(nèi)置組件，該組件可以渲染一個(gè) “元組件” 為動(dòng)態(tài)組件。根據(jù) is 的值，來(lái)決定哪個(gè)組件被渲染。如果  is 的值是一個(gè)字符串，它既可以是 HTML 標(biāo)簽名稱也可以是組件名稱。對(duì)應(yīng)的使用示例如下：

<!--  動(dòng)態(tài)組件由 vm 實(shí)例的 `componentId` property 控制 --> <component :is="componentId"></component>  <!-- 也能夠渲染注冊(cè)過(guò)的組件或 prop 傳入的組件--> <component :is="$options.components.child"></component>  <!-- 可以通過(guò)字符串引用組件 --> <component :is="condition ? 'FooComponent' : 'BarComponent'"></component>  <!-- 可以用來(lái)渲染原生 HTML 元素 --> <component :is="href ? 'a' : 'span'"></component>

2.1 綁定字符串類(lèi)型

介紹完 component 內(nèi)置組件，我們來(lái)舉個(gè)簡(jiǎn)單的示例：

<div id="app">    <button       v-for="tab in tabs"       :key="tab"       @click="currentTab = 'tab-' + tab.toLowerCase()">       {{ tab }}    </button>    <component :is="currentTab"></component> </div> <script>    const { createApp } = Vue    const tabs = ['Home', 'My']    const app = createApp({      data() {        return {          tabs,          currentTab: 'tab-' + tabs[0].toLowerCase()        }      },    });    app.component('tab-home', {      template: `<div style="border: 1px solid;">Home component</div>`    })    app.component('tab-my', {      template: `<div style="border: 1px solid;">My component</div>`    })    app.mount('#app') </script>

在以上代碼中，我們通過(guò) app.component 方法全局注冊(cè)了 tab-home 和 tab-my 2 個(gè)組件。此外，在模板中，我們使用了  component 內(nèi)置組件，該組件的 is 屬性綁定了 data 對(duì)象的 currentTab 屬性，該屬性的類(lèi)型是字符串。當(dāng)用戶點(diǎn)擊 Tab  按鈕時(shí)，會(huì)動(dòng)態(tài)更新 currentTab 的值，從而實(shí)現(xiàn)動(dòng)態(tài)切換組件的功能。以上示例成功運(yùn)行后的結(jié)果如下圖所示：

看到這里你會(huì)不會(huì)覺(jué)得 component 內(nèi)置組件挺神奇的，感興趣的小伙伴繼續(xù)跟阿寶哥一起，來(lái)揭開(kāi)它背后的秘密。下面我們利用 Vue 3 Template  Explorer 在線工具，看一下模板編譯的結(jié)果：

const _Vue = Vue  return function render(_ctx, _cache, $props, $setup, $data, $options) {   with (_ctx) {     const { resolveDynamicComponent: _resolveDynamicComponent, openBlock: _openBlock,        createBlock: _createBlock } = _Vue     return (_openBlock(), _createBlock(_resolveDynamicComponent(currentTab)))   } }

通過(guò)觀察生成的渲染函數(shù)，我們發(fā)現(xiàn)了一個(gè) resolveDynamicComponent  的函數(shù)，根據(jù)該函數(shù)的名稱，我們可以知道它用于解析動(dòng)態(tài)組件，它被定義在 runtime-core/src/helpers/resolveAssets.ts  文件中，具體實(shí)現(xiàn)如下所示：

// packages/runtime-core/src/helpers/resolveAssets.ts export function resolveDynamicComponent(component: unknown): VNodeTypes {   if (isString(component)) {     return resolveAsset(COMPONENTS, component, false) || component   } else {     // invalid types will fallthrough to createVNode and raise warning     return (component || NULL_DYNAMIC_COMPONENT) as any   } }

在 resolveDynamicComponent 函數(shù)內(nèi)部，若 component 參數(shù)是字符串類(lèi)型，則會(huì)調(diào)用前面介紹的 resolveAsset  方法來(lái)解析組件：

// packages/runtime-core/src/helpers/resolveAssets.ts function resolveAsset(   type: typeof COMPONENTS | typeof DIRECTIVES,   name: string,   warnMissing = true ) {   const instance = currentRenderingInstance || currentInstance   if (instance) {     const Component = instance.type     // 省略大部分處理邏輯     const res =       // 局部注冊(cè)       // check instance[type] first for components with mixin or extends.       resolve(instance[type] || (Component as ComponentOptions)[type], name) ||       // 全局注冊(cè)       resolve(instance.appContext[type], name)     return res   } }

對(duì)于前面的示例來(lái)說(shuō)，組件是全局注冊(cè)的，所以解析過(guò)程中會(huì)從 app.context 上下文對(duì)象的 components 屬性中獲取對(duì)應(yīng)的組件。當(dāng)  currentTab 發(fā)生變化時(shí)，resolveAsset 函數(shù)就會(huì)返回不同的組件，從而實(shí)現(xiàn)動(dòng)態(tài)組件的功能。

此外，如果 resolveAsset 函數(shù)獲取不到對(duì)應(yīng)的組件，則會(huì)返回當(dāng)前 component 參數(shù)的值。比如  resolveDynamicComponent('div') 將返回 'div' 字符串。

// packages/runtime-core/src/helpers/resolveAssets.ts export const NULL_DYNAMIC_COMPONENT = Symbol()  export function resolveDynamicComponent(component: unknown): VNodeTypes {   if (isString(component)) {     return resolveAsset(COMPONENTS, component, false) || component   } else {     return (component || NULL_DYNAMIC_COMPONENT) as any   } }

細(xì)心的小伙伴可能也注意到了，在 resolveDynamicComponent 函數(shù)內(nèi)部，如果 component 參數(shù)非字符串類(lèi)型，則會(huì)返回  component || NULL_DYNAMIC_COMPONENT 這行語(yǔ)句的執(zhí)行結(jié)果，其中 NULL_DYNAMIC_COMPONENT 的值是一個(gè)  Symbol 對(duì)象。

2.2 綁定對(duì)象類(lèi)型

了解完上述的內(nèi)容之后，我們來(lái)重新實(shí)現(xiàn)一下前面動(dòng)態(tài) Tab 的功能：

<div id="app">    <button       v-for="tab in tabs"       :key="tab"       @click="currentTab = tab">      {{ tab.name }}    </button>    <component :is="currentTab.component"></component> </div> <script>    const { createApp } = Vue    const tabs = [      {        name: 'Home',        component: {          template: `<div style="border: 1px solid;">Home component</div>`        }      },      {        name: 'My',        component: {          template: `<div style="border: 1px solid;">My component</div>`        }    }]    const app = createApp({      data() {        return {          tabs,          currentTab: tabs[0]        }      },    });    app.mount('#app') </script>

在以上示例中，component 內(nèi)置組件的 is 屬性綁定了 currentTab 對(duì)象的 component 屬性，該屬性的值是一個(gè)對(duì)象。當(dāng)用戶點(diǎn)擊  Tab 按鈕時(shí)，會(huì)動(dòng)態(tài)更新 currentTab 的值，導(dǎo)致 currentTab.component  的值也發(fā)生變化，從而實(shí)現(xiàn)動(dòng)態(tài)切換組件的功能。需要注意的是，每次切換的時(shí)候，都會(huì)重新創(chuàng)建動(dòng)態(tài)組件。但在某些場(chǎng)景下，你會(huì)希望保持這些組件的狀態(tài)，以避免反復(fù)重渲染導(dǎo)致的性能問(wèn)題。

對(duì)于這個(gè)問(wèn)題，我們可以使用 Vue 3 的另一個(gè)內(nèi)置組件 —— keep-alive，將動(dòng)態(tài)組件包裹起來(lái)。比如：

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

keep-alive 內(nèi)置組件的主要作用是用于保留組件狀態(tài)或避免重新渲染，使用它包裹動(dòng)態(tài)組件時(shí)，會(huì)緩存不活動(dòng)的組件實(shí)例，而不是銷(xiāo)毀它們。關(guān)于  keep-alive 組件的內(nèi)部工作原理，阿寶哥后面會(huì)寫(xiě)專(zhuān)門(mén)的文章來(lái)分析它，對(duì)它感興趣的小伙伴記得關(guān)注 Vue 3.0 進(jìn)階 系列喲。

三、阿寶哥有話說(shuō)

3.1 除了 component 內(nèi)置組件外，還有哪些內(nèi)置組件?

在 Vue 3 中除了本文介紹的 component 和 keep-alive 內(nèi)置組件之外，還提供了  transition、transition-group 、slot 和 teleport 內(nèi)置組件。

3.2 注冊(cè)全局組件與局部組件有什么區(qū)別?

注冊(cè)全局組件

const { createApp, h } = Vue const app = createApp({}); app.component('component-a', {   template: "<p>我是組件A</p>" });

使用 app.component 方法注冊(cè)的全局的組件，被保存到 app 應(yīng)用對(duì)象的上下文對(duì)象中。而通過(guò)組件對(duì)象 components  屬性注冊(cè)的局部組件是保存在組件實(shí)例中。

注冊(cè)局部組件

const { createApp, h } = Vue const app = createApp({}); const componentA = () => h('div', '我是組件A'); app.component('component-b', {   components: {     'component-a': componentA   },   template: `<div>     我是組件B，內(nèi)部使用了組件A     <component-a></component-a>       </div>` })

解析全局注冊(cè)和局部注冊(cè)的組件

// packages/runtime-core/src/helpers/resolveAssets.ts function resolveAsset(   type: typeof COMPONENTS | typeof DIRECTIVES,   name: string,   warnMissing = true ) {   const instance = currentRenderingInstance || currentInstance   if (instance) {     const Component = instance.type     // 省略大部分處理邏輯     const res =       // 局部注冊(cè)       // check instance[type] first for components with mixin or extends.       resolve(instance[type] || (Component as ComponentOptions)[type], name) ||       // 全局注冊(cè)       resolve(instance.appContext[type], name)     return res   } }

3.3 動(dòng)態(tài)組件能否綁定其他屬性?

component 內(nèi)置組件除了支持 is 綁定之外，也支持其他屬性綁定和事件綁定：

<component :is="currentTab.component" :name="name" @click="sayHi"></component>

這里阿寶哥使用 Vue 3 Template Explorer 這個(gè)在線工具，來(lái)編譯上述的模板：

const _Vue = Vue return function render(_ctx, _cache, $props, $setup, $data, $options) {   with (_ctx) {     const { resolveDynamicComponent: _resolveDynamicComponent,        openBlock: _openBlock, createBlock: _createBlock } = _Vue      return (_openBlock(), _createBlock(_resolveDynamicComponent(currentTab.component), {       name: name,       onClick: sayHi     }, null, 8 /* PROPS */, ["name", "onClick"]))   } }

關(guān)于Vue 3.0 中如何使用動(dòng)態(tài)組件就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，可以學(xué)到更多知識(shí)。如果覺(jué)得文章不錯(cuò)，可以把它分享出去讓更多的人看到。