Vue: Out-In-Übergangsproblem mit asynchronen Komponenten

Erstellt am 26. Mai 2017  ·  17Kommentare  ·  Quelle: vuejs/vue

Ausführung

2.3.0

Reproduktionslink

https://jsfiddle.net/z11fe07p/1959/

Schritte zum Reproduzieren

Was wird erwartet?

Die vorherige Komponente (A) sollte verschwinden, bevor Komponente B angezeigt wird

Was passiert eigentlich?

Die Komponenten A und B sind gleichzeitig sichtbar


Dieses Verhalten tritt nur auf, wenn Komponente B noch nicht geladen ist. Wenn Sie das nächste Mal von A nach B wechseln, ist alles in Ordnung.

bug

Hilfreichster Kommentar

Ich habe gelöst, warte eine Minute ...

Beim Rendern von async components müssen wir einen Platzhalter für versteckte Elemente verwenden

Alle 17 Kommentare

Danke, sieht aus wie ein Käfer. Vielen Dank für den prägnanten und klaren Vorwurf

Es scheint, dass die asynchrone Komponente zu früh gerendert wird

Ich habe gelöst, warte eine Minute ...

Beim Rendern von async components müssen wir einen Platzhalter für versteckte Elemente verwenden

Sind Sie sicher, dass dies die asynchronen Komponentenübergänge löst? Ich bin neu in Vue, daher ist es wahrscheinlich ein Fehler in meinem Code, aber mein Repo unten zeigt immer noch den Fehler beim Übergang zwischen Ausgang und Eingang, bei dem die eingehende Komponente nicht auf den Abschluss des Ausblendens wartet. Hinweis Ich verwende den oben genannten http-vue-loader.

Async Component Transition Bug Demo

Dies scheitert in der Tat immer noch mit dem gleichen Repro. Der Übergang beginnt sofort, wie @clingor sagte

@posva

https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.js

Diese Version enthält anscheinend keinen Fixcode

Das Update wurde noch nicht veröffentlicht. Wir haben Probleme geschlossen, wenn der Patch in der Filiale dev landet, aber möglicherweise noch nicht in einer öffentlichen Version.

2.3.4 enthält nur einen einzigen Fix für einen Speicherverlust (der eine höhere Priorität hat).

Mein schlechtes, ich habe gerade gesehen, dass das Commit vor der Veröffentlichung war und fand es seltsam. Es wäre sowieso in den Versionshinweisen gewesen

Entschuldigen Sie das Missverständnis und vielen Dank, dass Sie das Problem bestätigt haben!

Dies scheint in 2.4.2 noch nicht behoben zu sein. Steht die Veröffentlichung noch aus?

Async Component Transition Bug Demo

@clingor Bist du sicher? Die jsfiddle funktioniert gut

Die Geige funktioniert korrekt, aber der Code in meinem Beispiel GitHub Repo zeigt immer noch das gleiche Verhalten. Es könnte die http-vue-loader- Hilfsbibliothek sein oder vielleicht etwas in meinem Code. Dieses Beispiel ist einfach und wurde erstellt, um das Problem zu demonstrieren.

@FranckFreiburger Würde eine dieser VueJS-Änderungen ein Update auf http-vue-loader erfordern?

Wenn Sie das Problem ohne den Loader auf eine jsfiddle setzen, kann ich einen Blick darauf werfen

Am 21.07.2017 21:16 schrieb "Chris Lingor" [email protected] :

Dies scheint in 2.4.2 noch nicht behoben zu sein. Steht das noch aus?
Freisetzung?

Async Component Transition Bug Demo
https://github.com/clingor/githubIssuesFileShare/tree/master/vue-async-component-bug

- -
Sie erhalten dies, weil Sie diesen Thread abonniert haben.
Antworte direkt auf diese E-Mail und sieh sie dir auf GitHub an
https://github.com/vuejs/vue/issues/5760#issuecomment-317088909 oder stumm schalten
der Faden
https://github.com/notifications/unsubscribe-auth/Aclno69wDoTlZziST6eSocqxEnn8mFx-ks5sQPkKgaJpZM4Nng7j
.

Der Schuldige ist <keep-alive> !

Schritte zum Reproduzieren

  1. siehe https://jsfiddle.net/z11fe07p/2382/
  2. Klicken Sie auf die Schaltfläche "B"

@posva , kannst du reproduzieren?

@FranckFreiburger Dafür solltest du eine neue Ausgabe eröffnen. Danke übrigens 😉

War diese Seite hilfreich?
0 / 5 - 0 Bewertungen