前言
这几天遇到一个bug，在本地测试时候浏览器没有警告，但是部署到正式环境的时候，页面的接口会处于pending状态，并且浏览器也会一直卡死
我也百度过，然后百度的说element的tab的问题，我也尝试过(本项目vue3+elementPlus)。最后也是无功而返，后来以为是数据量大的问题，也处理过，到头还还是一样的。
经过
这时候我注意到了浏览器控制台，在正式环境的时候会有一个警告，但是本地调试的时候不会出现。
来自有道的翻译：超过了最大递归更新。这意味着您有一个反应性的效果，它正在改变自己的依赖项，从而递归地触发自己。可能的源函数包括组件模板、渲染函数、更新的钩子或监视器源函数。
这时候开始排查项目代码发现了这个
这个replaceMsg方法是用来将文字的部分字替换成红色然后渲染出来。
这个content是通过父组件传递来的。
虽然这样写法本地没问题，还很流畅不报错。但是我查阅了stackflow受到一些启发，他们存在类似的报错有些是在渲染的时候进行操作。
于是乎我转变了想法，我把这个replaceMsg的修改逻辑放到父组件中，当我从后端获取到数组的时候，就进行修改。然后在子组件中直接渲染content.msg这个字段。
/* 通过传入的list，修改msg*/
const changeListMsg = (list) => {
list.forEach((val) => {
if (val.isWarn && val.key) {
val.key.forEach((item) => {
const res = new RegExp(item, "g");
val.msg = val.msg.replace(
res,
"<span style='color:red;'>" + item + "</span>"
);
});
}
});
};
earlyWarning.value = res.data.content; // 接受后端返回的content值
changeListMsg(state.earlyWarning);
发布测试环境后，接口畅通，页面不再卡死，不存在pending状态了。
结尾
这个问题，之前都没遇到过，算一种代码风格的所带来的的问题吧。起初以为可以通过类似函数返回新的值的形式(return msg)，能够渲染自己想要的页面(本地环境确实可以干，确实也可以渲染出来)，但是呢在正式环境就会出现这个bug，这个问题也算一个坑踩过才知道，就像一个无形的bug，告诫自己以后编码的时候数据还是先处理好再去渲染！！！网上类似的问题可能有，但是和我一模一样的还没找到过，这边记录一下，也算分享一下自己的踩坑经历。
