L'autre jour, j'ai rencontré un tel problème. Le code généré côté serveur a refusé de s'hydrater dans Safari.
L'hydratation fait référence à un processus côté client au cours duquel Vue prend le HTML statique envoyé par le serveur et le transforme en un DOM dynamique qui peut répondre aux changements de données côté client. Plus de détails ici .
"Prod" vient de tomber, et la version dev a signalé qu'il y avait des divergences dans dom. Et comme la version de développement ne plante pas en essayant de s'hydrater, mais la signale uniquement dans la console, l'erreur n'était pas évidente et pendant que nous la trouvions, un certain temps s'est passé.
Une stratégie très intéressante de Vue est d'attendre la production et d'y tomber!
Quinze cents composants de complexité variable n'ont pas simplifié la tâche. En conséquence, j'ai réussi à voir le problème, à trouver un appareil approprié et à me lier d'amitié avec la console du développeur.
En conséquence, il s'est avéré que notre application se bloque lorsque le composant de pied de page est connecté. Et quand ils ont trouvé la bonne ligne, ils n'en ont tout simplement pas cru leurs yeux. Attendu autre chose que cela.
Il s'est avéré que lorsque vous supprimez le numéro de téléphone, l'hydratation s'est déroulée sans problème. Quand ils ont commencé à creuser, il s'est avéré que Safari, après avoir reçu la mise en page html, a substitué la balise a à côté du téléphone, ce qui a en fait causé le numéroteur.
Naturellement, lorsque l'hydratation a commencé, le dom de la page provenant du serveur et le virtuel nouvellement construit ne correspondaient pas. L'application s'est bloquée sans déclarer la guerre.
Ce problème a également été résolu de manière inattendue. Jusqu'à présent, nous avons inséré le téléphone de la manière habituelle:
<div>8 (800) 111 2 333</div>
La solution était la liaison v-text:
<div v-text=”8 (800) 111 2 333”></div>
J'ai une théorie à ce sujet. Si quelqu'un peut le confirmer ou le réfuter (en suggérant un nouveau), je serai très reconnaissant. Si je comprends bien, après que Safari a reçu le document, Vue construit un dom virtuel et le compare avec ce document et pendant qu'il hydrate ce document, Safari fait son travail sombre et change le téléphone en lien. En ce qui concerne ce champ, Vue avec v-text remplace à nouveau le contenu de notre div par ce dont nous avons besoin. En conséquence, au moment de la comparaison, les doms coïncident, le vol est normal.