Vue3.0进阶之动态组件探秘

在以上代码中，我们通过 app.component 方法注册了 3 个组件，这些组件都是全局注册的 。也就是说它们在注册之后可以用在任何新创建的组件实例的模板中。

该示例的代码比较简单，主要包含 3 个步骤：创建 App 对象、注册全局组件和应用挂载。其中创建 App 对象的细节，阿宝哥会在后续的文章中单独介绍，下面我们将重点分析其他 2 个步骤，首先我们先来分析注册全局组件的过程。

1.2 注册全局组件的过程

在以上示例中，我们使用 app 对象的 component 方法来注册全局组件：

 
 
 
 

  
  
  
  
app.component('component-a', { 
  
  
  
  
  template: "
我是组件A
" 
  
  
  
  
}); 
 
 
 
 

当然，除了注册全局组件之外，我们也可以注册局部组件，因为组件中也接受一个 components 的选项：

 
 
 
 

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

需要注意的是，局部注册的组件在其子组件中是不可用的。接下来，我们来继续介绍注册全局组件的过程。对于前面的示例来说，我们使用的 app.component 方法被定义在 runtime-core/src/apiCreateApp.ts 文件中：

 
 
 
 

  
  
  
  
export function createAppAPI( 
  
  
  
  
  render: RootRenderFunction, 
  
  
  
  
  hydrate?: RootHydrateFunction 
  
  
  
  
): CreateAppFunction { 
  
  
  
  
  return function createApp(rootComponent, rootProps = null) { 
  
  
  
  
    const context = createAppContext() 
  
  
  
  
    const installedPlugins = new Set() 
  
  
  
  
    let isMounted = false 
  
  
  
  
 
  
  
  
  
    const app: App = (context.app = { 
  
  
  
  
      // 省略部分代码 
  
  
  
  
      _context: context, 
  
  
  
  
 
  
  
  
  
      // 注册或检索全局组件 
  
  
  
  
      component(name: string, component?: Component): any { 
  
  
  
  
        if (__DEV__) { 
  
  
  
  
          validateComponentName(name, context.config) 
  
  
  
  
        } 
  
  
  
  
        if (!component) { // 获取name对应的组件 
  
  
  
  
          return context.components[name] 
  
  
  
  
        } 
  
  
  
  
        if (__DEV__ && context.components[name]) { // 重复注册提示 
  
  
  
  
          warn(`Component "${name}" has already been registered in target app.`) 
  
  
  
  
        } 
  
  
  
  
        context.components[name] = component // 注册全局组件 
  
  
  
  
        return app 
  
  
  
  
      }, 
  
  
  
  
    }) 
  
  
  
  
 
  
  
  
  
    return app 
  
  
  
  
  } 
  
  
  
  
} 
 
 
 
 

当所有的组件都注册成功之后，它们会被保存到 context 对象的 components 属性中，具体如下图所示：

顾名思义 context 是表示应用的上下文对象，那么该对象是如何创建的呢?其实，该对象是通过 createAppContext 函数来创建的：

 
 
 
 

  
  
  
  
const context = createAppContext() 
 
 
 
 

而 createAppContext 函数被定义在 runtime-core/src/apiCreateApp.ts 文件中：

 
 
 
 

  
  
  
  
// packages/runtime-core/src/apiCreateApp.ts 
  
  
  
  
export function createAppContext(): AppContext { 
  
  
  
  
  return { 
  
  
  
  
    app: null as any, 
  
  
  
  
    config: { // 应用的配置对象 
  
  
  
  
      isNativeTag: NO, 
  
  
  
  
      performance: false, 
  
  
  
  
      globalProperties: {}, 
  
  
  
  
      optionMergeStrategies: {}, 
  
  
  
  
      isCustomElement: NO, 
  
  
  
  
      errorHandler: undefined, 
  
  
  
  
      warnHandler: undefined 
  
  
  
  
    }, 
  
  
  
  
    mixins: [], // 保存应用内的混入 
  
  
  
  
    components: {}, // 保存全局组件的信息 
  
  
  
  
    directives: {}, // 保存全局指令的信息 
  
  
  
  
    provides: Object.create(null) 
  
  
  
  
  } 
  
  
  
  
} 
 
 
 
 

分析完 app.component 方法之后，是不是觉得组件注册的过程还是挺简单的。那么对于已注册的组件，何时会被使用呢?要回答这个问题，我们就需要分析另一个步骤 —— 应用挂载。

1.3 应用挂载的过程

为了更加直观地了解应用挂载的过程，阿宝哥利用 Chrome 开发者工具的 Performance 标签栏，记录了应用挂载的主要过程：

在上图中我们发现了一个与组件相关的函数 resolveComponent。很明显，该函数用于解析组件，且该函数在 render 方法中会被调用。在源码中，我们找到了该函数的定义：

 
 
 
 

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

由以上代码可知，在 resolveComponent 函数内部，会继续调用 resolveAsset 函数来执行具体的解析操作。在分析 resolveAsset 函数的具体实现之前，我们在 resolveComponent 函数内部加个断点，来一睹 render 方法的 “芳容”：

在上图中，我们看到了解析组件的操作，比如 _resolveComponent("component-a")。前面我们已经知道在 resolveComponent 函数内部会继续调用 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 = 
  
  
  
  
      // 局部注册 
  
  
  
  
      // check instance[type] first for components with mixin or extends. 
  
  
  
  
      resolve(instance[type] || (Component as ComponentOptions)[type], name) || 
  
  
  
  
      // 全局注册 
  
  
  
  
      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().` 
  
  
  
  
    ) 
  
  
  
  
  } 
  
  
  
  
} 
 
 
 
 

因为注册组件时，使用的是全局注册的方式，所以解析的过程会执行 resolve(instance.appContext[type], name) 该语句，其中 resolve 方法的定义如下：

 
 
 
 

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

分析完以上的处理流程，我们在解析全局注册的组件时，会通过 resolve 函数从应用的上下文对象中获取已注册的组件对象。

 
 
 
 

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

在获取到组件之后，会通过 _createVNode 函数创建 VNode 节点。然而，关于 VNode 是如何被渲染成真实的 DOM 元素这个过程，阿宝哥就不继续往下介绍了，后续会写专门的文章来单独介绍这块的内容，接下来我们将介绍动态组件的相关内容。

二、动态组件

在 Vue 3 中为我们提供了一个 component 内置组件，该组件可以渲染一个 “元组件” 为动态组件。根据 is 的值，来决定哪个组件被渲染。如果 is 的值是一个字符串，它既可以是 HTML 标签名称也可以是组件名称。对应的使用示例如下：

2.1 绑定字符串类型

介绍完 component 内置组件，我们来举个简单的示例：

 
 
 
 

  
  
  
  
 
  
  
  
  
   
  
  
  
  
      v-for="tab in tabs" 
  
  
  
  
      :key="tab" 
  
  
  
  
      @click="currentTab = 'tab-' + tab.toLowerCase()"> 
  
  
  
  
      {{ tab }}