Neulich bin ich auf ein solches Problem gestoßen. Serverseitig generierter Code weigerte sich, in Safari zu hydratisieren.
Hydration bezieht sich auf einen clientseitigen Prozess, bei dem Vue den vom Server gesendeten statischen HTML-Code in ein dynamisches DOM umwandelt, das auf Datenänderungen auf der Clientseite reagieren kann. Weitere Details hier .
"Prod" fiel gerade und die Entwicklerversion berichtete, dass es Unstimmigkeiten in dom gab. Und da die Entwicklungsversion beim Versuch, Feuchtigkeit zu spenden, nicht abstürzt, sondern nur in der Konsole meldet, war der Fehler nicht offensichtlich, und obwohl wir ihn gefunden haben, ist eine ganze Weile vergangen.
Eine sehr interessante Strategie von Vue ist es, auf die Produktion zu warten und dort zu fallen!
Eintausendfünfhundert Komponenten unterschiedlicher Komplexität haben die Aufgabe nicht vereinfacht. Infolgedessen konnte ich das Problem erkennen, ein geeignetes Gerät finden und mich mit der Entwicklerkonsole anfreunden.
Als Ergebnis stellte sich heraus, dass unsere Anwendung abstürzt, wenn die Fußzeilenkomponente verbunden ist. Und als sie die richtige Linie fanden, trauten sie ihren Augen einfach nicht. Ich habe alles andere als das erwartet.
Es stellte sich heraus, dass beim Löschen der Telefonnummer die Flüssigkeitszufuhr ohne Probleme erfolgte. Als sie anfingen zu graben, stellte sich heraus, dass Safari nach Erhalt des HTML-Layouts das
a- Tag neben dem Telefon ersetzte, was tatsächlich den Dialer verursachte.
Als die Flüssigkeitszufuhr begann, stimmte der Dom der Seite, die vom Server kam, und der neu erstellten virtuellen Seite natürlich nicht überein. Die Anwendung stürzte ab, ohne den Krieg zu erklären.
Dieses Problem wurde auch ganz unerwartet gelöst. Bisher haben wir das Telefon wie gewohnt eingesetzt:
<div>8 (800) 111 2 333</div>
Die Lösung war V-Text-Bindung:
<div v-text=”8 (800) 111 2 333”></div>
Ich habe eine Theorie dazu. Wenn jemand es bestätigen oder widerlegen kann (einen neuen vorschlagen), bin ich sehr dankbar. Soweit ich weiß, erstellt Vue nach Erhalt des Dokuments durch Safari einen virtuellen Dom und vergleicht ihn mit diesem Dokument. Während dieses Dokument hydratisiert wird, erledigt Safari seine dunkle Arbeit und ändert das Telefon in einen Link. Wenn es um dieses Feld geht, ersetzt Vue mit V-Text wieder den Inhalt unseres Div durch das, was wir brauchen. Infolgedessen fallen zum Zeitpunkt des Vergleichs die Doms zusammen, der Flug ist normal.