Vuejs错误：客户端呈现的虚拟DOM树与服务器呈现不匹配 [英] Vuejs Error: The client-side rendered virtual DOM tree is not matching server-rendered

问题描述

我正在使用Nuxt.js / Vuejs for mmy app，我在不同的地方一直面临这个错误：

I am using Nuxt.js / Vuejs for mmy app, and I keep facing this error in different places:

    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树，以便我可以比较并找到错误所在的位置？

I would like to understand what is the best way to debug this error? Is their a way I can record/get the virtual DOM tree for client and server so I could compare and find where the error lies?

我的是一个大型应用程序，很难手动验证。

Mine is a large application and manually verifying is difficult.

推荐答案

部分答案：使用Chrome DevTools，您可以本地化问题并确切了解导致问题的元素。执行以下操作（我使用Nuxt 5.6.0和Chrome 64.0.3282.186执行此操作）

Partial answer: with Chrome DevTools, you can localize the issue and see exactly what element caused the issue. Do the following (I did that with Nuxt 5.6.0 and Chrome 64.0.3282.186)

1. 在Chrome中显示DevTools（F12）


2. 加载导致客户端呈现的虚拟DOM树...警告的页面。


3. 滚动到DevTools控制台中的警告。


4. 单击警告的源位置超链接（在我的情况下，它是vue.runtime.esm .js文件：574）。


5. 在那里设置断点（在源代码浏览器中左键单击行号）。


6. 再次出现相同的警告。我并不是说它总是可行的，但就我而言，我只是重新加载页面。如果有很多警告，您可以通过将鼠标移到 msg 变量上来检查消息。


7. 当您找到消息并在断点处停止时，请查看调用堆栈。单击一帧向下调用patch以打开其源。将鼠标悬停在 hydrate 函数上，在 patch 中的执行行上方调用4行。将打开到 hydrate 来源的超链接。


8. 在 hydrate 函数中，从开始移动约15行并设置断点 false 在 assertNodeMatch 返回 false 后返回。在那里设置断点并删除所有其他断点。


9. 再次发出相同的警告。现在，当遇到断点时，执行应该在 hydrate 函数中停止。切换到DevTools控制台并评估 elm 然后 vnode 。这里elm似乎是一个服务器呈现的DOM元素，而vnode是一个虚拟DOM节点。 Elm以HTML格式打印，因此您可以找出错误发生的位置。

1. Show DevTools in Chrome (F12)
2. Load the page that causes "the client-side rendered virtual DOM tree..." warning.
3. Scroll to the warning in DevTools console.
4. Click at the source location hyperlink of the warning (in my case it was vue.runtime.esm.js:574).
5. Set a breakpoint there (left-clicking at line number in the source code browser).
6. Make the same warning to appear again. I'm not saying it is always possible, but in my case I simply reloaded the page. If there are many warnings, you can check the message by moving a mouse over msg variable.
7. When you found your message and stopped on a breakpoint, look at the call stack. Click one frame down to call to "patch" to open its source. Hover mouse over hydrate function call 4 lines above the execution line in patch. Hyperlink to the source of hydrate would open.
8. In the hydrate function, move about 15 lines from the start and set a breakpoint where false is returned after assertNodeMatch returned false. Set the breakpoint there and remove all other breakpoints.
9. Make the same warning to happen again. Now, when breakpoint is hit, execution should stop in the hydrate function. Switch to DevTools console and evaluate elm and then vnode. Here elm seem to be a server-rendered DOM element while vnode is a virtual DOM node. Elm is printed as HTML so you can figure out where the error happened.

这篇关于Vuejs错误：客户端呈现的虚拟DOM树与服务器呈现不匹配的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！