Vuejs Error: The client-side rendered virtual DOM tree is not matching server-rendered

1个月前 104次点击 来自 前端

原文链接:Vuejs Error: The client-side rendered virtual DOM tree is not matching server-rendered

出错原因已经写的很清楚了,前端渲染的结果和服务器端渲染的结果不一致。

排查的步骤如下:

  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.

目的就是排查到哪一个dom渲染不一致,那其实在打开DevTools的时候,控制台已经会提醒相关的Warning,例如笔者的实例:
前后端渲染不一致

可以观察到渲染结果1和2的区别,结构1使用 p 标签包裹 ul两者为父子标签,而机构2 p 标签与 ul 则是为兄弟标签。

按上面的教程则可以快速定位到具体的渲染位置。

Card image cap
开发者雷

尘世间一个小小的开发者,每天增加一些无聊的知识,就不会无聊了

要加油~~~

技术文档 >> 系列应用 >>
热推应用
Let'sLearnSwift
学习Swift的入门教程
PyPie
Python is as good as Pie
标签