Vue 仮想 DOM の問題について

1. 仮想DOMとは何ですか?

仮想 DOM は、本質的にはビューのインターフェース構造を記述するために使用される共通の JS オブジェクトです。

Vue では、各コンポーネントにレンダリング関数があります。

レンダリングがない場合は、テンプレートを探します。テンプレートがない場合は、el を探します。el がある場合は、el.outHTML がテンプレートとして使用され、この文字列がレンダリング関数にコンパイルされます。
テンプレートがあれば、それ以上は見ません。レンダリングについても同様です。

各レンダリング関数は仮想 DOM ツリーを返します。つまり、各コンポーネントは仮想 DOM ツリーに対応します。
つまり、レンダリングの目的は仮想 DOM を作成し、このコンポーネントが正確に何を表示するかということです。
console.log('レンダリング'); ↓

話題外ですが、console.dir() はオブジェクトのすべてのプロパティとメソッドを表示できます。

戻り値がない場合、ページには実際の DOM が存在しません。
リターンを追加↓

h関数名はカスタムで、h関数の構造はh(ラベル、{独自の属性}、[サブ要素])です。
h関数を使用してサブ要素の作成を続けます。他の属性もあるため、[ ]内に別のサブ要素を作成します。

h関数で判定する。オブジェクトでない場合はテキストノードである。↑途中の構成は省略されていると考えられる

ページ上にレンダリングされます。
console.log(vnode);

h1 子要素↓

.elm を通じて実際のノードに対応する

h('h1','{ {title}}') は絶対に受け入れられません。h('h1',this.title) にする必要があります。

2. 仮想 DOM が必要な理由

Vue では、ビューをレンダリングすると render 関数が呼び出されます。このレンダリングは、コンポーネントが作成されたときだけでなく、ビューが依存するデータが更新されたときにも発生します。レンダリング中に実際の DOM を直接使用すると、実際の DOM の作成、更新、挿入によってパフォーマンスが大幅に低下し、レンダリング効率が大幅に低下します。
そのため、レンダリング時に、Vue は実際の DOM ではなく仮想 DOM を使用し、主にレンダリング効率の問題を解決します。

初めて読み込むときに実 DOM を生成することは避けられず、必要なことなので、実 DOM を生成することに問題はありません。
レンダリング関数は一度だけではなく、データが変更されるたびに生成されます。
しかし、レンダリングで createElement を使用すると、毎回新しい DOM 要素が生成されるため、コストがかかりすぎます。

3. 仮想DOMはどのようにして実際のDOMに変換されるのか

コンポーネント インスタンスが初めてレンダリングされるとき、まず仮想 DOM ツリーを生成し、ノードを深さ優先でトラバースし、属性を設定してから、仮想 DOM ツリーに基づいて実際の DOM を作成します。実際の DOM をページ内の適切な位置にマウントし、div#app を直接置き換えます。この時点で、各仮想 DOM は実際の DOM に対応します。

div#appが直接置き換えられているため、等しくありません。

コンポーネントがレスポンシブなデータ変更の影響を受け、再レンダリングする必要がある場合でも、レンダリング関数を再度呼び出して新しい仮想 DOM ツリーを作成し、新しいツリーと古いツリーを比較します。比較を通じて、Vue は最小の更新量を見つけ、必要な実際の DOM ノードを更新して、実際の DOM への変更を最小限に抑えます。

diff アルゴリズムを使用して、2 つの仮想 DOM が異なるかどうかを確認し、対応するノードの実際の DOM を変更して目的の効果を実現し、変更を最小限に抑えて効率を向上させます。

4. テンプレートと仮想DOMの関係

スキャフォールディングによって構築された仮想DOM

Vue フレームワークにはコンパイル モジュールがあり、主にテンプレートをレンダリング関数に変換する役割を担っており、レンダリング関数はそれを呼び出した後に仮想 DOM を取得します。

コンパイル プロセスは 2 つのステップに分かれています (babel と webpack はどちらもこの方法で作成されます)。

テンプレート文字列をAST（抽象構文木、ツリー構造で内容を記述する）に変換し、ASTをレンダリング関数に変換します。

AST↓、ASTはスタックで構築されていることを述べておきます

従来のインポート方法 (src) を使用する場合、コンポーネントが初めてロードされたときにコンパイル時間が発生し、これをランタイムコンパイルと呼びます。繰り返しますが、ステップ 1 は非常に時間がかかります。
vue-cli のデフォルト設定の場合、パッケージ化中にコンパイルが行われ、これをテンプレートのプリコンパイルと呼びます。
コンパイルは、パフォーマンスを非常に消費する操作です。プリコンパイルにより、実行時のパフォーマンスを効果的に向上できます。さらに、実行時にコンパイルが不要になるため、vue-cli はパッケージ化時に vue のコンパイル モジュールを除外して、パッケージ サイズを削減します。

上記にテンプレートが書かれていない場合

エラーが報告されますが、vue.config.jsで設定できます。

module.export={runtimeCompiler:true}

コンパイルされたコンテンツが追加され、コンテンツが大きくなるため、推奨されません。 (パッケージ化を高速化するために esbuild と vite について言及したいと思いますが、私はまだ使用していません。)

テンプレートが存在するのは、開発者がインターフェース コードを書きやすくするためだけです。
最終的にVueが実行される際に必要となるのはテンプレートではなくレンダリング関数です。そのため、テンプレート内の各種構文は仮想DOM内には存在せず、すべて仮想DOMの構成になります。

同等

例: ディレクトリを自動生成する

ここで、スロット内のコンテンツに基づいてディレクトリを自動的に生成できるコンポーネントを作成する必要があります。

Vue 仮想 DOM の問題に関するこの記事はこれで終わりです。Vue 仮想 DOM に関するその他の関連コンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。