This topic created in 277 days ago, the information mentioned may be changed or developed.
一个 vue3 项目在本地和部署到测试环境都可以正常访问，但是部署到正式环境就会有问题，访问 A 页面没有任何问题，访问 B 页面就会直接卡死，控制台都按不出来，CPU 也没有直接卡爆，是一点儿一点儿的涨 代码都是同一套，打包也只是根据不同环境使用了不同的 api ，别的代码都是一样的
最后排查出来是因为一个 for 循环使用了 reverse() v-for="item in list.reverse()",删除了 reverse() 就恢复了正常，疑惑是为什么打包到测试环境就没有问题，打包到正式环境就会出现页面卡死的情况
 |
1
954758514 Aug 5, 2025
结合环境，上下文排查呗。再不行了代理到生产环境 debugger 一下。
|
 |
2
JoeJoeJoe PRO 盲猜 list.reverse()会改变 list, vue 监听 list 改变, 又触发了渲染
你把 list.reverse()提出来, 当个属性试试 ------- 至于测试环境没事, 生产环境有问题, 这个得具体看, 有可能测试环境也是有问题的, 但是数据少, 你体验不出来. 仔细检查一下 |
|
5
JoeJoeJoe PRO  2
@zhj0326 #4 你提成计算属性应该能解决, 至于生产/测试环境的差异, 可以再研究一下, 给大家分享分享.
----------- > '如果我直接给 list = [] ,就不会出现这个 bug " 因为没数据, 不变化, 肯定是不会自动触发渲染的. --------- ps: 尽量不要在模板的数据源中调用方法, 可以用计算属性来替代 |
 |
6
chenluo0429 Aug 5, 2025 via Android
开发模式下会有一个 checkRecursiveUpdates 的机制检查递归更新的次数，达到上限 100 之后就会抛错中断的，你在控制台应该可以看到错误打印。
构建之后这种耗性能的检查都去掉了，所以你就会无限循环卡死掉了。 |
Select Language