背景
今天遇到控制台不断循环输出 vue 警告信息和报错,最后页面直接卡死。
吓得我赶紧从 github 上拷贝一份新的代码,然后运行,同时为了防止端口相同问题,还改了端口(报错项目运行在 5177 端口,新项目运行在 5173 端口)。结果就没问题了!
但继续使用没多久后又发现出现这个 bug,于是我开始着手解决这个问题。
分析
直接说结论吧。我最终发现,本质上就是 undefined 问题。
而控制台输出的有效错误提示,其实只有两个(那个 vue 内部错误我没时间继续研究),有效错误提示如下图所示:
定位到的代码如下图所示:
根本原因分析:代码中的 link
对象可能不存在 text
和 icon
属性。
然后,由于这个 link 对象是存在 localStorage 中,所以当我换了端口后,对应的 localStorage 是空的,所以不会有 undefined 问题。
既然只是这个问题,为什么会导致页面卡死呢?我觉得可能是和国际化 $t()
还有 v-for
有关吧。(等我后面有时间再分析)
对了,使用 $t()
时,如果不提前写好对应的语言翻译,而是任由它往控制台输出警告信息的话,当量过多时也可能导致页面卡死,原因就是控制台输出的太频繁了。