[Vue warn]: Unhandled error during execution of render function

2,446 阅读1分钟

背景

今天遇到控制台不断循环输出 vue 警告信息和报错,最后页面直接卡死。

image.png

image.png

image.png

吓得我赶紧从 github 上拷贝一份新的代码,然后运行,同时为了防止端口相同问题,还改了端口(报错项目运行在 5177 端口,新项目运行在 5173 端口)。结果就没问题了!

但继续使用没多久后又发现出现这个 bug,于是我开始着手解决这个问题。

分析

直接说结论吧。我最终发现,本质上就是 undefined 问题。

而控制台输出的有效错误提示,其实只有两个(那个 vue 内部错误我没时间继续研究),有效错误提示如下图所示:

image.png

image.png

定位到的代码如下图所示:

image.png

根本原因分析:代码中的 link 对象可能不存在 texticon 属性。

然后,由于这个 link 对象是存在 localStorage 中,所以当我换了端口后,对应的 localStorage 是空的,所以不会有 undefined 问题。

既然只是这个问题,为什么会导致页面卡死呢?我觉得可能是和国际化 $t() 还有 v-for 有关吧。(等我后面有时间再分析)

对了,使用 $t() 时,如果不提前写好对应的语言翻译,而是任由它往控制台输出警告信息的话,当量过多时也可能导致页面卡死,原因就是控制台输出的太频繁了。