Vueにおける仮想DOMの理解のまとめ

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

moutedのコールバックでは、_vnodeを出力できます。

図から、_vnode には次の主な属性があることがわかります。

• タグ: コンポーネントのタグ名、
• データ: コンポーネントのプロパティ、
• 子: コンポーネントの子タグ
• 親: 親要素

レンダリング機能:

機能: 仮想DOMを作成する

各コンポーネントには仮想 DOM があり、仮想 DOM はレンダリング関数によって作成されます。

仮想DOMツリーを使用する目的: レンダリング効率を向上させる

Vue では、ビューがレンダリングされるときにレンダリング関数が呼び出されます。このレンダリングは、コンポーネントが作成されたときだけでなく、ビューが依存するデータが更新されたときにも行われます。

実際のDOMの作成と更新によるものです。挿入などの操作はパフォーマンスを大幅に消費し、レンダリング効率を低下させるため、実際の DOM の代わりに仮想 DOM ツリーが使用されます。

仮想DOMを実際のDOMに変換する方法

コンポーネントインスタンスの最初のレンダリング：仮想 DOM ツリーを生成し、仮想 DOM ツリーに基づいて実際の DOM を作成し、実際の DOM をページの適切な位置にマウントします。このとき、各仮想 DOM は実際の DOM に対応します。

注: 仮想 DOM では、すべての elm 属性は実際の DOM です。つまり、生成された仮想 DOM は実際の DOM も作成します。つまり、最初のレンダリングでは、Vue は単純に DOM 要素を作成するよりも効率が悪いということです。Vue の効率は、仮想 DOM と応答性の高いデータ変更の比較に反映されています。

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

実際の DOM 属性の数は仮想 DOM 属性の数よりもはるかに多く、実際の DOM を追加または削除すると、リフローと再描画の問題が発生します。これはパフォーマンスに非常に負荷がかかります。

注: 実際のDOMと通常のオブジェクトの作成にかかる時間の比較

DOM オブジェクトの作成には、通常のオブジェクトの作成よりも 20 倍以上の時間がかかることがわかります。

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

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

コンパイルプロセスは2つのステップに分かれています

1. テンプレート文字列を AST (抽象構文木) に変換します。js ツリー構造を使用して元のコードを記述します。次の図は、AST オンライン変換による構造を示しています。

2. ASTをレンダリング関数に変換する

ランタイムコンパイルとテンプレートのプリコンパイル

従来のインポート方法を使用すると、コンポーネントが最初にロードされたときにコンパイルが行われ、これをランタイム コンパイルと呼びます。

vue-cli のデフォルトでは、パッケージ化時 (npm run build / serve) にコンパイルが行われるため、テンプレートのプリコンパイルになります。

コンパイルは、パフォーマンスを非常に消費する操作です。プリコンパイルにより、実行時のパフォーマンスを効果的に向上できます。さらに、実行時にコンパイルが不要になるため、vue-cli はパッケージ化時に vue のコンパイル モジュールを除外して、パッケージ サイズを削減します。テンプレートが存在するのは、開発者がコードを書きやすくするためだけです。

知識ポイントの拡張:

仮想DOMの役割

現在主流となっているフレームワークはすべて、宣言型 DOM 操作用のフレームワークです。状態と DOM 間のマッピング関係を記述するだけで済みます。フレームワークは、状態をビュー (実際の DOM) に変換するのに役立ちます。

最も単純なアプローチは、状態をビューにレンダリングし、状態が更新されるたびにビュー全体を更新することです。

このアプローチのパフォーマンスは想像できます。より良いアイデアは、状態が変化すると、その状態に関連する DOM ノードのみが更新されることです。仮想 DOM はこのアイデアを実装する 1 つの方法にすぎません。

具体的な手順:

状態 -> 実ドメイン（初期）

状態 -> 仮想 DOM -> 実際の DOM (仮想 DOM を使用)

状態が変化すると、新しい仮想 DOM が生成され、以前のものと現在のものを比較して更新が必要な部分を見つけ、実際の DOM が更新されます。

Vue の仮想 DOM

実際の DOM はノード (Node) で構成され、仮想 DOM は仮想ノード (vNode) で構成されます。

Vue では、仮想 DOM は主に次の 2 つのことを行います。

実ノード（Node）に対応する仮想ノード（vNode）を提供する

新しい仮想ノードと古い仮想ノードを比較し、違いを見つけてビューを更新します。

以上で、Vue の仮想 DOM を理解するための知識ポイントのまとめの記事は終了です。Vue の仮想 DOM を理解するためのより詳しい情報は、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き閲覧してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。