これは本質的に、ビュー インターフェース構造を記述するために使用される共通の 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データベースとテーブルシャーディングの概要
目次算術演算子異常状況1: 特殊値リテラルを含む操作異常な状況 2: 他の種類のデータが数学演算に関...
フレームとは、Web ページ画面を複数のフレームに分割したもの(複数の Web ページという形で表示...
CSS は Web ページで非常に重要な役割を果たします。近年の CSS の発展に伴い、疑似要素/疑...
ルートジャンプ this.$router.push('/course'); this...
1. フローティングレイアウト1. 最初に固定幅の div をフロートさせます。ドキュメントフローか...
この記事では、シャトルボックス効果を実現するためのjQueryの具体的なコードを参考までに紹介します...
Docker を使用して Angular プロジェクトをデプロイする方法は 2 つあります。1 つは...
最近、hadoop テスト クラスターで spark ストリーミング プログラムを実行し、その後、n...
目次1. 現在のデータベース内のテーブルを表示する2. テーブルを作成する3. 指定されたテーブル構...
FFMPEG 3.4.1 バージョンパラメータの詳細使用方法: ffmpeg [オプション] [[入...
伝統的な方法は、正方形を固定形式で書くことです。長さ=幅を直接書き、次のように固定値を書きます。 。...
今日、Apache の nginx リバース プロキシを実行していたときに、ちょっとした問題に遭遇し...
目次1. 前処理2. コンパイル3. コンパイル4. リンク1. gccのインストール(Ubuntu...
セルの背景画像を設定でき、任意の GIF または JPEG 画像ファイルを使用できます。基本的な構文...
この記事では、例を使用して MySQL ストアド プロシージャのエラー処理について説明します。ご参考...