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

问题描述

我正在为我的应用程序使用 Nuxt.js/Vuejs，但我在不同的地方一直面临这个错误:

I am using Nuxt.js / Vuejs for my 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 中执行行上方4 行的hydrate 函数调用上.hydrate 源的超链接将打开.
8. 在hydride函数中，从头开始移动大约15行并设置一个断点，在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屋！