1.コンセプト：
仮想 DOM は、実際にはネイティブ JS オブジェクトを使用して DOM ノードを記述しており、実際には実際の DOM を抽象化したものにすぎません。最後に、一連の操作によって、このツリーを実際の環境にマッピングできます。
これは、js と DOM の間にキャッシュを作成し、パッチ (diff アルゴリズム) を使用して新旧の仮想 DOM レコードをオブジェクトと比較し、必要に応じて更新し、最終的に実際の DOM を作成することに相当します。
2. 仮想ドームの原理プロセス
テンプレート ==> レンダリング関数 ==> 仮想 DOM ツリー ==> 実際の DOM
Vuejs はコンパイルによってテンプレート (template) をレンダリング関数 (render) に変換し、レンダリング関数を実行すると仮想ノード ツリーを取得できます。
モデルを操作すると、対応する Dep で Watcher オブジェクトがトリガーされます。Watcher オブジェクトは、対応する更新を呼び出してビューを変更します。
仮想 DOM の実現原理には、主に次の 3 つの部分が含まれます。
JavaScript オブジェクトを使用して実際の DOM ツリーをシミュレートし、実際の DOM を抽象化します。diff
アルゴリズム (2 つの仮想 DOM ツリーの違いを比較します。pach
アルゴリズム) は、2 つの仮想 DOM オブジェクトの違いを実際の DOM ツリーに適用します。
グラフィック: ここに画像の説明を挿入
レンダリング機能: レンダリング機能は、仮想 DOM を生成するために使用されます。
VNode 仮想ノード: 実際の DOM ノードを表すことができます。createElement メソッドを使用して、VNode を dom ノードにレンダリングできます。簡単に言えば、vnode は、実際の DOM ノード パッチ (パッチング アルゴリズムとも呼ばれます) を作成する方法を説明するノード記述オブジェクトとして理解できます。
これは、vNode を実際の DOM にレンダリングできる仮想 DOM のコア部分です。古い仮想ノードと新しい仮想ノードの違いを比較し、比較結果に従って更新が必要なノードを見つけます。
3. 仮想 DOM のメリット
クロスプラットフォームの利点 – 仮想 DOM は JavaScript オブジェクトに基づいており、実際のプラットフォーム環境に依存しないため、ブラウザー プラットフォーム、Weex、Node などのクロスプラットフォーム機能を備えています。
DOMの動作は遅く、jsの動作効率は高い。DOM 比較操作を JS レイヤーに配置して、効率を向上させることができます。パッチ適用アルゴリズムを使用して、更新が本当に必要なノードを計算し、DOM 操作を最小限に抑えることで、パフォーマンスを大幅に向上させます。仮想 DOM は、基本的に JS と DOM の間のキャッシュです。
レンダリング パフォーマンスの向上 Virtual DOM の利点は、単一の操作ではなく、多数の頻繁なデータ更新の下での合理的かつ効率的なビューの更新です. Virtual DOM は、ブラウザーのパフォーマンスの問題を解決するように設計されています
.