Vue: Benutzerdefinierte Direktivenbindungen unterscheiden sich zwischen Komponenten und Elementen

Erstellt am 15. Apr. 2019  ·  6Kommentare  ·  Quelle: vuejs/vue

Ausführung

2.6.10

Reproduktionslink

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

Schritte zum Reproduzieren

  1. Öffnen Sie die Browserkonsole.
  2. Klicken Sie zweimal auf die Schaltfläche Umschalten.

Was wird erwartet?

Die Direktive gibt dieselben Konsolenmeldungen aus, wenn sie auf DOM-Elemente und Komponenten angewendet wird (beim Init und nach dem Klicken auf die Schaltfläche).

Ich bin nicht sicher, was Ausgabe erwartet werden sollte. Entweder

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

oder

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

Was passiert eigentlich?

Nachrichten aus der Direktive sind bei init gleich, unterscheiden sich jedoch nach dem Klicken auf die Schaltfläche.

Tatsächliche Konsolenausgabe:

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

Es scheint, dass die Reihenfolge, in der Direktiven auf DOM-Elemente und -Komponenten angewendet werden, unterschiedlich ist. In meinem Setup habe ich eine benutzerdefinierte Direktive, die auf einem DOM-Attribut mit Konfigurationsdaten basiert. Wenn diese benutzerdefinierte Direktive in einem "regulären Fluss" gebunden / ungebunden ist, funktioniert alles wie erwartet (Direktive wird gebunden, nachdem Elementattribute aktualisiert wurden). Wenn jedoch die Direktive im Fall von Vue "In-Place-Patch-Strategie" gebunden / ungebunden ist, scheint das Verhalten anders zu sein.

bug has workaround
Quelle
picture bponomarenko

Hilfreichster Kommentar

Es scheint, als würde die Direktive mit der alten Komponente aufgerufen (weil sie wiederverwendet wird), aber sie hat immer noch alte Attribute

Legen Sie als Problemumgehung einen Schlüssel für eine der Komponenten fest

picture posva am 15. Apr. 2019
👍2 🚀1

Alle 6 Kommentare

Es scheint, als würde die Direktive mit der alten Komponente aufgerufen (weil sie wiederverwendet wird), aber sie hat immer noch alte Attribute

Legen Sie als Problemumgehung einen Schlüssel für eine der Komponenten fest

posva picture posva am 15. Apr. 2019
👍2 🚀1

@bponomarenko
Was @posva gesagt hat, wird bereits in der Dokumentation behandelt.
Sie können sich darauf beziehen.

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

pistis picture pistis am 15. Apr. 2019

@posva @pistis Danke für die Antwort. Ja, das haben wir schließlich als Workaround verwendet, das musste ich im Ticket erwähnen. Das Vorhandensein des Attributs key erlaubt jedoch nicht die Verwendung von Renderoptimierungen für Vue.js. Wäre toll, wenn es repariert würde.

bponomarenko picture bponomarenko am 16. Apr. 2019

Die Optimierung basiert darauf, dass Sie zustandslose Elemente haben, sodass Vue sich nicht darum kümmert, Ereignishandler oder lokale Status korrekt zu verwalten, wenn Sie versuchen, ein Element wiederzuverwenden. Ich denke, dies ist kein Fehler, kann aber möglicherweise in unseren Dokumenten verbessert werden, damit unsere Benutzer dies leichter verstehen können.

Justineo picture Justineo am 16. Apr. 2019

@ Justineo Ich verstehe die Konzepte hinter einer Optimierung selbst. In meiner Situation ist die benutzerdefinierte Direktive dafür verantwortlich, das Statusattribut dem Element auf bind hinzuzufügen und dieses Attribut auf unbind entfernen. Die Direktive wird perfekt hinzugefügt / entfernt, wenn die Komponente von Vue.js wiederverwendet wird. Die Reihenfolge der Aktualisierung der Komponenteneigenschaften und die Initialisierung der Direktiven unterscheiden sich jedoch in verschiedenen Momenten der Komponentenlebensdauer, was es schwierig macht, benutzerdefinierte Direktiven zu entwickeln.
In der Tat mag eine zusätzliche Dokumentation zu diesen Optimierungstechniken hilfreich sein, aber inkonsistente Direktiven Lebenszyklusereignisse sind meiner Meinung nach eher ein Fehler, der behoben werden muss.

bponomarenko picture bponomarenko am 16. Apr. 2019
👍1

Legen Sie als Problemumgehung einen Schlüssel für eine der Komponenten fest

alidavid0418 picture alidavid0418 am 26. Apr. 2019
❤1
War diese Seite hilfreich?
0 / 5 - 0 Bewertungen

Verwandte Themen

wufeng87 picture wufeng87  ·  3Kommentare
robertleeplummerjr picture robertleeplummerjr  ·  3Kommentare
loki0609 picture loki0609  ·  3Kommentare
paceband picture paceband  ·  3Kommentare
bdedardel picture bdedardel  ·  3Kommentare