How does Vue3's dynamic components work?

In this article, Abaoge will introduce the built-in component in Vue 3 - component, which is used to render a "meta component" as a dynamic component. It doesn’t matter if you don’t know much about dynamic components. In this article, Brother Abao will introduce the application of dynamic components through specific examples. Since there is a certain connection between the internal structure of dynamic components and component registration, in order to enable everyone to better understand the internal principles of dynamic components, Abao will first introduce the relevant knowledge of component registration.

1. Component Registration

1.1 Global Registration

In Vue 3.0, it is easy to register or retrieve global components by using the component method of the app object. The component method supports two parameters:

• name: component name;
• component: component definition object.
  

Next, let's look at a simple example:

<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>I am component A</p>"
 });
 app.component('component-b', {
  template: "<p>I am component B</p>"
 });
 app.component('component-c', {
  template: "<p>I am component C</p>"
 });
 app.mount('#app') // ③
</script>

In the above code, we registered three components through the app.component method. These components are registered globally. This means that they can be used in the template of any newly created component instance after they have been registered. The code of this example is relatively simple and mainly includes three steps: creating an App object, registering global components, and mounting the application. The details of creating the App object will be introduced separately in subsequent articles. Below we will focus on analyzing the other two steps. First, let's analyze the process of registering global components.

1.2 The process of registering global components

In the above example, we use the component method of the app object to register a global component:

app.component('component-a', {
 template: "<p>I am component A</p>"
});

Of course, in addition to registering global components, we can also register local components, because the component also accepts a components option:

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

It should be noted that locally registered components are not available in their child components. Next, let's continue with the process of registering global components. For the previous examples, we used the app.component method defined in the runtime-core/src/apiCreateApp.ts file:

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 = {
  // Omit some code_context: context,

  // Register or retrieve global components component(name: string, component?: Component): any {
  if (__DEV__) {
   validateComponentName(name, context.config)
  }
  if (!component) { // Get the component corresponding to name return context.components[name]
  }
  if (__DEV__ && context.components[name]) { // Duplicate registration prompt warn(`Component "${name}" has already been registered in target app.`)
  }
  context.components[name] = component // Register global component return app
  },
 })

 return app
 }
}

When all components are registered successfully, they will be saved to the components property of the context object, as shown in the following figure:

The createAppContext function is defined in the runtime-core/src/apiCreateApp.ts file:

// packages/runtime-core/src/apiCreateApp.ts
export function createAppContext(): AppContext {
 return {
 app: null as any,
 config: { // Application configuration object isNativeTag: NO,
  performance: false,
  globalProperties: {},
  optionMergeStrategies: {},
  isCustomElement: NO,
  errorHandler: undefined,
  warnHandler: undefined
 },
 mixins: [], // Save the mixed-in components in the application components: {}, // Save the information of global components directives: {}, // Save the information of global instructions provides: Object.create(null)
 }
}

After analyzing the app.component method, do you think the component registration process is quite simple? So when will the registered components be used? To answer this question, we need to analyze another step - application mounting.

1.3 Application Mounting Process

In order to understand the application mounting process more intuitively, Abaoge used the Performance tab bar of Chrome developer tools to record the main process of application mounting:

In the above figure we found a component-related function resolveComponent. Obviously, this function is used to parse the component and will be called in the render method. In the source code, we found the definition of the function:

// packages/runtime-core/src/helpers/resolveAssets.ts
const COMPONENTS = 'components'

export function resolveComponent(name: string): ConcreteComponent | string {
 return resolveAsset(COMPONENTS, name) || name
}

From the above code, we can see that inside the resolveComponent function, the resolveAsset function will continue to be called to perform specific resolution operations. Before analyzing the specific implementation of the resolveAsset function, let's add a breakpoint inside the resolveComponent function to take a look at the render method:

In the figure above, we see the operation of resolving components, such as _resolveComponent("component-a"). As we already know, the resolveAsset function will be called inside the resolveComponent function. The specific implementation of this function is as follows:

// 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
 // Omit most of the processing logic const res =
  // Local registration // check instance[type] first for components with mixin or extends.
  resolve(instance[type] || (Component as ComponentOptions)[type], name) ||
  // Global registration 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().`
 )
 }
}

Because the global registration method is used when registering components, the resolution process will execute the resolve(instance.appContext[type], name) statement, where the resolve method is defined as follows:

// 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))])
 )
}

After analyzing the above processing flow, when we parse the globally registered components, we will get the registered component objects from the application context object through the resolve function.

(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))
  }
 }
})

After obtaining the component, a VNode node will be created through the _createVNode function. However, I will not go into details about how VNode is rendered into a real DOM element. I will write a separate article to introduce this content later. Next, we will introduce the relevant content of dynamic components.

2. Dynamic Components

In Vue 3, we are provided with a component built-in component, which can render a "meta component" as a dynamic component. Depending on the value of is, it determines which component is rendered. If the value of is is a string, it can be either an HTML tag name or a component name. The corresponding usage examples are as follows:

<!-- Dynamic components are controlled by the `componentId` property of the vm instance -->
<component :is="componentId"></component>

<!-- Can also render registered components or components passed in by props-->
<component :is="$options.components.child"></component>

<!-- You can reference components via strings -->
<component :is="condition ? 'FooComponent' : 'BarComponent'"></component>

<!-- Can be used to render native HTML elements -->
<component :is="href ? 'a' : 'span'"></component>

2.1 Binding string type

After introducing the component built-in components, let's take a simple example:

<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>

In the above code, we globally registered two components, tab-home and tab-my, through the app.component method. In addition, in the template, we use the component built-in component, whose is property is bound to the currentTab property of the data object, which is a string type. When the user clicks the Tab button, the value of currentTab will be dynamically updated, thereby realizing the function of dynamically switching components. The result of the above example running successfully is shown in the following figure:

After reading this, do you think the component built-in component is magical? If you are interested, continue to follow Brother Abao to uncover the secrets behind it. Next, we use the Vue 3 Template Explorer online tool to look at the result of <component :is="currentTab"></component> template compilation:

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)))
 }
}

By observing the generated rendering function, we found a resolveDynamicComponent function. According to the name of the function, we can know that it is used to resolve dynamic components. It is defined in the runtime-core/src/helpers/resolveAssets.ts file. The specific implementation is as follows:

// 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
 }
}

Inside the resolveDynamicComponent function, if the component parameter is a string type, the resolveAsset method introduced earlier will be called to resolve the component:

// 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
 // Omit most of the processing logic const res =
  // Local registration // check instance[type] first for components with mixin or extends.
  resolve(instance[type] || (Component as ComponentOptions)[type], name) ||
  // Global registration resolve(instance.appContext[type], name)
 return res
 }
}

For the previous example, the component is registered globally, so the corresponding component is obtained from the components property of the app.context context object during the resolution process. When currentTab changes, the resolveAsset function returns a different component, thus realizing the functionality of dynamic components. In addition, if the resolveAsset function cannot obtain the corresponding component, it will return the value of the current component parameter. For example, resolveDynamicComponent('div') will return the string '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
 }
}

Careful friends may have noticed that inside the resolveDynamicComponent function, if the component parameter is not a string type, the execution result of the statement component || NULL_DYNAMIC_COMPONENT will be returned, where the value of NULL_DYNAMIC_COMPONENT is a Symbol object.

2.2 Binding Object Type

After understanding the above content, let's re-implement the previous dynamic Tab function:

<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>

In the above example, the is property of the component built-in component is bound to the component property of the currentTab object, whose value is an object. When the user clicks the Tab button, the value of currentTab is dynamically updated, causing the value of currentTab.component to change as well, thereby achieving the function of dynamically switching components. It should be noted that the dynamic component will be recreated every time it is switched. But in some scenarios, you may want to keep the state of these components to avoid performance issues caused by repeated re-rendering.

For this problem, we can use another built-in component of Vue 3, keep-alive, to wrap the dynamic components. for example:

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

The main purpose of the keep-alive built-in component is to preserve component status or avoid re-rendering. When it is used to wrap dynamic components, inactive component instances are cached instead of being destroyed. Regarding the internal working principle of the keep-alive component, Abaoge will write a special article to analyze it later. Friends who are interested in it remember to pay attention to the Vue 3.0 advanced series.

3. Brother Abao has something to say

3.1 In addition to the component built-in component, what other built-in components are there?

In addition to the component and keep-alive built-in components introduced in this article, Vue 3 also provides transition, transition-group, slot and teleport built-in components.

3.2 What is the difference between registering global components and local components?

Registering global components

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

Global components registered using the app.component method are saved in the context object of the app application object. The local components registered through the components property of the component object are saved in the component instance.

Registering Local Components

const { createApp, h } = Vue
const app = createApp({});
const componentA = () => h('div', 'I am component A');
app.component('component-b', {
 components:
 'component-a': componentA
 },
 template: `<div>
 I am component B, which uses component A internally
 <component-a></component-a> 
 </div>`
})

Resolving globally and locally registered components

// 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
 // Omit most of the processing logic const res =
  // Local registration // check instance[type] first for components with mixin or extends.
  resolve(instance[type] || (Component as ComponentOptions)[type], name) ||
  // Global registration resolve(instance.appContext[type], name)
 return res
 }
}

3.3 Can dynamic components bind other properties?

In addition to supporting is binding, the component built-in component also supports other attribute binding and event binding:

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

Here, Abao uses the online tool Vue 3 Template Explorer to compile the above template:

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"]))
 }
}

From the above rendering function, we can see that except for the is binding which will be converted to the _resolveDynamicComponent function call, other attribute bindings will be resolved normally to the props object.

The above is the detailed content of how the dynamic components of vue3 work. For more information about vue3 dynamic components, please pay attention to other related articles on 123WORDPRESS.COM!