Vuejs 错误：客户端渲染的虚拟 DOM 树与服务器渲染的不匹配

Question

我在我的应用程序中使用 Nuxt.js / Vuejs，并且我在不同的地方不断遇到此错误：

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.

我想了解调试此错误的最佳方法是什么？这是我可以记录/获取客户端和服务器的虚拟 DOM 树以便我可以比较并找到错误所在的方法吗？

我的应用程序很大，手动验证很困难。

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，因此您可以找出错误发生的位置。