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規範的寫法，改正就行了，問題不大。
若是是某個引入的插件致使的，本身沒辦法改，只能選擇用<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中篡改數據原本就是錯誤的寫法😳。