注水是指客戶端程序，在此程序中，Vue 接管伺服器傳送的靜態 HTML，並將其轉換為可對客戶端資料變更做出反應的動態 DOM。

由於伺服器已呈現標記，我們顯然不希望丟棄該標記並重新建立所有 DOM 元素。相反地，我們希望「注水」靜態標記並使其具有互動性。

注水注意事項

使用 SSR + 客戶端注水時，需要注意的一件事是某些可能被瀏覽器修改的特殊 HTML 結構。例如，當您在 Vue 範本中編寫以下內容時

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

瀏覽器將自動在 <table> 內注入 <tbody>，但是，Vue 產生的虛擬 DOM 不包含 <tbody>，因此會導致不符。為了確保正確的匹配，請確保在您的範本中編寫有效的 HTML。

處理注水錯誤

如果您確實收到注水錯誤（如在控制台中看到的：「Vuejs Error - The client-side rendered virtual DOM tree is not matching server-rendered content」），您可以嘗試按照以下步驟操作

1. 在 Chrome 中顯示 DevTools (F12)
2. 載入導致「客戶端呈現的虛擬 DOM 樹狀結構...」警告的頁面。
3. 捲動到 DevTools 控制台中的警告。
4. 按一下 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 形式列印，因此您可以找出錯誤發生的位置。