Vue: resgate de hidratação inesperado ssr com

Criado em 28 jun. 2017 · 4Comentários · Fonte: vuejs/vue

Versão

2.3.4

Reprodução

Aqui o que acontece na tecla F5 (recarregar):
ssr_pre_tag_issue
(Acontece apenas uma vez, o vídeo é repetido)

Passos para reproduzir

Adicione uma tag <pre> em App.vue da demonstração vue-hackernews-2.0:

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

O que é esperado?

o lado do cliente e o lado do servidor têm a mesma versão para a tag <pre>

O que realmente está acontecendo?

as versões do lado do cliente e do servidor não são iguais, então resgatar?, então o conteúdo da tag <pre> está piscando

bug

Fonte

FranckFreiburger

Comentários muito úteis

@FranckFreiburger Este parece ser um bug. De acordo com a especificação https://www.w3.org/TR/html5/syntax.html#element -restrictions

Uma única nova linha pode ser colocada imediatamente após a marca de início dos elementos pre e textarea. Se o conteúdo do elemento pretende começar com uma nova linha, duas novas linhas consecutivas precisam ser incluídas pelo autor.

A quebra de linha first imediatamente após a tag pre é ignorada, enquanto o compilador html vue parece que não.

Vou tentar consertar.

defcc em 3 jul. 2017

👍3

Todos 4 comentários

Obrigado @FranckFreiburger , tento reproduzir o problema no Mac e windows, ambos ok. Você poderia fornecer mais informações? E para F5 key , o que você quer dizer com F5 para recarregar a página?

defcc em 1 jul. 2017

Windows 7, nó v8.1.2, testado com o Google Chrome e Firefox mais recentes.
Depois de clonar a demonstração do vue-hackernews-2.0, acabei de modificar o App.vue para adicionar a tag <pre> .
Então eu executo npm run dev e, na primeira vez que a página é carregada, o problema acontece (e o problema acontece novamente na recarga da página)

Usando as ferramentas de desenvolvimento do Google,
Quando eu pauso a execução do script antes do problema, a marcação (na guia Elementos das ferramentas de desenvolvimento) é:

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

Quando continuo a execução do script, a marcação se torna:

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

Os dados da guia de rede parecem corretos, a solicitação HTTP GET inicial contém:

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

nota: o problema não acontece com <div style="white-space:pre;"> vez de <pre>

FranckFreiburger em 1 jul. 2017

Obrigado, entendi. Estou tentando investigar isso.

defcc em 3 jul. 2017

@FranckFreiburger Este parece ser um bug. De acordo com a especificação https://www.w3.org/TR/html5/syntax.html#element -restrictions

Uma única nova linha pode ser colocada imediatamente após a marca de início dos elementos pre e textarea. Se o conteúdo do elemento pretende começar com uma nova linha, duas novas linhas consecutivas precisam ser incluídas pelo autor.

A quebra de linha first imediatamente após a tag pre é ignorada, enquanto o compilador html vue parece que não.

Vou tentar consertar.

defcc em 3 jul. 2017

👍3

Esta página foi útil?

0 / 5 - 0 avaliações