仮想 dom の理解

コンセプト：

仮想 DOM は、実際にはネイティブ JS オブジェクトを使用して DOM ノードを記述しており、実際には、実際の DOM を抽象化したものにすぎません。最後に、一連の操作を通じて、このツリーを実際の環境にマッピングできます。

これは、js と DOM の間にキャッシュを作成し、パッチ (差分アルゴリズム) を使用して新旧の仮想 DOM レコードをオブジェクトと比較し、オンデマンドで更新し、最終的に実際の DOM を作成するのと同じです。

仮想 dom 原理プロセス:

テンプレート ==> レンダリング関数 ==> 仮想 DOM ツリー ==> 実 DOM

Vuejsはコンパイルによりテンプレート(template)をレンダリング関数(render)に変換し、レンダリング関数を実行することで仮想ノードツリーを取得できます。

モデルを操作すると、対応する Dep の Watcher オブジェクトがトリガーされます。Watcher オブジェクトは、対応する更新を呼び出してビューを変更します。

仮想 DOM の実現原理は主に次の 3 つの部分で構成されます。

JavaScript オブジェクトを使用して実際の DOM ツリーをシミュレートし、実際の DOM を抽象化します。

diff アルゴリズム — 2 つの仮想 DOM ツリー間の差異を比較します。

pach アルゴリズム — 2 つの仮想 DOM オブジェクトの差分を実際の DOM ツリーに適用します。