私は学生で、他の有名なフレームワーク React と同様に、大学のプロジェクト用に独自の仮想 DOM を作成しようとしています (プロップやイベントなどの高度な機能はありません。シンプルにしておきます)。ビューなど。
複数のコード ファイルがある場合 (コード分割) を知りたいだけです。深い子要素に変更を加えた場合、完全な仮想 DOM (すべての子要素と親要素を含む) を比較する必要がありますか、それともその子要素のみを比較する必要がありますか。
完全な新しい仮想 DOM (すべての子を含む) を以前の仮想 DOM と比較する必要がある場合。では、なぜ React や Vue での再レンダリングを気にする必要があるのでしょうか (子に変更を加えると、フレームワークに完全な仮想 DOM の比較が強制されるため)
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Vue の場合、 仮想 DOM は vue2 と vue3 で動作が異なります。
vue3 のアプローチは、
- コンポーネント ファイル内の HTML テンプレートまたはレンダリング関数を解析し、それを仮想ノード表現に変換します。
- 解析すると、動的データに依存するノードが記録されます。
＃＃＃次のように＃＃＃
-
エフェクトは、特定のデータ値を解析するために必要な計算を定義する関数です。- エフェクトには仮想ノードのレンダリング機能も含まれます
- レンダリング機能は仮想ノードを DOM 要素に巧みに変換します
- これで、data1 が変更されるたびに、Vue3 は対応するエフェクトを再実行し、後続のデータ変更の更新をトリガーします。
-
参考文献:Vue3 の反応性-
Vnode 変換-