ベスト プラクティス: Vue 3 でコンポーネントを DOM にアタッチする方法

Question

Vue 3 アプリケーションのシングル ファイル コンポーネント (SFC) 内にコンポーネントを動的に作成し、DOM に追加したいと考えています。私は

Answer 1

もっと簡単な方法は、v-if または v-for を使用することです。

コンポーネントを直接扱うよりも、コンポーネントの状態を扱い、Vue の応答性の高い魔法を働かせるほうがよいでしょう。

これは例であり、コンポーネント(トースト)を動的に追加し、コンポーネントの状態を操作するだけです

Toast.vue ファイル: ここの v-for はリアクティブであり、新しいエラーがエラー オブジェクトに追加されるたびにレンダリングされます

リーリー

ErrorTrigger.vue: クリック イベントが発生するたびに、エラーをエラー オブジェクトにプッシュします

リーリー

完全な例: https://stackblitz.com/edit/vitejs-vite-mcjgkl

Answer 2

オプション 1: createVNode(component, props) と render(vnode,container)

を使用します。

作成: createVNode() を使用して、プロパティを使用してコンポーネント定義の VNode を作成します (たとえば、*.vue から)インポートされた SFC) を render() に渡して、指定されたコンテナ要素でレンダリングできます。

破棄: render(null,container) を呼び出すと、コンテナにアタッチされている VNode が破棄されます。このメソッドは、親コンポーネントがアンマウントされたときに (unmounted ライフサイクル フック経由で) クリーンアップするために呼び出す必要があります。

リーリー

注: このメソッドは内部メソッド (createVNode および render) に依存しており、将来のバージョンではリファクタリングまたは削除される可能性があります。

デモ 1

オプション 2: createApp(component, props) および app.mount(container)

を使用します。

作成: createApp() を使用して、 アプリケーション インスタンスを作成します。このインスタンスには、特定のコンテナ要素上でコンポーネントをレンダリングするために使用できる mount() メソッドがあります。

破壊: アプリケーション インスタンスには、アプリケーションとコンポーネントのインスタンスを破壊するための unmount() メソッドがあります。このメソッドは、親コンポーネントがアンマウントされたときに (unmounted ライフサイクル フック経由で) クリーンアップするために呼び出す必要があります。

リーリー

注: このメソッドは、コンポーネントごとにアプリケーション インスタンスを作成します。ドキュメント内で複数のコンポーネントを同時にインスタンス化する必要がある場合、かなりのオーバーヘッドが発生する可能性があります。

デモ 2

使用例

リーリー