Vue: ssr rescate de hidratación inesperado con

Creado en 28 jun. 2017  ·  4Comentarios  ·  Fuente: vuejs/vue

Versión

2.3.4

Reproducción

Aquí lo que sucede en la tecla F5 (recargar):
ssr_pre_tag_issue
(Ocurre solo una vez, el video se repite)

pasos para reproducir

Agregue una etiqueta <pre> en App.vue de la demostración de vue-hackernews-2.0:

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

¿Lo que es esperado?

el lado del cliente y el lado del servidor tienen la misma versión para la etiqueta <pre>

¿Qué está pasando realmente?

las versiones del lado del cliente y del servidor no son iguales, ¿entonces el rescate?, entonces el contenido de la etiqueta <pre> parpadea

bug

Comentario más útil

@FranckFreiburger Esto parece ser un error. Según la especificación https://www.w3.org/TR/html5/syntax.html#element -restrictions

Se puede colocar una sola línea nueva inmediatamente después de la etiqueta de inicio de los elementos pre y textarea. Si se pretende que el contenido del elemento comience con una nueva línea, el autor debe incluir dos nuevas líneas consecutivas.

El salto de línea first que sigue inmediatamente a la etiqueta pre se ignora, mientras que el compilador vue html no parece.

Intentaré arreglarlo.

Todos 4 comentarios

Gracias @FranckFreiburger , trato de reproducir el problema en Mac y Windows, ambos están bien. ¿Podría proporcionar más información? Y por F5 key , ¿qué quieres decir con eso, F5 para volver a cargar la página?

Windows 7, nodo v8.1.2, probado con las últimas versiones de Google Chrome y Firefox.
Después de clonar la demostración de vue-hackernews-2.0, acabo de modificar la etiqueta App.vue para agregar la etiqueta <pre> .
Luego ejecuto npm run dev , y la primera vez que se carga la página, el problema ocurre (y el problema vuelve a ocurrir en la recarga de la página)

Usando las herramientas de desarrollo de Google,
Cuando detengo la ejecución del script justo antes del problema, el marcado (en la pestaña Elementos de las herramientas de desarrollo) es:

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

Cuando continúo con la ejecución del script, el marcado se convierte en:

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

Los datos de la pestaña de red parecen correctos, la solicitud HTTP GET inicial contiene:

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

nota: el problema no ocurre con <div style="white-space:pre;"> lugar de <pre>

Gracias, lo tengo. Estoy tratando de investigarlo.

@FranckFreiburger Esto parece ser un error. Según la especificación https://www.w3.org/TR/html5/syntax.html#element -restrictions

Se puede colocar una sola línea nueva inmediatamente después de la etiqueta de inicio de los elementos pre y textarea. Si se pretende que el contenido del elemento comience con una nueva línea, el autor debe incluir dos nuevas líneas consecutivas.

El salto de línea first que sigue inmediatamente a la etiqueta pre se ignora, mientras que el compilador vue html no parece.

Intentaré arreglarlo.

¿Fue útil esta página
0 / 5 - 0 calificaciones