I.はじめに

この段階で主流のフレームワークの 1 つとして、Vue は多くのプロジェクトでプロジェクトのフロントエンドモジュールを構築するために使用されています。この記事では、誰もが Vue をよりよく理解できるように、Vue でページをレンダリングするときに発生する仮想 DOM 比較で使用されるアルゴリズムを主に紹介します。

2.はじめに

MVVM、つまり、モデル、ビュー、ビューモデル、ビジネスレイヤー、ビューレイヤー、およびバインディングレイヤーの 2 つ、Vue の設計はこのアーキテクチャを指します。

<h1>{
   
   {title}}</h1>

<script lang='ts' setup>
    const title = 'this is title'
</script>

In Vue, <h1>tags are managed by the view layer, but const title = 'this is title'by the model layer. ビューモデルレイヤーが行う必要があるのは、2 つのデータの同期を維持することです。ラベルデータを更新するには、再レンダリングする必要があります。

レスポンシブデータ変更のレンダリングは古いvnode存在であるため、Vue は作成された DOM 要素を最大限に再利用する必要があり、再利用の前提は新旧を比較してvnode更新が必要なコンテンツを見つけ出し、最小化することです。交換。更新プロセス:

データを変更してセッターをトリガーし、Dep.notify を呼び出して、すべてのサブスクライバーに通知します Watcher;
render 関数を再実行してを生成しますnewVnode。
Execution patch(vnode,newVnode)、diffアルゴリズムは、更新が必要な最終ノードを取得します。

3.差分アルゴリズム

1.差分アルゴリズムとは

差分アルゴリズムは、仮想ノードを比較し、パッチオブジェクトを返して 2 つのノード間の差分を格納し、最後にパッチによって記録されたメッセージを使用して Dom をローカルに更新することです。

言い換えれば分かりやすい

diff の処理は、patch という関数を呼び出し、新旧のノードを比較し、比較しながら実際の DOM にパッチを適用することです。

2. 手順

状態が変化すると、JS オブジェクト構造によって表される DOM ツリーを再構築します。
新しい DOM ツリーを古い DOM ツリーと比較し、相違点を記録します (diff)。
記録された差分を実際の DOM に適用する (パッチ)

3.具体的な方法

基本戦略

同レベル比較
左右を中央で比較

例えば

新旧はvnode以下の通りです。

最初のサイクル:が指しているとが指しているとが指しているとが指している F をそれぞれ比較し (以下の比較方法は同じです。スキップします)、それらが同じノードを持っていることを見つけてoldVnode、それをstartIndex直接再利用します。as 実ノード、では1 ビット前方、では 1 ビット後方。AendIndexDnewVnodestartIndexDnewVnodeendIndexDDoldVnodeendIndexnewVnodestartIndex

2 番目のサイクル: A、と比較CしC、同じものFを取得しC、ノードを再利用しC、ポインターを移動します。

3 番目のサイクル:と比較して、再利用可能なノードAがないことを確認し、新しいノードを作成して、1 ビット後方に移動します。BEFEnewVnodestartIndex

4 サイクル: A、と比較BしB、FB と同じ値を取得し、ノードを多重化しB、ポインターを移動します。

5 番目のサイクル:とAを比較し、A と同じ値を取得し、ノードを再利用し、ポインターが移動した後にヘッドポインターがテールポインターよりも大きいことを確認し、ヘッドポインターとテールポインターの間にすべてのノード ( )を作成し、サイクルから飛び出します。AFAoldVnodenewVnodeF

4.まとめ

データが変更されると、サブスクライバーウォッチャーは patch を呼び出して実際の DOM にパッチを適用します。
isSameVnodeで判断、同じならpatchVnodeメソッドを呼ぶ
patchVnode は次のことを行います。
- el と呼ばれる、対応する実際の dom を見つけます。
- 両方にテキストノードがあり、等しくない場合は、el テキストノードをVnodeテキストノードに設定します。
- oldVnode子ノードがあるのにない場合はVNode、el 子ノードを削除します。
- oldVnode子ノードがない場合VNode、VNode子ノードが実現され、el に追加されます。
- 両方に子ノードがある場合は、updateChildren 関数を実行して子ノードを比較します。

Vue diff アルゴリズムの分析