Vuejs-Fehler: Der vom Client gerenderte virtuelle DOM-Baum stimmt nicht mit dem vom Server gerenderten überein

Question

Ich verwende Nuxt.js/Vuejs in meiner App und erhalte an verschiedenen Stellen immer wieder diesen Fehler:

Der clientseitig gerenderte virtuelle DOM-Baum stimmt nicht mit dem servergerenderten Inhalt überein.
Dies wird wahrscheinlich durch falsches HTML-Markup verursacht, beispielsweise durch die Verschachtelung von Elementen auf Blockebene innerhalb von <p> oder durch fehlendes <tbody>.
Feuchtigkeitsversorgung und vollständiges clientseitiges Rendern.

Ich würde gerne wissen, wie dieser Fehler am besten behoben werden kann. Kann ich auf diese Weise die virtuellen DOM-Bäume von Client und Server protokollieren/abrufen, damit ich vergleichen und herausfinden kann, wo der Fehler liegt?

Mein Antrag ist umfangreich und die manuelle Überprüfung ist schwierig.

Answer 1

对我来说，这个错误发生是因为在 AsyncData 中获取数组列表并通过 v-for 渲染 标签，我把 块中的 >v-for 代码并解决问题

Answer 2

部分答案：使用 Chrome DevTools，您可以定位问题并准确查看导致问题的元素。执行以下操作（我使用 Nuxt 5.6.0 和 Chrome 64.0.3282.186 执行此操作）

1. 在 Chrome 中显示开发工具 (F12)
2. 加载导致“客户端渲染的虚拟 DOM 树...”警告的页面。
3. 滚动到 DevTools 控制台中的警告。
4. 单击警告的源位置超链接（在我的例子中是 vue.runtime.esm.js:574）。
5. 在那里设置断点（在源代码浏览器中的行号处单击鼠标左键）。
6. 使相同的警告再次出现。我并不是说这总是可能的，但就我而言，我只是重新加载页面。如果有很多警告，您可以通过将鼠标移到 msg 变量上来查看消息。
7. 当您找到消息并停在断点处时，请查看调用堆栈。单击向下一帧调用“patch”以打开其源代码。将鼠标悬停在 patch 中执行行上方 4 行的 Hydro 函数调用上。将打开指向Hydrate来源的超链接。
8. 在 enchanted 函数中，从开头移动大约 15 行，并设置一个断点，在 assertNodeMatch 返回后返回 false 假。在那里设置断点并删除所有其他断点。
9. 再次发出同样的警告。现在，当遇到断点时，执行应该在 enchanted 函数中停止。切换到 DevTools 控制台并评估 elm，然后评估 vnode。这里 elm 似乎是一个服务器渲染的 DOM 元素，而 vnode 是一个虚拟 DOM 节点。 Elm 打印为 HTML，因此您可以找出错误发生的位置。