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

部分答案:使用Chrome DevTools，您可以定位问题，并确切地看到是什么元素导致了问题。执行以下操作(我使用Nuxt 5.6.0和Chrome 64.0.3282.186)

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

Answer 2

对于我来说，发生这个错误是因为AsyncData中的get数组列表和v-for呈现的<tr>标记，我将v-for代码放在<client-only>块中，并解决了问题

Answer 3

这个错误很难调试。为了快速获得导致问题的元素，请编辑node_modules/vue/dist/vue.esm.js并添加以下行：

// Search for this line: 
function hydrate (elm, vnode, insertedVnodeQueue, inVPre) {
    var i;
    var tag = vnode.tag;
    var data = vnode.data;
    var children = vnode.children;
    inVPre = inVPre || (data && data.pre);
    vnode.elm = elm;

    // Add the following lines: 
    console.log('elm', elm)
    console.log('vnode', vnode)
    console.log('inVpre', inVPre)
    // ...

您将在控制台中获得失败节点。