キーは各vnodeの一意なIDで、キーを頼りにoldVnodeの対応するvnodeノードをより正確かつ高速に取得することができます。
より正確なキーはインプレース再利用されないため、a.key === b.keyの比較はインプレース再利用を避けることができます。そのため、より正確です。
より高速 キーの一意性を使用してマップオブジェクトを生成し、対応するノードを取得する方が、トラバーサルアプローチよりも高速です。
vueもreactもdiffアルゴリズムを使って新旧の仮想ノードを比較してノードを更新します。クロス比較では、新ノードのheadとtailを旧ノードとクロス比較した結果がない場合、新ノードのキーで旧ノードの配列のキーを比較し、対応する旧ノードを探します。キーが見つからない場合は、新しいノードとみなされます。キーがない場合は、トラバーサルを使って対応する古いノードを探します。一つはマップマッピングで、もう一つはトラバーサル検索です。比較すると、マップマッピングの方が高速です。
キーなしでシンプルなテンプレートを使用した場合、ノードをより効率的に再利用できることを前提に、ノードの追加と削除に時間がかかるため、差分速度もキーなしの方が速くなります。vueのドキュメントでは、これをデフォルトモードと呼んでいます。しかし、これはキーの問題ではなく、キーがなくてもその場でノードを再利用できることでパフォーマンスが向上するということです。このモードには、トランジションが発生しなかったり、バインドされたデータステートを持つ一部のノードでステートにずれが生じたりといった、隠れた副作用があります。また、diff アルゴリズムの実行時に対応するノードをより速く見つけて diff の速度を向上させるというキーの役割もありますが、これには賛否両論があります。
モイエ・ヤングの組織化
