Nuxt.js 的一個常見錯誤警告

摘要： 在 Nuxt.js 的使用過程中會遇到這樣一種錯誤： [Vue warn]: The client-side rendered virtual DOM tree is not matching server-rendered content. This is likely caused...

在 Nuxt.js 的使用過程中會遇到這樣一種錯誤：

[Vue warn]: 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樹與伺服器呈現的內容不匹配。 這可能是由不正確的HTML標記引起的，例如在<p>中巢狀塊級元素或缺少<tbody>。

經調查發現原因可能有多種，故寫些文字記錄下來，以後發現別的再補上:sob:。

可能原因 1 - 不符合HTML規範

就像警告資訊中說的那樣 - 由不正確的HTML標記引起的，例如在<p>中巢狀塊級元素或缺少<tbody> 。

對於這種情況，檢查下是否有這樣的模板內容是否有不遵守HTML規範的寫法，改正就好了，問題不大。

如果是某個引入的外掛導致的，自己沒辦法改，只能選擇用 <no-ssr> 不讓它在服務端渲染或者忽略警告。

可能原因 2 - 服務端和客戶端資料不一致

有時候按照原因1找了很久也沒能解決問題，但有其他一些怪異表現 - 列表渲染不正常：例如剛渲染完列表數量正常，載入完後數量就錯了，或有資料消失了。

我遇到的這種情況是我的程式碼不規範，更改了資料內部的結構，例如下面的程式碼：

props: {
sources: Array
},
computed: {
formattedSources() {
return this.sources.reduce((res, source) => {
const urls = source.url.split('\n').filter(r => !!r)
source.url = urls[0]
res.push(source)
urls.slice(1).forEach(url => {
res.push({
title: url,
url
})
})
return res
}, [])
}
}

這段程式碼中 source.url = urls[0] 這裡我改動了props裡的sources內部資料，導致 Nuxt.js 輸出資料到頁面，然後在瀏覽器端重新載入渲染時已近和服務端渲染時的資料不一致，出現了這個錯誤警告。那麼解決方法也有了，不要篡原資料。另外，在 computed 中篡改資料本來就是錯誤的寫法:flushed:。