Quelle est la différence entre React et Vue Virtual Dom ?

Il n'y a pas de différence entre le dom virtuel de React et Vue ; le dom virtuel de React et Vue utilise tous deux des objets js pour simuler le DOM réel et utilise le diff du DOM virtuel pour minimiser la mise à jour du DOM réel, ce qui peut réduire les pertes de performances inutiles, par particules Les degrés sont divisés en différents types pour comparer les nœuds DOM au même niveau et effectuer des opérations d'ajout, de suppression et de déplacement.

L'environnement d'exploitation de ce tutoriel : système Windows 10, React version 17.0.1, ordinateur Dell G3.

Quelle est la différence entre le dom virtuel de React et Vue

Aucune différence ?

Le DOM virtuel de React et Vue sont les mêmes. Ils utilisent tous deux des objets JS pour simuler le vrai DOM, puis utilisent le diff du DOM virtuel pour minimiser la mise à jour du vrai DOM.

À l'exception de quelques implémentations, la première moitié des deux (utiliser des objets JS pour simuler le vrai DOM) est presque la même.

Pour la seconde moitié (en utilisant le diff du DOM virtuel pour minimiser la mise à jour du DOM réel), les deux algorithmes sont similaires, y compris le remplacement, la suppression, l'insertion, etc.

Vue et React utilisent tous deux l'algorithme du dom virtuel pour minimiser la mise à jour du vrai DOM, réduisant ainsi les pertes de performances inutiles.

Selon la granularité, il est divisé en diff d'arbre, diff de composant et diff d'élément. Tree diff compare les nœuds DOM au même niveau et effectue des opérations d'ajout, de suppression et de déplacement. Si un composant est rencontré, le processus de comparaison d'arborescence sera redémarré.

Bien que les deux stratégies de mise à jour pour DOM soient différentes, React utilise une différence complète descendante et Vue utilise un modèle d'abonnement partiel. Mais cela n'a en réalité rien à voir avec le dom virtuel. La stratégie de mise à jour de dom est différente. React sera entièrement différent de haut en bas. Vue suivra les dépendances de chaque composant et n'aura pas besoin de restituer l'intégralité de l'arborescence des composants.

1. En réaction, lorsque l'état change, l'arborescence des composants sera entièrement modifiée de haut en bas, restituera la page, régénérera une nouvelle arborescence dom virtuelle, comparera l'ancienne et la nouvelle arborescence dom et effectuera partiellement des correctifs. mettre à jour le DOM. Par conséquent, afin d'éviter les mises à jour inutiles des composants enfants causées par la mise à jour du composant parent, React peut faire des jugements logiques dans ShouldComponentUpdate, réduire les rendus inutiles et régénérer le DOM virtuel pour effectuer un processus de comparaison des différences.2 . vue, convertissez toutes ces propriétés de données en getters/setters via Object.defineProperty. Dans le même temps, l'objet d'instance watcher enregistrera la propriété comme dep lorsque le composant est rendu. Lorsque le setter dans l'élément dep est appelé, watch sera invité à recalculer, provoquant la mise à jour du composant associé.

L'algorithme Diff utilise la clé de l'élément pour déterminer si l'élément est ajouté, supprimé ou modifié, réduisant ainsi le rendu inutile des éléments.

Apprentissage recommandé : "

Tutoriel vidéo React

"

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!