これは本質的に、ビュー インターフェース構造を記述するために使用される共通の 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 をよろしくお願いいたします。 以下もご興味があるかもしれません:
|
>>: MySQLデータベースとテーブルシャーディングの概要
この記事では、VMware Workstation14 ProにUBuntu17.04をインストール...
この記事の例では、Vueスライダー検証の実装を共有しています。コードは次のとおりです。 <テン...
目次1. インストール環境2. インストール手順ステップ1: インストールパッケージをダウンロードす...
目次イベントループmiscroTask (マイクロタスク) UI レンダリング (重要なポイント)次...
CSS ビューポート ユニットはここ数年登場しており、時が経つにつれて、ますます多くの開発者が使用し...
nginx はリクエストを受信すると、まず server_name でサーバーを照合し、次にサーバー...
1. ディレクトリホワイトリストを設定する:指定されたリクエストパスに制限を設定しないでください。た...
目次1. 原則の概要クエリキャッシュシステム変数1. クエリキャッシュを持つ2. クエリキャッシュ制...
背景Docker の人気は、コンテナの共有と移植が容易であることと密接に関係しています。ユーザーは、...
この記事の例では、キャンバスをベースにした超クールな水の光の効果を実装するための具体的なコードを参考...
Linux の優れた点は、マルチユーザー、マルチタスク システムにあります。 Linux では通常、...
スワップ メモリとは、主に物理メモリが不足している場合に、システムがハード ディスク領域の一部をサー...
目次序文インデックス プッシュダウンとは何ですか?インデックスプッシュダウン最適化の原理インデックス...
0. タグとは何ですか? XML/HTML コードコンテンツをクリップボードにコピー<入力 t...
1.MySQLのバージョン [root@clq システム]# mysql -v MySQL モニター...