Vue: ssr bailout hidrasi tak terduga dengan

Dibuat pada 28 Jun 2017 · 4Komentar · Sumber: vuejs/vue

Versi: kapan

2.3.4

Reproduksi

Inilah yang terjadi pada tombol F5 (reload):
ssr_pre_tag_issue
(Itu hanya terjadi sekali, video diulang)

Langkah-langkah untuk mereproduksi

Tambahkan tag <pre> di App.vue dari demo vue-hackernews-2.0:

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

Apa yang diharapkan?

sisi klien dan sisi server memiliki versi yang sama untuk tag <pre>

Apa yang sebenarnya terjadi?

versi sisi klien dan sisi server tidak sama, lalu bailout?, lalu konten tag <pre> berkedip

bug

Sumber

FranckFreiburger

Komentar yang paling membantu

@FranckFreiburger Ini sepertinya bug. Menurut spesifikasi https://www.w3.org/TR/html5/syntax.html#element -restrictions

Satu baris baru dapat ditempatkan segera setelah tag awal elemen pre dan textarea. Jika konten elemen dimaksudkan untuk dimulai dengan baris baru, maka dua baris baru yang berurutan perlu disertakan oleh penulis.

Pemutusan baris first segera setelah tag awal diabaikan, sedangkan kompilator vue html tampaknya tidak.

Saya akan mencoba untuk memperbaikinya.

defcc pada 3 Jul 2017

👍3

Semua 4 komentar

Terima kasih @FranckFreiburger , saya mencoba mereproduksi masalah di Mac dan windows, keduanya ok. Bisakah Anda memberikan informasi lebih lanjut? Dan untuk F5 key , apa maksudmu dengan itu, F5 untuk memuat ulang halaman?

defcc pada 1 Jul 2017

Windows 7, node v8.1.2, diuji dengan Google Chrome & Firefox terbaru.
Setelah mengkloning demo vue-hackernews-2.0, saya hanya memodifikasi App.vue untuk menambahkan tag <pre> .
Kemudian saya menjalankan npm run dev , dan pertama kali halaman dimuat, masalah terjadi (dan masalah terjadi lagi saat memuat ulang halaman)

Menggunakan alat pengembang google,
Ketika saya menjeda eksekusi skrip tepat sebelum masalah, markup (di tab Elemen alat dev) adalah:

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

Ketika saya melanjutkan eksekusi skrip, markup menjadi:

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

Data dari tab jaringan tampaknya benar, permintaan HTTP GET awal berisi:

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

catatan: masalah tidak terjadi dengan <div style="white-space:pre;"> alih-alih <pre>

FranckFreiburger pada 1 Jul 2017

Terima kasih, mengerti. Saya mencoba untuk melihat ke dalamnya.

defcc pada 3 Jul 2017

@FranckFreiburger Ini sepertinya bug. Menurut spesifikasi https://www.w3.org/TR/html5/syntax.html#element -restrictions

Satu baris baru dapat ditempatkan segera setelah tag awal elemen pre dan textarea. Jika konten elemen dimaksudkan untuk dimulai dengan baris baru, maka dua baris baru yang berurutan perlu disertakan oleh penulis.

Pemutusan baris first segera setelah tag awal diabaikan, sedangkan kompilator vue html tampaknya tidak.

Saya akan mencoba untuk memperbaikinya.

defcc pada 3 Jul 2017

👍3

Apakah halaman ini membantu?

0 / 5 - 0 peringkat