React または Vue の仮想 DOM の内部動作を理解する

Question

私は学生で、他の有名なフレームワーク React と同様に、大学のプロジェクト用に独自の仮想 DOM を作成しようとしています (プロップやイベントなどの高度な機能はありません。シンプルにしておきます)。ビューなど。

複数のコード ファイルがある場合 (コード分割) を知りたいだけです。深い子要素に変更を加えた場合、完全な仮想 DOM (すべての子要素と親要素を含む) を比較する必要がありますか、それともその子要素のみを比較する必要がありますか。

完全な新しい仮想 DOM (すべての子を含む) を以前の仮想 DOM と比較する必要がある場合。では、なぜ React や Vue での再レンダリングを気にする必要があるのでしょうか (子に変更を加えると、フレームワークに完全な仮想 DOM の比較が強制されるため)

Answer 1

Vue の場合、 仮想 DOM は vue2 と vue3 で動作が異なります。

vue3 のアプローチは、

1. コンポーネント ファイル内の HTML テンプレートまたはレンダリング関数を解析し、それを仮想ノード表現に変換します。
2. 解析すると、動的データに依存するノードが記録されます。
＃＃＃次のように＃＃＃

エフェクトは、特定のデータ値を解析するために必要な計算を定義する関数です。

4. エフェクトには仮想ノードのレンダリング機能も含まれます
5. レンダリング機能は仮想ノードを DOM 要素に巧みに変換します
6. これで、data1 が変更されるたびに、Vue3 は対応するエフェクトを再実行し、後続のデータ変更の更新をトリガーします。

参考文献:

Vue3 の反応性
Vnode 変換