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

在 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>。

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

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

就像警告信息中說的那樣 - 由不正確的HTML標記引起的，例如在<p>中嵌套塊級元素或缺少<tbody>。
對於這種情況，檢查下是否有這樣的模板內容是否有不遵守HTML規範的寫法，改正就好了，問題不大。

可能原因 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中篡改數據本來就是錯誤的寫法😳。