Suatu hari, saya mengalami masalah seperti itu. Kode yang dihasilkan di sisi server menolak untuk hidrasi di Safari.
Hydration mengacu pada proses sisi klien di mana Vue mengambil HTML statis yang dikirim oleh server dan mengubahnya menjadi DOM dinamis yang dapat menanggapi perubahan data di sisi klien. Lebih detail di sini .
"Prod" baru saja jatuh, dan versi dev melaporkan bahwa ada perbedaan dalam dom. Dan karena versi dev tidak crash ketika mencoba untuk melembabkan, tetapi hanya melaporkannya di konsol, kesalahannya tidak jelas, dan sementara kami menemukannya, cukup lama berlalu.
Strategi yang sangat menarik dari Vue adalah menunggu produksi dan jatuh di sana!
Lima belas ratus komponen dengan kompleksitas yang berbeda tidak menyederhanakan tugas. Akibatnya, saya berhasil melihat masalah, menemukan perangkat yang cocok dan berteman dengan konsol pengembang.
Akibatnya, ternyata aplikasi kami mogok ketika komponen footer terhubung. Dan ketika mereka menemukan garis yang benar, mereka sama sekali tidak mempercayai mata mereka. Diharapkan apa pun selain ini.
Ternyata ketika Anda menghapus nomor telepon, hidrasi terjadi tanpa masalah. Ketika mereka mulai menggali, ternyata Safari, setelah menerima tata letak html, mengganti tag di sebelah telepon, yang menyebabkan, pada kenyataannya, dialer.
Secara alami, ketika hidrasi dimulai, dom halaman yang berasal dari server dan virtual yang baru dibangun tidak cocok. Aplikasi macet tanpa menyatakan perang.
Masalah ini juga diselesaikan dengan tidak terduga. Sampai sekarang, kami memasukkan telepon dengan cara biasa:
<div>8 (800) 111 2 333</div>
Solusinya adalah mengikat v-teks:
<div v-text=”8 (800) 111 2 333”></div>
Saya punya teori tentang ini. Jika seseorang dapat mengkonfirmasi atau membantahnya (menyarankan yang baru), saya akan sangat berterima kasih. Seperti yang saya pahami, setelah Safari menerima dokumen, Vue membangun dom virtual dan membandingkannya dengan dokumen ini dan sementara itu menghidrasi dokumen ini, Safari melakukan pekerjaannya yang gelap dan mengubah telepon menjadi tautan. Ketika datang ke bidang ini, Vue dengan v-text lagi menggantikan konten div kita dengan apa yang kita butuhkan. Akibatnya, pada saat perbandingan, dom bertepatan, penerbangan normal.