1.概要
前の章では、応答性の原則を紹介しました。監視対象のプロパティの値が変化すると、関連するサブスクリプションウォッチャーオブジェクトの更新がトリガーされます。この属性がテンプレートで使用されている場合、レンダーウェッチャーの更新がトリガーされ、最終的にdomの更新が認識されます。dom更新を実装する方法は2つあり、1つは「全量」のグローバル更新、もう1つは「増分」部分更新ですが、後者の方が効率的です。VUEは一種の採用であり、最初に新旧のvdomを比較してパッチを作成し、domのローカル更新を実現します。
この章では主に、差分アルゴリズムの原理であるvdomの比較方法を紹介します。
第二に、差分アルゴリズム
VueはReactのdiffアルゴリズムを利用しており、比較は同じレベル間でのみ実行され、レベル間では実行されません。次の図は、この関係を鮮明に説明しています。
DOMインスタンスを見てみましょう
<!--变换前-->
<div><!--第一层级-->
<div> <!--第二层级-->
<p>vue</p><!--第三层级-->
<input type="text"></input><!--第三层级-->
</div>
<span>diff</span><!--第二层级-->
</div>
<!--变换后-->
<div><!--第一层级-->
<div> <!--第二层级-->
<p>vue</p><!--第三层级-->
</div>
<span>diff</span><!--第二层级-->
<input type="text"></input><!--第二层级-->
</div>最適な操作は、3番目のレイヤーの入力ノードを2番目のレイヤーに直接移動することです。他のノードは変更されません。ただし、diffアルゴリズムでは、同じレベルの比較であるため、レベル間を移動することはできません。最初に最初のレベルの要素（div）を比較し、次に2番目のレベル（div、span）を比較してから、3番目のレベル（p、入力）、など。具体的な操作は、2番目のレイヤーで入力ノードを追加してから、3番目のレイヤーでノードを削除することです。
diffアルゴリズムの原理を見てみましょう。次の図は例です。最終的な目的はoldDomをnewDomに変換することです。変換の方法は次のとおりです。
1.古いdomの最初のノードインデックスがoldstart（略してos）としてマークされ、最後のノードがoldend（略してoe）としてマークされ、新しいノードもそれに応じてマークされるなど、新旧のdomの最初と最後のノードにインデックスを作成します。 。
2.ノードの新しいグループと古いグループが互いに比較され、最大で4回比較する必要があることがわかります。つまり、os-> ns、os-> ne、oe-> ns、oe-> neです。
3. 4つの比較の後、5つの結果が生成されます。
（1）os == ns、つまり、古いdomの開始ノードは新しいdomの開始ノードと等しく、osノードの位置は変更されず、os、nsのインデックスは1ビット後方に移動されます。
（2）os == ne、つまり、古いdomの開始ノードは新しいdomの終了ノードと同じです。osノードをoeのインデックス位置の後ろに移動し、osインデックスを1ビット後方に移動し、neインデックスを1ビット前方に移動します。
（3）oe == ns、つまり、古いdomの終了ノードは新しいdomの開始ノードと同じです。oeノードをosインデックス位置に移動し、oeインデックスを1ビット前方に移動し、nsインデックスを1ビット後方に移動します。
（4）oe == ne、つまり、古いdomの終了ノードは新しいdomの終了ノードと等しく、oeノードの位置は変更されず、oe、neのインデックスは1つ前に移動します。
（5）2つのノードグループが等しくない。osとoeの間に、nsと同じノードがあるかどうかを確認します。ある場合は、osノードの位置に移動し、ない場合は、nsノードを作成してosノードの位置に挿入します。前に。nsインデックスは1ビット戻ります。
4.次の2つの条件が満たされ、そのうちの1つが満たされると比較が終了します。
（1）oe>os。olddomが最初にトラバースし、次にnsとneの間にノードを作成し、dom内のneの前に挿入します。。
（2）ne>ns。newdomが最初にトラバースを終了したことを示し、osとoeの間のノードが冗長で直接削除されたことを示します。
上記のプロセスの説明はややあいまいですが、以下の例を使用して、グラフィカルな方法に従って全員のために徐々に分解します。
3.例
オールドダムはついにニューダムに変わります
最初のステップ：
インデックスを追加して比較を開始します。os== ns、aノードの位置は変更されません。同時に、os、nsインデックスは1ビット後方に移動します。
2番目のステップ：
os == ne、ノードbをoeインデックスの後ろに移動し、同時にosインデックスを1ビット後方に移動し、neインデックスを1ビット前方に移動します。
3番目のステップ：
oe == ne、fノードの位置は変更されず、同時に、oe、neのインデックスは1つ前に移動します。
4番目のステップ：
oe == ns、eノードはosインデックス位置に移動し、同時にnsは1ビット後方に移動し、oeは1ビット前方に移動します。
5番目のステップ：
このとき、2つのノードグループは等しくなく、kノードとos-> oeの間のノード要素は同じではありません（d、c）。kノードが作成され、osインデックスの前に挿入されます。同時に、nsインデックスが1ビット戻ります。
6番目のステップ：
このとき、nsとneのインデックス位置は一致しており、ノードの2つのグループも等しくありません。gノードがnsのインデックス位置の前に挿入されると同時に、nsのインデックスが1ビット後ろに移動します。
7番目のステップ：
ne> ns、終了条件を満たし、newdomが最初にトラバースします。osとoeの間のノードは冗長であり、移動されます。
やがて古いものから新しいものへと変わりました。
4.まとめ
この章では、主にdiffアルゴリズムの原理を紹介します。次に、vueのソースコードを組み合わせて、実装プロセスを具体的に分析します。
