Ralat Vuejs: Pepohon DOM maya yang diberikan pelanggan tidak sepadan dengan yang diberikan oleh pelayan

Question

Saya menggunakan Nuxt.js/Vuejs dalam apl saya dan saya terus mendapat ralat ini di tempat yang berbeza:

Pokok DOM maya yang diberikan oleh pihak klien tidak sepadan dengan kandungan yang diberikan pelayan.
Ini berkemungkinan disebabkan oleh penanda HTML yang salah, contohnya meletakkan elemen peringkat blok di dalam <p>, atau kehilangan <tbody>.
Bailing hidrasi dan melakukan persembahan penuh sebelah pelanggan.

Saya ingin tahu apakah cara terbaik untuk menyahpepijat ralat ini? Adakah ini cara saya boleh log/mendapatkan pokok DOM maya pelanggan dan pelayan supaya saya boleh membandingkan dan mencari di mana ralatnya?

Permohonan saya besar dan pengesahan manual adalah sukar.

Answer 1

Bagi saya, ralat ini berlaku kerana dalam AsyncData 中获取数组列表并通过 v-for 渲染 标签，我把 块中的 >v-for kod dan selesaikan masalah

Answer 2

Jawapan separa: Menggunakan Chrome DevTools, anda boleh mencari masalah dan melihat dengan tepat elemen yang menyebabkannya. Lakukan perkara berikut (saya lakukan ini menggunakan Nuxt 5.6.0 dan Chrome 64.0.3282.186)

1. Tunjukkan Alat Pembangun dalam Chrome (F12)
2. Memuatkan halaman yang menghasilkan amaran "pokok DOM maya yang diberikan oleh pihak pelanggan...".
3. Tatal ke amaran dalam konsol DevTools.
4. Klik hiperpautan lokasi sumber amaran (dalam kes saya vue.runtime.esm.js:574).
5. Tetapkan titik putus di sana (klik kiri pada nombor baris dalam pelayar kod sumber).
6. Buat amaran yang sama muncul semula. Saya tidak mengatakan ini sentiasa mungkin, tetapi dalam kes saya, saya hanya memuatkan semula halaman. Jika terdapat banyak amaran, anda boleh melihat mesej dengan menggerakkan tetikus anda ke atas pembolehubah msg.
7. Apabila anda menemui mesej dan berhenti di titik putus, lihat timbunan panggilan. Klik pada "patch" panggilan bingkai seterusnya untuk membuka kod sumbernya. Tuding pada hiperpautan patch 中执行行上方 4 行的 Hydro 函数调用上。将打开指向Hydratesumber.
8. di enchanted 函数中，从开头移动大约 15 行，并设置一个断点，在 assertNodeMatch 返回后返回 false 假. Tetapkan titik putus di sana dan padamkan semua titik putus lain.
9. Amaran yang sama sekali lagi. Kini, apabila titik putus dipukul, pelaksanaan hendaklah pada enchanted 函数中停止。切换到 DevTools 控制台并评估 elm，然后评估 vnode. Di sini elm nampaknya elemen DOM yang diberikan pelayan, dan vnode ialah nod DOM maya. Elm mencetak ke HTML supaya anda boleh mengetahui di mana ralat berlaku.