Vue: Les liaisons de directives personnalisées diffèrent selon les composants et les éléments

Créé le 15 avr. 2019 · 6Commentaires · Source: vuejs/vue

Version

2.6.10

Lien de reproduction

https://jsfiddle.net/bponomarenko/uom10qd2/

Étapes à suivre pour reproduire

Ouvrez la console du navigateur.
Cliquez deux fois sur le bouton Basculer.

Qu'attend-on?

La directive émettra les mêmes messages de console lorsqu'elle sera appliquée aux éléments DOM et aux composants (à l'initialisation et après un clic sur le bouton).

Je ne sais pas à quoi s'attendre en sortie. Soit

bind: first comp
bind: first elem
unbind: first comp
unbind: first elem
bind: first comp
bind: first elem

bind: first comp
bind: first elem
unbind: second comp
unbind: second elem
bind: first comp
bind: first elem

Que se passe-t-il réellement?

Les messages de la directive sont les mêmes sur init, mais différents après avoir cliqué sur le bouton.

Sortie réelle de la console:

bind: first comp
bind: first elem
unbind: first comp
unbind: second elem
bind: second comp
bind: first elem

Il semble que l'ordre dans lequel les directives sont appliquées aux éléments et composants DOM soit différent. Dans ma configuration, j'ai une directive personnalisée qui repose sur un attribut DOM avec des données de configuration. Lorsque cette directive personnalisée est liée / non liée dans un "flux régulier" - tout fonctionne comme prévu (la directive se lie après la mise à jour des attributs d'élément). Cependant, lorsque la directive est liée / non liée dans le cas de Vue "in-place patch strategey", le comportement semble être différent.

bug has workaround

Source

bponomarenko

Commentaire le plus utile

On dirait que la directive est appelée avec l'ancien composant (car il est réutilisé) mais il a toujours de vieux attrs

Pour contourner le problème, définissez une clé sur l'un des composants

posva le 15 avr. 2019

👍2 🚀1

Tous les 6 commentaires

On dirait que la directive est appelée avec l'ancien composant (car il est réutilisé) mais il a toujours de vieux attrs

Pour contourner le problème, définissez une clé sur l'un des composants

posva le 15 avr. 2019

👍2 🚀1

@bponomarenko
Ce que @posva a dit est déjà couvert dans la documentation.
Vous pouvez vous y référer.

https://vuejs.org/v2/guide/conditional.html#Controlling -Reusable-Elements-with-key

pistis le 15 avr. 2019

@posva @pistis Merci pour la réponse. Ouais, c'est ce que nous avons finalement utilisé comme solution de contournement, je devais le mentionner dans le ticket. Cependant, la présence de l'attribut key ne permettra pas d'utiliser les optimisations de rendu de Vue.js. Ce serait formidable de le faire réparer.

bponomarenko le 16 avr. 2019

L'optimisation est basée sur le fait que vous avez des éléments sans état, donc Vue ne prendra pas la peine de gérer correctement les gestionnaires d'événements ou les états locaux lors de la tentative de réutilisation d'un élément. Je pense donc que ce n'est pas un bogue mais qu'il peut être potentiellement amélioré dans nos documents afin que nos utilisateurs puissent le comprendre plus facilement.

Justineo le 16 avr. 2019

@ Justineo Je comprends les concepts derrière une optimisation elle-même. Dans ma situation, la directive personnalisée est chargée d'ajouter l'attribut state à l'élément sur bind et de supprimer cet attribut sur unbind . Et la directive est parfaitement ajoutée / supprimée lorsque le composant est réutilisé par Vue.js. Cependant, l'ordre de mise à jour des propriétés des composants et d'initialisation des directives est différent à différents moments de la durée de vie des composants, ce qui rend difficile le développement de directives personnalisées.
En effet, une documentation supplémentaire sur ces techniques d'optimisation pourrait être utile, mais les événements de cycle de vie des directives incohérents sont plutôt un bogue à corriger à mon avis.

bponomarenko le 16 avr. 2019

👍1