共计 1058 个字符，预计需要花费 3 分钟才能阅读完成。
在 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 中篡改数据本来就是错误的写法????。
