所謂客戶端激活，指的是 Vue 在瀏覽器端接管由服務端發(fā)送的靜態(tài) HTML，使其變?yōu)橛?Vue 管理的動態(tài) DOM 的過程。

在 entry-client.js 中，我們用下面這行掛載(mount)應用程序：

// 這里假定 App.vue template 根元素的 `id="app"`
app.$mount('#app')

由于服務器已經渲染好了 HTML，我們顯然無需將其丟棄再重新創(chuàng)建所有的 DOM 元素。相反，我們需要"激活"這些靜態(tài)的 HTML，然后使他們成為動態(tài)的（能夠響應后續(xù)的數據變化）。

如果你檢查服務器渲染的輸出結果，你會注意到應用程序的根元素上添加了一個特殊的屬性：

<div id="app" data-server-rendered="true">

data-server-rendered 特殊屬性，讓客戶端 Vue 知道這部分 HTML 是由 Vue 在服務端渲染的，并且應該以激活模式進行掛載。注意，這里并沒有添加 id="app"，而是添加 data-server-rendered 屬性：你需要自行添加 ID 或其他能夠選取到應用程序根元素的選擇器，否則應用程序將無法正常激活。

注意，在沒有 data-server-rendered 屬性的元素上，還可以向 $mount 函數的 hydrating 參數位置傳入 true，來強制使用激活模式(hydration)：

// 強制使用應用程序的激活模式
app.$mount('#app', true)

在開發(fā)模式下，Vue 將推斷客戶端生成的虛擬 DOM 樹 (virtual DOM tree)，是否與從服務器渲染的 DOM 結構 (DOM structure) 匹配。如果無法匹配，它將退出混合模式，丟棄現有的 DOM 并從頭開始渲染。在生產模式下，此檢測會被跳過，以避免性能損耗。

一些需要注意的坑

使用「SSR + 客戶端混合」時，需要了解的一件事是，瀏覽器可能會更改的一些特殊的 HTML 結構。例如，當你在 Vue 模板中寫入：

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

瀏覽器會在 <table> 內部自動注入 <tbody>，然而，由于 Vue 生成的虛擬 DOM (virtual DOM) 不包含 <tbody>，所以會導致無法匹配。為能夠正確匹配，請確保在模板中寫入有效的 HTML。