水合指的是客户端进程，在这个过程中，Vue 接管服务器发送的静态 HTML，并将其转换为动态 DOM，从而可以响应客户端数据的变化。

由于服务器已经渲染了标记，我们显然不希望丢弃它并重新创建所有 DOM 元素。相反，我们希望“水合”静态标记并使其具有交互性。

水合注意事项

使用 SSR + 客户端水合时需要注意的一点是，某些特殊的 HTML 结构可能会被浏览器更改。例如，当你在 Vue 模板中编写以下代码时

<table>
  <tr><td>hi</td></tr>
</table>

浏览器将自动在 <table> 内插入 <tbody>，但是，Vue 生成的虚拟 DOM 不包含 <tbody>，因此会导致不匹配。为了确保正确匹配，请确保在模板中编写有效的 HTML。

处理水合错误

如果您确实收到了水合错误（在控制台中看到：“Vuejs 错误 - 客户端渲染的虚拟 DOM 树与服务器渲染的内容不匹配”），您可以尝试以下步骤

1. 在 Chrome 中显示 DevTools (F12)
2. 加载导致“客户端渲染的虚拟 DOM 树...”警告的页面。
3. 滚动到 DevTools 控制台中的警告。
4. 点击 DevTools 控制台中警告的源位置超链接，该链接位于 vue.runtime.esm.js 中。
5. 在那里设置断点（在源代码浏览器中左键单击行号）。
6. 再次使相同的警告出现。通常通过重新加载页面。如果有多个警告，您可以通过将鼠标悬停在 msg 变量上查看消息。
7. 找到消息并停止在断点处时，请查看调用堆栈。点击一个帧向下调用“patch”以打开其源代码。将鼠标悬停在 patch 中执行线以上 4 行的 hydrate 函数调用上。将打开指向 hydrate 源代码的超链接。
8. 在 hydrate 函数中，从开头移动大约 15 行并设置断点，在 assertNodeMatch 返回 false 后返回 false 的地方。设置断点并删除所有其他断点。
9. 再次使相同的警告发生。现在，当断点命中时，执行应该停止在 hydrate 函数中。切换到 DevTools 控制台并评估 elm，然后评估 vnode。这里 elm 似乎是一个服务器渲染的 DOM 元素，而 vnode 是一个虚拟 DOM 节点。 Elm 以 HTML 的形式打印，因此您可以找出错误发生的位置。