vue3的動(dòng)態(tài)組件是如何工作的
在這篇文章中，阿寶哥將介紹 Vue 3 中的內(nèi)置組件 —— component，該組件的作用是渲染一個(gè) “元組件” 為動(dòng)態(tài)組件。如果你對(duì)動(dòng)態(tài)組件還不了解的話也沒關(guān)系，文中阿寶哥會(huì)通過具體的示例，來介紹動(dòng)態(tài)組件的應(yīng)用。由于動(dòng)態(tài)組件內(nèi)部與組件注冊(cè)之間有一定的聯(lián)系，所以為了讓大家能夠更好地了解動(dòng)態(tài)組件的內(nèi)部原理，阿寶哥會(huì)先介紹組件注冊(cè)的相關(guān)知識(shí)。
一、組件注冊(cè)
1.1 全局注冊(cè)
在 Vue 3.0 中，通過使用 app 對(duì)象的 component 方法，可以很容易地注冊(cè)或檢索全局組件。component 方法支持兩個(gè)參數(shù)：
- name：組件名稱；
- component：組件定義對(duì)象。
接下來，我們來看一個(gè)簡單的示例：
<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>
在以上代碼中，我們通過 app.component 方法注冊(cè)了 3 個(gè)組件，這些組件都是全局注冊(cè)的 。也就是說它們?cè)谧?cè)之后可以用在任何新創(chuàng)建的組件實(shí)例的模板中。該示例的代碼比較簡單，主要包含 3 個(gè)步驟：創(chuàng)建 App 對(duì)象、注冊(cè)全局組件和應(yīng)用掛載。其中創(chuàng)建 App 對(duì)象的細(xì)節(jié)，阿寶哥會(huì)在后續(xù)的文章中單獨(dú)介紹，下面我們將重點(diǎn)分析其他 2 個(gè)步驟，首先我們先來分析注冊(cè)全局組件的過程。
1.2 注冊(cè)全局組件的過程
在以上示例中，我們使用 app 對(duì)象的 component 方法來注冊(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è)的組件在其子組件中是不可用的。接下來，我們來繼續(xù)介紹注冊(cè)全局組件的過程。對(duì)于前面的示例來說，我們使用的 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 屬性中，具體如下圖所示：
而 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 方法之后，是不是覺得組件注冊(cè)的過程還是挺簡單的。那么對(duì)于已注冊(cè)的組件，何時(shí)會(huì)被使用呢？要回答這個(gè)問題，我們就需要分析另一個(gè)步驟 —— 應(yīng)用掛載。
1.3 應(yīng)用掛載的過程
為了更加直觀地了解應(yīng)用掛載的過程，阿寶哥利用 Chrome 開發(fā)者工具的 Performance 標(biāo)簽欄，記錄了應(yīng)用掛載的主要過程：
在上圖中我們發(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ù)來執(zhí)行具體的解析操作。在分析 resolveAsset 函數(shù)的具體實(shí)現(xiàn)之前，我們?cè)?resolveComponent 函數(shù)內(nèi)部加個(gè)斷點(diǎn)，來一睹 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è)的方式，所以解析的過程會(huì)執(zhí)行 resolve(instance.appContext[type], name) 該語句，其中 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ì)通過 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ì)通過 _createVNode 函數(shù)創(chuàng)建 VNode 節(jié)點(diǎn)。然而，關(guān)于 VNode 是如何被渲染成真實(shí)的 DOM 元素這個(gè)過程，阿寶哥就不繼續(xù)往下介紹了，后續(xù)會(huì)寫專門的文章來單獨(dú)介紹這塊的內(nè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 的值，來決定哪個(gè)組件被渲染。如果 is 的值是一個(gè)字符串，它既可以是 HTML 標(biāo)簽名稱也可以是組件名稱。對(duì)應(yīng)的使用示例如下：
<!-- 動(dòng)態(tài)組件由 vm 實(shí)例的 `componentId` property 控制 --> <component :is="componentId"></component> <!-- 也能夠渲染注冊(cè)過的組件或 prop 傳入的組件--> <component :is="$options.components.child"></component> <!-- 可以通過字符串引用組件 --> <component :is="condition ? 'FooComponent' : 'BarComponent'"></component> <!-- 可以用來渲染原生 HTML 元素 --> <component :is="href ? 'a' : 'span'"></component>
2.1 綁定字符串類型
介紹完 component 內(nèi)置組件，我們來舉個(gè)簡單的示例：
<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>
在以上代碼中，我們通過 app.component 方法全局注冊(cè)了 tab-home 和 tab-my 2 個(gè)組件。此外，在模板中，我們使用了 component 內(nèi)置組件，該組件的 is 屬性綁定了 data 對(duì)象的 currentTab 屬性，該屬性的類型是字符串。當(dāng)用戶點(diǎn)擊 Tab 按鈕時(shí)，會(huì)動(dòng)態(tài)更新 currentTab 的值，從而實(shí)現(xiàn)動(dòng)態(tài)切換組件的功能。以上示例成功運(yùn)行后的結(jié)果如下圖所示：
看到這里你會(huì)不會(huì)覺得 component 內(nèi)置組件挺神奇的，感興趣的小伙伴繼續(xù)跟阿寶哥一起，來揭開它背后的秘密。下面我們利用 Vue 3 Template Explorer 在線工具，看一下 <component :is="currentTab"></component> 模板編譯的結(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)))
}
}
通過觀察生成的渲染函數(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ù)是字符串類型，則會(huì)調(diào)用前面介紹的 resolveAsset 方法來解析組件：
// 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ì)于前面的示例來說，組件是全局注冊(cè)的，所以解析過程中會(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ù)非字符串類型，則會(huì)返回 component || NULL_DYNAMIC_COMPONENT 這行語句的執(zhí)行結(jié)果，其中 NULL_DYNAMIC_COMPONENT 的值是一個(gè) Symbol 對(duì)象。
2.2 綁定對(duì)象類型
了解完上述的內(nè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)組件。但在某些場景下，你會(huì)希望保持這些組件的狀態(tài)，以避免反復(fù)重渲染導(dǎo)致的性能問題。
對(duì)于這個(gè)問題，我們可以使用 Vue 3 的另一個(gè)內(nèi)置組件 —— keep-alive，將動(dòng)態(tài)組件包裹起來。比如：
<keep-alive> <component :is="currentTab"></component> </keep-alive>
keep-alive 內(nèi)置組件的主要作用是用于保留組件狀態(tài)或避免重新渲染，使用它包裹動(dòng)態(tài)組件時(shí)，會(huì)緩存不活動(dòng)的組件實(shí)例，而不是銷毀它們。關(guān)于 keep-alive 組件的內(nèi)部工作原理，阿寶哥后面會(huì)寫專門的文章來分析它，對(duì)它感興趣的小伙伴記得關(guān)注 Vue 3.0 進(jìn)階 系列喲。
三、阿寶哥有話說
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ì)象中。而通過組件對(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è)在線工具，來編譯上述的模板：
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"]))
}
}
觀察以上的渲染函數(shù)可知，除了 is 綁定會(huì)被轉(zhuǎn)換為 _resolveDynamicComponent 函數(shù)調(diào)用之外，其他的屬性綁定都會(huì)被正常解析為 props 對(duì)象。
以上就是vue3的動(dòng)態(tài)組件是如何工作的的詳細(xì)內(nèi)容，更多關(guān)于vue3動(dòng)態(tài)組件的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
關(guān)于element-ui的隱藏組件el-scrollbar的使用
這篇文章主要介紹了關(guān)于element-ui的隱藏組件el-scrollbar的使用，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-05-05
vue watch自動(dòng)檢測數(shù)據(jù)變化實(shí)時(shí)渲染的方法
本篇文章主要介紹了vue watch自動(dòng)檢測數(shù)據(jù)變化實(shí)時(shí)渲染的方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-01-01
vue+Element-ui實(shí)現(xiàn)分頁效果
這篇文章主要為大家詳細(xì)介紹了vue+Element-ui實(shí)現(xiàn)分頁效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-11-11
vue-cli腳手架搭建的項(xiàng)目去除eslint驗(yàn)證的方法
今天小編就為大家分享一篇vue-cli腳手架搭建的項(xiàng)目去除eslint驗(yàn)證的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-09-09
一文詳解Pinia和Vuex與兩個(gè)Vue狀態(tài)管理模式
這篇文章主要介紹了一文詳解Pinia和Vuex與兩個(gè)Vue狀態(tài)管理模式，Pinia和Vuex一樣都是是vue的全局狀態(tài)管理器。其實(shí)Pinia就是Vuex5，只不過為了尊重原作者的貢獻(xiàn)就沿用了這個(gè)看起來很甜的名字Pinia2022-08-08
要在 Vue 項(xiàng)目中使用 svg-sprite-loader 來管理 SVG 圖標(biāo),需要執(zhí)行相應(yīng)的步驟,接下來通過本文給大家介紹VUE3 加載自定義SVG文件的詳細(xì)步驟,感興趣的朋友一起看看吧2024-01-01
使用webpack手動(dòng)搭建vue項(xiàng)目的步驟
這篇文章主要介紹了從零使用webpack手動(dòng)搭建vue項(xiàng)目的步驟，本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-03-03
這篇文章主要介紹了vue router返回到指定的路由的場景分析,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-11-11
使用vNode實(shí)現(xiàn)給列表字段打標(biāo)簽
這篇文章主要為大家介紹了使用vNode實(shí)現(xiàn)給列表字段打標(biāo)簽示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-09-09
Vue.js中該如何自己維護(hù)路由跳轉(zhuǎn)記錄
這篇文章主要給大家介紹了關(guān)于Vue.js中該如何自己維護(hù)路由跳轉(zhuǎn)記錄的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用Vue.js具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05