国产av日韩一区二区三区精品,成人性爱视频在线观看,国产,欧美,日韩,一区,www.成色av久久成人,2222eeee成人天堂

Vuejs 錯誤:客戶端渲染的虛擬 DOM 樹與服務(wù)器渲染的不匹配
P粉006847750
P粉006847750 2023-08-27 20:39:55
0
2
812
<p>我在我的應(yīng)用程序中使用 Nuxt.js / Vuejs,并且我在不同的地方不斷遇到此錯誤:</p> <pre class="brush:php;toolbar:false;">The client-side rendered virtual DOM tree is not matching server-rendered content. This is likely caused by incorrect HTML markup, for example nesting block-level elements inside <p>, or missing <tbody>. Bailing hydration and performing full client-side render.</pre> <p>我想了解調(diào)試此錯誤的最佳方法是什么?這是我可以記錄/獲取客戶端和服務(wù)器的虛擬 DOM 樹以便我可以比較并找到錯誤所在的方法嗎?</p> <p>我的應(yīng)用程序很大,手動驗證很困難。</p>
P粉006847750
P粉006847750

全部回復(fù)(2)
P粉340980243

對我來說,這個錯誤發(fā)生是因為在 AsyncData 中獲取數(shù)組列表并通過 v-for 渲染 標簽,我把 塊中的 >v-for 代碼并解決問題

P粉046878197

部分答案:使用 Chrome DevTools,您可以定位問題并準確查看導(dǎo)致問題的元素。執(zhí)行以下操作(我使用 Nuxt 5.6.0 和 Chrome 64.0.3282.186 執(zhí)行此操作)

  1. 在 Chrome 中顯示開發(fā)工具 (F12)
  2. 加載導(dǎo)致“客戶端渲染的虛擬 DOM 樹...”警告的頁面。
  3. 滾動到 DevTools 控制臺中的警告。
  4. 單擊警告的源位置超鏈接(在我的例子中是 vue.runtime.esm.js:574)。
  5. 在那里設(shè)置斷點(在源代碼瀏覽器中的行號處單擊鼠標左鍵)。
  6. 使相同的警告再次出現(xiàn)。我并不是說這總是可能的,但就我而言,我只是重新加載頁面。如果有很多警告,您可以通過將鼠標移到 msg 變量上來查看消息。
  7. 當您找到消息并停在斷點處時,請查看調(diào)用堆棧。單擊向下一幀調(diào)用“patch”以打開其源代碼。將鼠標懸停在 patch 中執(zhí)行行上方 4 行的 Hydro 函數(shù)調(diào)用上。將打開指向Hydrate來源的超鏈接。
  8. enchanted 函數(shù)中,從開頭移動大約 15 行,并設(shè)置一個斷點,在 assertNodeMatch 返回后返回 false 。在那里設(shè)置斷點并刪除所有其他斷點。
  9. 再次發(fā)出同樣的警告?,F(xiàn)在,當遇到斷點時,執(zhí)行應(yīng)該在 enchanted 函數(shù)中停止。切換到 DevTools 控制臺并評估 elm,然后評估 vnode。這里 elm 似乎是一個服務(wù)器渲染的 DOM 元素,而 vnode 是一個虛擬 DOM 節(jié)點。 Elm 打印為 HTML,因此您可以找出錯誤發(fā)生的位置。
最新下載
更多>
網(wǎng)站特效
網(wǎng)站源碼
網(wǎng)站素材
前端模板