Vue3 の動的コンポーネントはどのように機能しますか?

<div id="アプリ">
 <コンポーネント-a></コンポーネント-a>
 <コンポーネント-b></コンポーネント-b>
 <コンポーネント-c></コンポーネント-c>
</div>
<スクリプト>
 const {createApp} = Vue
 const app = createApp({}); // ①
 app.component('component-a', { // ②
  テンプレート: "<p>私はコンポーネント A です</p>"
 });
 app.component('コンポーネントb', {
  テンプレート: "<p>私はコンポーネント B です</p>"
 });
 app.component('コンポーネント-c', {
  テンプレート: "<p>私はコンポーネント C です</p>"
 });
 app.mount('#app') // ③
</スクリプト>

app.component('コンポーネント-a', {
 テンプレート: "<p>私はコンポーネント A です</p>"
});

const app = Vue.createApp({
 コンポーネント:
 'コンポーネント-a': コンポーネントA、
 'コンポーネント-b': コンポーネントB
 }
})

エクスポート関数createAppAPI<HostElement>(
 レンダリング: RootRenderFunction、
 水和物?: RootHydrateFunction
): CreateAppFunction<ホスト要素> {
 関数createApp(rootComponent, rootProps = null)を返す{
 定数コンテキスト = createAppContext()
 const インストール済みプラグイン = 新しい Set()
 isMounted = false とします

 const app: App = (context.app = {
  // 一部省略 code_context: context,

  // グローバルコンポーネントを登録または取得するcomponent(name: string, component?: Component): any {
  __DEV__ の場合 {
   コンポーネント名を検証します(名前、context.config)
  }
  if (!component) { // 名前に対応するコンポーネントを取得する return context.components[name]
  }
  if (__DEV__ && context.components[name]) { // 重複登録プロンプト warn(`コンポーネント "${name}" は既に対象アプリに登録されています。`)
  }
  context.components[name] = component // グローバルコンポーネントを登録する appを返す
  },
 })

 返品アプリ
 }
}

// パッケージ/ランタイムコア/src/apiCreateApp.ts
エクスポート関数createAppContext(): AppContext {
 戻る {
 app: null は任意、
 config: { // アプリケーション構成オブジェクト isNativeTag: NO,
  パフォーマンス: false、
  グローバルプロパティ: {},
  オプションマージ戦略: {},
  isCustomElement: いいえ、
  errorHandler: 未定義、
  warnHandler: 未定義
 },
 mixins: [], // アプリケーションにミックスインされたコンポーネントを保存します components: {}, // グローバルコンポーネントの情報を保存します directives: {}, // グローバル命令の情報を保存します provided: Object.create(null)
 }
}

// パッケージ/runtime-core/src/helpers/resolveAssets.ts
const COMPONENTS = 'コンポーネント'

エクスポート関数resolveComponent(名前: 文字列): ConcreteComponent | 文字列 {
 戻りresolveAsset(COMPONENTS, name) || name
}

// パッケージ/runtime-core/src/helpers/resolveAssets.ts
関数resolveAsset(
 タイプ: typeof COMPONENTS | typeof DIRECTIVES、
 名前: 文字列、
 警告がない = true
）{
 const インスタンス = 現在のレンダリングインスタンス || 現在のインスタンス
 if (インスタンス) {
 const コンポーネント = インスタンス.type
 // 処理ロジックのほとんどを省略 const res =
  // ローカル登録 // まず、mixin または extends を持つコンポーネントの instance[type] をチェックします。
  解決(instance[type] || (Component as ComponentOptions)[type], name) ||
  // グローバル登録resolve(instance.appContext[type], name)
 戻り値
 } そうでない場合 (__DEV__) {
 警告(
  `${capitalize(type.slice(0, -1))}を解決します` +
  `render() または setup() でのみ使用できます。`
 ）
 }
}

// パッケージ/runtime-core/src/helpers/resolveAssets.ts
関数resolve(レジストリ: Record<文字列、任意> | 未定義、名前: 文字列) {
 戻る （
 レジストリ &&
 (レジストリ[名前] ||
  レジストリ[camelize(名前)] ||
  レジストリ[大文字にする(キャメル文字にする(名前))])
 ）
}

(関数匿名() {
 定数_Vue = Vue

 関数render(_ctx, _cache)を返す{
  (_ctx) で{
   const {resolveComponent: _resolveComponent、createVNode: _createVNode、 
   フラグメント: _Fragment、オープンブロック: _openBlock、作成ブロック: _createBlock} = _Vue

   const _component_component_a = _resolveComponent("コンポーネントa")
   const _component_component_b = _resolveComponent("コンポーネントb")
   const _component_component_c = _resolveComponent("コンポーネントc")

   戻り値 (_openBlock(),
   _createBlock(_Fragment, null, [
    _createVNode(_component_component_a)、 
    _createVNode(_component_component_b)、 
    _createVNode(_component_component_c)], 64))
  }
 }
})

<!-- 動的コンポーネントは、vm インスタンスの `componentId` プロパティによって制御されます -->
<コンポーネント:is="コンポーネントID"></コンポーネント>

<!-- 登録されたコンポーネントや props によって渡されたコンポーネントもレンダリングできます -->
<コンポーネント :is="$options.components.child"></コンポーネント>

<!-- 文字列を介してコンポーネントを参照できます -->
<component :is="条件 ? 'FooComponent' : 'BarComponent'"></component>

<!-- ネイティブ HTML 要素をレンダリングするために使用できます -->
<component :is="href ? 'a' : 'span'"></component>

<div id="アプリ">
 <ボタン
  v-for="タブ内のタブ"
  :key="タブ"
  @click="currentTab = 'tab-' + tab.toLowerCase()">
  {{タブ}}
 </ボタン>
 <コンポーネント :is="現在のタブ"></コンポーネント>
</div>
<スクリプト>
 const {createApp} = Vue
 const tabs = ['ホーム', 'マイ']
 const app = createApp({
  データ（） {
  戻る {
   タブ、
   現在のタブ: 'tab-' + tabs[0].toLowerCase()
  }
  },
 });
 app.component('タブホーム', {
  テンプレート: `<div style="border: 1px solid;">ホーム コンポーネント</div>`
 })
 app.component('タブ-my', {
  テンプレート: `<div style="border: 1px solid;">私のコンポーネント</div>`
 })
 app.mount('#app')
</スクリプト>

定数_Vue = Vue

関数 render(_ctx, _cache, $props, $setup, $data, $options) を返します {
 (_ctx) で{
 const { 解決動的コンポーネント: _resolveDynamicComponent、 オープンブロック: _openBlock、 
  ブロックの作成: _createBlock } = _Vue
 戻り値 (_openBlock()、_createBlock(_resolveDynamicComponent(currentTab)))
 }
}

// パッケージ/runtime-core/src/helpers/resolveAssets.ts
エクスポート関数resolveDynamicComponent(コンポーネント: 不明): VNodeTypes {
 if (isString(コンポーネント)) {
 戻りresolveAsset(COMPONENTS, コンポーネント, false) || コンポーネント
 } それ以外 {
 // 無効な型は createVNode にフォールスルーし、警告が発生します
 (コンポーネント || NULL_DYNAMIC_COMPONENT) を任意の値として返す
 }
}

// パッケージ/runtime-core/src/helpers/resolveAssets.ts
関数resolveAsset(
 タイプ: typeof COMPONENTS | typeof DIRECTIVES、
 名前: 文字列、
 警告がない = true
）{
 const インスタンス = 現在のレンダリングインスタンス || 現在のインスタンス
 if (インスタンス) {
 const コンポーネント = インスタンス.type
 // 処理ロジックのほとんどを省略 const res =
  // ローカル登録 // まず、mixin または extends を持つコンポーネントの instance[type] をチェックします。
  解決(instance[type] || (Component as ComponentOptions)[type], name) ||
  // グローバル登録resolve(instance.appContext[type], name)
 戻り値
 }
}

// パッケージ/runtime-core/src/helpers/resolveAssets.ts
エクスポート const NULL_DYNAMIC_COMPONENT = シンボル()

エクスポート関数resolveDynamicComponent(コンポーネント: 不明): VNodeTypes {
 if (isString(コンポーネント)) {
 戻りresolveAsset(COMPONENTS, コンポーネント, false) || コンポーネント
 } それ以外 {
 (コンポーネント || NULL_DYNAMIC_COMPONENT) を任意の値として返す
 }
}

<div id="アプリ">
 <ボタン
  v-for="タブ内のタブ"
  :key="タブ"
  @click="現在のタブ = タブ">
  {{タブ名}}
 </ボタン>
 <コンポーネント :is="currentTab.component"></コンポーネント>
</div>
<スクリプト>
 const {createApp} = Vue
 定数タブ = [
  {
  名前: 'ホーム'、
  成分： {
   テンプレート: `<div style="border: 1px solid;">ホーム コンポーネント</div>`
  }
  },
  {
  名前: 'My',
  成分： {
   テンプレート: `<div style="border: 1px solid;">私のコンポーネント</div>`
  }
 }]
 const app = createApp({
  データ（） {
  戻る {
   タブ、
   現在のタブ: タブ[0]
  }
  },
 });
 app.mount('#app')
</スクリプト>

<キープアライブ>
 <コンポーネント :is="現在のタブ"></コンポーネント>
</キープアライブ> 

const { createApp, h } = Vue
定数アプリ = createApp({});
app.component('コンポーネント-a', {
 テンプレート: "<p>私はコンポーネント A です</p>"
});

const { createApp, h } = Vue
定数アプリ = createApp({});
const componentA = () => h('div', '私はコンポーネントAです');
app.component('コンポーネントb', {
 コンポーネント:
 'コンポーネント-a': コンポーネントA
 },
 テンプレート: `<div>
 私はコンポーネントBであり、内部的にコンポーネントAを使用しています
 <コンポーネント-a></コンポーネント-a> 
 </div>`
})

// パッケージ/runtime-core/src/helpers/resolveAssets.ts
関数resolveAsset(
 タイプ: typeof COMPONENTS | typeof DIRECTIVES、
 名前: 文字列、
 警告がない = true
）{
 const インスタンス = 現在のレンダリングインスタンス || 現在のインスタンス
 if (インスタンス) {
 const コンポーネント = インスタンス.type
 // 処理ロジックのほとんどを省略 const res =
  // ローカル登録 // まず、mixin または extends を持つコンポーネントの instance[type] をチェックします。
  解決(instance[type] || (Component as ComponentOptions)[type], name) ||
  // グローバル登録resolve(instance.appContext[type], name)
 戻り値
 }
}

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

定数_Vue = Vue
関数 render(_ctx, _cache, $props, $setup, $data, $options) を返します {
 (_ctx) で{
 const { 解決動的コンポーネント: _resolveDynamicComponent, 
  ブロックを開く: _openBlock、ブロックを作成する: _createBlock } = _Vue

 戻り値 (_openBlock()、_createBlock(_resolveDynamicComponent(currentTab.component)、{
  名前: 名前、
  onClick: こんにちはと言う
 }, null, 8 /* PROPS */, ["name", "onClick"]))
 }
}