Nuxt.js 的一个常见错误警告

news/2024/5/18 21:52:00

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中篡改数据本来就是错误的写法?。


https://dhexx.cn/news/show-1420109.html

相关文章

MySQL 卸载(Windows)

1. 控制面板\所有控制面板项\程序和功能&#xff0c;卸载MySQL 2. 检查MYSQL 目录C:\Program Files (x86)\MySQL下文件是否删除 3. 运行“regedit”&#xff0c;打开注册表&#xff0c;删除文件 删除HKEY_LOCAL_MACHINE\SYSTEM\ControlSet001\Services\Eventlog\Application\My…

用Python写一份独特的元宵节祝福

2019独角兽企业重金招聘Python工程师标准>>> 今天是正月十五&#xff0c;首先祝大家元宵节快乐&#xff01; 以前加过我个人VX号的朋友&#xff0c;可以在朋友圈看到我今天发的元宵节祝福图片&#xff1a; 这个祝福文字乍一看其貌不扬&#xff0c;不过点开大图有惊喜…

python3中解析json的模块

目录 python数据与json数据互转 对request请求的json数据格式化 json模块是python中用来解析json数据格式的模块。 json中有两种数据结构:对象和数组。 对象:用大括号表示,由键值对组成,每个键值对用逗号隔开。其中key必须为字符串且是双引号,value可以是多种数据类型。数…

vss整合配置连接到Myeclipse中以及中文配置

配置过很久后 再次配置进行记录以免后续备用 1、下载vss插件和安装vss插件 org.vssplugin_1.6.2 解压到myeclipse 安装路径文件夹C:\MyEclipse 8.5\dropins 下 2.中文语言包配置language 文件夹配置C:\MyEclipse 8.5\dropins 下 即可 重启MyEclipse&#xff0c;插件安装成功 3.…

Mule 官方例子研究

1.准备 安装Mule。这里就不介绍mule的安装了&#xff0c;请参考《Mule安装部署手册》。 2. 编译Mule自带例子中的Hello例子 使用命令行到目录&#xff1a;D:\app\mule3.1.1\examples\hello下&#xff0c;输入&#xff1a;mvn 即可。这里需要安装Maven&#xff1b; 3. 导入Eclip…

《Django By Example》第八章 中文 翻译 (个人学习,渣翻)

书籍出处&#xff1a;https://www.packtpub.com/web-development/django-example 原作者&#xff1a;Antonio Mel &#xff08;译者注&#xff1a;还有4章&#xff01;还有4章全书就翻译完成了&#xff01;&#xff09; 第八章 管理付款和订单 在上一章&#xff0c;你创建了一个…

[互联网]2018年互联网套路简史

新年开篇&#xff0c;回顾2018年互联网套路简史 本文转载自互联网。 “互联网的发展史&#xff0c;就是一部套路发展史&#xff01;”——张小龙 互联网的蓬勃发展&#xff0c;离不开技术作为前提来驱动&#xff0c;但光有技术不行&#xff1b; 因为搞互联网的人&#xff0c;除…

Python资源

python资源全汇总—中文版vinta/awesome-pythonReportLab open-source PDF Toolkit 转载于:https://www.cnblogs.com/wancy86/p/ps.html

基于 Kubernetes 实践弹性的 CI/CD 系统

大家好,我是来自阿里云容器服务团队的华相。首先简单解释一下何为 Kubernetes 来帮助大家理解。Kuberentes 是一个生产可用的容器编排系统。Kuberentes 一方面在集群中把所有 Node 资源做一个资源池&#xff0c;然后它调度的单元是 Pod&#xff0c;当然 Pod 里面可以有多个容器…

Java 8 新特性 – 终极手册整理

1&#xff0e;简介 毫无疑问&#xff0c;Java 8是自Java 5&#xff08;2004年&#xff09;发布以来Java语言最大的一次版本升级&#xff0c;Java 8带来了很多的新特性&#xff0c;比如编译器、类库、开发工具和JVM&#xff08;Java虚拟机&#xff09;。在这篇教程中我们将会学…