Comment implémenter un nouveau rendu complet lors de la modification dynamique des données dans un seul composant dans vue

Ci-dessous, je partagerai avec vous une brève discussion sur tout re-rendu lors de la modification dynamique de données dans un seul composant Vue. Il a une bonne valeur de référence et j'espère qu'il sera utile à tout le monde.

En apprenant vue aujourd'hui, j'ai découvert un phénomène intéressant.

Lorsqu'une certaine donnée d'un certain composant est modifiée dynamiquement via un événement de clic, les données correspondantes dans la vue sont modifiées de manière synchrone. Oui, n'est-ce pas une absurdité ? Une fonctionnalité majeure de Vue est la bidirectionnalité des données. obligatoire. Ce qui est intéressant, c'est que la valeur et la vue correspondant à une autre valeur de données utilisant Math.random() écrite par moi sous ce composant ont également changé

Cela me rend, moi, débutant, un peu étrange, j'en ai modifié une, comment se fait-il que deux aient changé ? ? ? ? Si vous y réfléchissez un peu, que pourrait-il se passer lorsque les données sont synchronisées dans les deux sens, par exemple. Est-il vrai que tant qu'un nœud change, le nœud sera rechargé ? ? ?

Je pensais que la raison de cela devait être liée au principe de liaison bidirectionnelle des données de vue, alors je l'ai recherché et j'ai trouvé quelque chose, qui est DocumentFragment. Il me semble l'avoir déjà vu, mais je. n'y prêta pas beaucoup d'attention. Alors à quoi sert-il :

DocumentFragment (fragment de document) peut être considéré comme un conteneur de nœuds. Il peut contenir plusieurs nœuds enfants. Lorsque nous l'insérons dans le DOM, seuls ses nœuds enfants inséreront le nœud cible. , alors considérez-le comme un conteneur pour un ensemble de nœuds. Utiliser DocumentFragment pour traiter les nœuds est beaucoup plus rapide et meilleur que de manipuler directement le DOM.

Emphase manuelle : Lorsque Vue compile, il détourne tous les nœuds enfants de la cible de montage (détourne en réalité, via la méthode append, dans le DOM Le nœud va être automatiquement supprimé) dans le DocumentFragment Après un certain traitement, le DocumentFragment sera renvoyé dans son ensemble et inséré dans la cible de montage.

J'ai compilé ce qui précède pour vous, j'espère que cela vous sera utile à l'avenir.

Articles connexes :

Méthode de valeur sélectionnée JQuery du composant sélectionné

$set et tableau dans vue.js Mise à jour de method_vue .js

Méthode de fractionnement de code dans React-Router4 (basée sur Webpack)

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!