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データベースとテーブルシャーディングの概要

推薦する

VMware WorkStation 14 pro インストール Ubuntu 17.04 チュートリアル

この記事では、VMware Workstation14 ProにUBuntu17.04をインストール...

Vueはシンプルなスライダー検証を実装する

この記事の例では、Vueスライダー検証の実装を共有しています。コードは次のとおりです。 <テン...

Linux環境にJDK1.8をインストールする

目次1. インストール環境2. インストール手順ステップ1: インストールパッケージをダウンロードす...

Vue nextTickの原理の分析

目次イベントループmiscroTask (マイクロタスク) UI レンダリング (重要なポイント)次...

高速レイアウトのための CSS ビューポート単位

CSS ビューポート ユニットはここ数年登場しており、時が経つにつれて、ますます多くの開発者が使用し...

Nginx がリクエストを処理する際のマッチングルールの詳細な分析

nginx はリクエストを受信すると、まず server_name でサーバーを照合し、次にサーバー...

nginx でディレクトリ ホワイトリストと IP ホワイトリストを設定する方法

1. ディレクトリホワイトリストを設定する:指定されたリクエストパスに制限を設定しないでください。た...

MySQL クエリ キャッシュのグラフィカルな説明

目次1. 原則の概要クエリキャッシュシステム変数1. クエリキャッシュを持つ2. クエリキャッシュ制...

Dockerコンテナのインポ​​ートとエクスポートに関するチュートリアル

背景Docker の人気は、コンテナの共有と移植が容易であることと密接に関係しています。ユーザーは、...

キャンバスをベースにした超クールな水光効果を実現

この記事の例では、キャンバスをベースにした超クールな水の光の効果を実装するための具体的なコードを参考...

Linuxのファイル権限の詳細な紹介

Linux の優れた点は、マルチユーザー、マルチタスク システムにあります。 Linux では通常、...

Linux スワップメモリ​​を拡張する方法

スワップ メモリとは、主に物理メモリが不足している場合に、システムがハード ディスク領域の一部をサー...

MySQL インデックス プッシュダウンを 5 分で学ぶ

目次序文インデックス プッシュダウンとは何ですか?インデックスプッシュダウン最適化の原理インデックス...

HTMLのタグについての簡単な説明

0. タグとは何ですか? XML/HTML コードコンテンツをクリップボードにコピー<入力 t...

MySQL5.7 シングルインスタンス自動起動サービスの設定プロセス

1.MySQLのバージョン [root@clq システム]# mysql -v MySQL モニター...