composant javascript-vue créé

Question

Comme le montre l'image, lorsque quatre boutons sont cliqués afin d'afficher quatre icônes différentes, pourquoi la méthode créée du composant icône n'est-elle appelée que la première fois

Answer 1

Ce phénomène est très intéressant. Je ne l'ai jamais remarqué. La raison précise est encore à l'étude.

On suppose que cela pourrait être causé par l'introduction du DOM virtuel dans la version vue2.x, ce qui entraîne certains processus d'optimisation (car la version 1.x n'a pas ce phénomène).

Il semble que dans le processus de création dynamique d'instances d'icônes, le framework porte un jugement et utilise la moindre instance pour le rendu. Par exemple, lorsque la valeur de l'index passe de 1 à 2, Vue sait qu'il existe actuellement une instance d'icône et qu'une seule instance d'icône sera affichée à l'avenir, donc l'instance existante est réutilisée. Il en va de même pour l'ensemble du processus. , ce n'est donc qu'une fois la création effectuée. Si les quatre conditions v-if ci-dessus sont modifiées de manière à ce que deux conditions soient remplies à un certain moment (c'est-à-dire que deux icônes soient affichées en même temps), alors la création aura lieu deux fois.

Mise à jour :

Des preuves ont été trouvées sur le site officiel Concernant l'utilisation des clés, elles sont généralement sous forme de rendu de liste :

L'attribut spécial key est principalement utilisé comme indice pour l'algorithme DOM virtuel de Vue pour identifier les VNodes lors de la comparaison de la nouvelle liste de nœuds avec l'ancienne liste. Sans clés, Vue utilise un algorithme qui minimise le mouvement des éléments et essaie de corriger/réutiliser les éléments. du même type en place autant que possible. Avec des clés, il réorganisera les éléments en fonction du changement d'ordre des clés, et les éléments avec des clés qui ne sont plus présentes seront toujours supprimés/détruits.

Mais le site officiel dit aussi :

Il peut également être utilisé pour forcer le remplacement d'un élément/composant au lieu de le réutiliser. Cela peut être utile lorsque vous souhaitez : Déclencher correctement les hooks de cycle de vie d'un composant

.

Il s'agit bien du processus d'optimisation du DOM virtuel. Si vous souhaitez que l'icône ci-dessus soit créée à chaque fois, ajoutez un attribut de clé différent à chacune.

Answer 2

Je ne comprends pas très bien quelle question vous posez. Vous pouvez jeter un œil au crochet du cycle de vie de vue

.