Vue: renflouement d'hydratation inattendu ssr avec

Créé le 28 juin 2017 · 4Commentaires · Source: vuejs/vue

Version

2.3.4

la reproduction

Voici ce qui se passe sur la touche F5 (recharger):
ssr_pre_tag_issue
(Cela n'arrive qu'une seule fois, la vidéo est bouclée)

Étapes à reproduire

Ajoutez une balise <pre> dans App.vue de la démo vue-hackernews-2.0 :

<template>
  <div id="app">
    <header class="header">
    <pre style="background-color: #aaa">
foobar
    </pre>
      <nav class="inner">

Qu'attend-on?

côté client et côté serveur ont la même version pour la balise <pre>

Que se passe-t-il réellement ?

les versions côté client et côté serveur ne sont pas les mêmes, alors renflouement ?, puis le contenu de la balise <pre> clignote

bug

Source

FranckFreiburger

Commentaire le plus utile

@FranckFreiburger Cela semble être un bug. Selon la spécification https://www.w3.org/TR/html5/syntax.html#element -restrictions

Une seule nouvelle ligne peut être placée immédiatement après la balise de début des éléments pre et textarea. Si le contenu de l'élément est destiné à commencer par un saut de ligne, deux sauts de ligne consécutifs doivent donc être inclus par l'auteur.

Le saut de ligne first qui suit immédiatement la balise pre est ignoré, alors que le compilateur vue html ne semble pas.

Je vais essayer de le réparer.

defcc le 3 juil. 2017

👍3

Tous les 4 commentaires

Merci @FranckFreiburger , j'essaie de reproduire le problème sur Mac et Windows, tous les deux ok. Pouvez-vous s'il vous plaît fournir plus d'informations? Et pour F5 key , qu'entendez-vous par là, F5 pour recharger la page ?

defcc le 1 juil. 2017

Windows 7, nœud v8.1.2, testé avec les derniers Google Chrome et Firefox.
Après avoir cloné la démo vue-hackernews-2.0, je viens de modifier le App.vue pour ajouter la balise <pre> .
Ensuite, j'exécute npm run dev , et la première fois que la page est chargée, le problème se produit (et le problème se reproduit lors du rechargement de la page)

En utilisant les outils de développement de Google,
Lorsque j'interromps l'exécution du script juste avant le problème, le balisage (dans l'onglet Éléments des outils de développement) est :

<pre style="background-color:#aaa;">foobar
        </pre>

Lorsque je poursuis l'exécution du script, le balisage devient :

<pre style="background-color:#aaa;">
foobar
        </pre>

Les données de l'onglet réseau semblent correctes, la requête HTTP GET initiale contient :

<pre style="background-color:#aaa;">
foobar
        </pre>

note : le problème ne se produit pas avec <div style="white-space:pre;"> au lieu de <pre>

FranckFreiburger le 1 juil. 2017

Merci, compris. J'essaye de me renseigner.

defcc le 3 juil. 2017

@FranckFreiburger Cela semble être un bug. Selon la spécification https://www.w3.org/TR/html5/syntax.html#element -restrictions

Une seule nouvelle ligne peut être placée immédiatement après la balise de début des éléments pre et textarea. Si le contenu de l'élément est destiné à commencer par un saut de ligne, deux sauts de ligne consécutifs doivent donc être inclus par l'auteur.

Le saut de ligne first qui suit immédiatement la balise pre est ignoré, alors que le compilateur vue html ne semble pas.

Je vais essayer de le réparer.

defcc le 3 juil. 2017

👍3

Cette page vous a été utile?

0 / 5 - 0 notes