Comprendre le fonctionnement interne du DOM virtuel dans React ou Vue

Question

Je suis étudiant et j'essaie de créer mon propre DOM virtuel pour mon projet universitaire (il n'aura pas de fonctionnalités avancées comme des accessoires ou des événements, je vais rester simple) comme d'autres frameworks célèbres React, Vue etc. . Même.

Je veux juste savoir quand nous avons plusieurs fichiers de code (fractionnement de code). Si j'apporte une modification à un élément enfant profond, dois-je comparer le DOM virtuel complet (y compris tous les éléments enfants et les éléments parents), ou dois-je comparer uniquement cet élément enfant.

Si je dois comparer le nouveau DOM virtuel complet (y compris tous les enfants) avec le DOM virtuel précédent. Alors pourquoi devrais-je me soucier du nouveau rendu dans React ou Vue (puisque toute modification apportée à l'enfant forcera le framework à comparer le DOM virtuel complet)

Answer 1

Pour Vue, Le DOM virtuel fonctionne différemment dans vue2 et vue3.

L'approche de

vue3 est la suivante :

1. En analysant des modèles HTML ou en rendant des fonctions dans des fichiers de composants et en les convertissant en représentations de nœuds virtuels.
2. Lors de l'analyse, il enregistrera les nœuds qui ont des dépendances aux données dynamiques.
3. Comme indiqué ci-dessous

4. Les effets sont des fonctions qui définissent les calculs requis pour analyser certaines valeurs de données.
5. L'effet inclut également la fonction de rendu des nœuds virtuels
6. La fonction de rendu convertit intelligemment les nœuds virtuels en éléments DOM
7. Désormais, chaque fois que data1 change, Vue3 réexécutera l'effet correspondant et déclenchera des mises à jour pour les modifications de données ultérieures.

Référence :

1. Vue3 Réactif
2. Conversion de nœud V< /里>