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

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 をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • この記事は、Vueの仮想Domとdiffアルゴリズムを理解するのに役立ちます。
  • Vue仮想DOMの原理
  • Vue 仮想 DOM の問題について
  • Vue 仮想 DOM クイックスタート
  • Vueソースコード解析における仮想DOMの詳しい説明
  • Vue 仮想 Dom から実際の Dom への変換
  • Vue の仮想 DOM に関する知識ポイントのまとめ

<<:  Nginx ロードバランシング/SSL 構成の実装

>>:  MySQLデータベースとテーブルシャーディングの概要

推薦する

JavaScript でエラーが発生しやすい演算子操作の概要

目次算術演算子異常状況1: 特殊値リテラルを含む操作異常な状況 2: 他の種類のデータが数学演算に関...

フレームセットの共通プロパティ(フレームとウィンドウの分割)

フレームとは、Web ページ画面を複数のフレームに分割したもの(複数の Web ページという形で表示...

CSS 疑似要素と疑似クラスの魔法のような使い方についての簡単な説明

CSS は Web ページで非常に重要な役割を果たします。近年の CSS の発展に伴い、疑似要素/疑...

CSSは左固定と右適応のレイアウト方法を実現します

1. フローティングレイアウト1. 最初に固定幅の div をフロートさせます。ドキュメントフローか...

jQueryはシャトルボックス効果を実現します

この記事では、シャトルボックス効果を実現するためのjQueryの具体的なコードを参考までに紹介します...

Dockerを使用してAngularプロジェクトをデプロイする方法

Docker を使用して Angular プロジェクトをデプロイする方法は 2 つあります。1 つは...

Linux で nohup ログ出力が大きすぎる問題の解決方法の詳細な説明

最近、hadoop テスト クラスターで spark ストリーミング プログラムを実行し、その後、n...

MySQLデータベースのデータテーブルに関する詳細な基本操作

目次1. 現在のデータベース内のテーブルを表示する2. テーブルを作成する3. 指定されたテーブル構...

ffmpeg 中国語パラメータの詳細な説明

FFMPEG 3.4.1 バージョンパラメータの詳細使用方法: ffmpeg [オプション] [[入...

CSSを使用してアダプティブスクエアを実装する方法の例

伝統的な方法は、正方形を固定形式で書くことです。長さ=幅を直接書き、次のように固定値を書きます。 。...

Nginx proxy_redirect の使用方法の詳細な説明

今日、Apache の nginx リバース プロキシを実行していたときに、ちょっとした問題に遭遇し...

Linux システムでの gcc コマンドの使用法の詳細な説明

目次1. 前処理2. コンパイル3. コンパイル4. リンク1. gccのインストール(Ubuntu...

HTML テーブルタグチュートリアル (27): セルの背景画像属性 BACKGROUND

セルの背景画像を設定でき、任意の GIF または JPEG 画像ファイルを使用できます。基本的な構文...

MySQL ストアド プロシージャのエラー処理例の詳細な説明

この記事では、例を使用して MySQL ストアド プロシージャのエラー処理について説明します。ご参考...