Vue: SSR неожиданное спасение от гидратации с

Созданный на 28 июн. 2017 · 4Комментарии · Источник: vuejs/vue

Версия

2.3.4

Размножение

Вот что происходит при нажатии клавиши F5 (перезагрузка):
ssr_pre_tag_issue
(Бывает только один раз, видео зацикливается)

Действия по воспроизведению

Добавьте тег <pre> в App.vue демонстрации vue-hackernews-2.0:

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

Что ожидается?

на стороне клиента и на стороне сервера есть одна и та же версия для тега <pre>

Что на самом деле происходит?

версии на стороне клиента и на стороне сервера не совпадают, тогда аварийное отключение?, тогда содержимое тега <pre> мигает

bug

Источник

FranckFreiburger

Самый полезный комментарий

@FranckFreiburger Кажется, это ошибка. Согласно спецификации https://www.w3.org/TR/html5/syntax.html#element -restrictions

Одну новую строку можно разместить сразу после начального тега элементов pre и textarea. Если содержимое элемента должно начинаться с новой строки, то автор должен включить две последовательные новые строки.

Разрыв строки first сразу после тега pre игнорируется, а компилятор vue html - нет.

Попробую исправить.

defcc 3 июл. 2017

👍3

Все 4 Комментарий

Спасибо @FranckFreiburger , я пытаюсь воспроизвести проблему на Mac и Windows, и то, и другое в порядке. Не могли бы вы предоставить дополнительную информацию? А для F5 key , что вы подразумеваете под этим, F5, чтобы перезагрузить страницу?

defcc 1 июл. 2017

Windows 7, node v8.1.2, протестировано с последними версиями Google Chrome и Firefox.
После клонирования демонстрации vue-hackernews-2.0 я просто изменил App.vue добавив тег <pre> .
Затем я запускаю npm run dev , и при первой загрузке страницы возникает проблема (и проблема возникает снова при перезагрузке страницы)

Используя инструменты разработчика Google,
Когда я приостанавливаю выполнение скрипта непосредственно перед проблемой, разметка (на вкладке «Элементы инструментов разработчика») следующая:

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

Когда я продолжаю выполнение скрипта, разметка становится:

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

Данные на вкладке сети кажутся правильными, исходный запрос HTTP GET содержит:

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

примечание: проблема не возникает с <div style="white-space:pre;"> вместо <pre>

FranckFreiburger 1 июл. 2017

Спасибо, получил его. Я пытаюсь разобраться в этом.

defcc 3 июл. 2017

@FranckFreiburger Кажется, это ошибка. Согласно спецификации https://www.w3.org/TR/html5/syntax.html#element -restrictions

Одну новую строку можно разместить сразу после начального тега элементов pre и textarea. Если содержимое элемента должно начинаться с новой строки, то автор должен включить две последовательные новые строки.

Разрыв строки first сразу после тега pre игнорируется, а компилятор vue html - нет.

Попробую исправить.

defcc 3 июл. 2017

👍3

Была ли эта страница полезной?

0 / 5 - 0 рейтинги