大佬们来解释一下这个奇怪的 bug

[zhj0326]

一个 vue3 项目在本地和部署到测试环境都可以正常访问，但是部署到正式环境就会有问题，访问 A 页面没有任何问题，访问 B 页面就会直接卡死，控制台都按不出来，CPU 也没有直接卡爆，是一点儿一点儿的涨 代码都是同一套，打包也只是根据不同环境使用了不同的 api ，别的代码都是一样的

最后排查出来是因为一个 for 循环使用了 reverse() v-for="item in list.reverse()",删除了 reverse() 就恢复了正常，疑惑是为什么打包到测试环境就没有问题，打包到正式环境就会出现页面卡死的情况

[954758514]

结合环境，上下文排查呗。再不行了代理到生产环境 debugger 一下。

[JoeJoeJoe]

盲猜 list.reverse()会改变 list, vue 监听 list 改变, 又触发了渲染
你把 list.reverse()提出来, 当个属性试试
-------
至于测试环境没事, 生产环境有问题, 这个得具体看, 有可能测试环境也是有问题的, 但是数据少, 你体验不出来. 仔细检查一下

[zhj0326]

@954758514 佬，找到问题是因为“reverse()”了，疑惑的是为什么“reverse()”会在不同环境造成这个结果

[zhj0326]

@JoeJoeJoe 如果我直接给 list = [] ,就不会出现这个 bug ，测试环境和正式都没有多少数据，不是数据量的原因

[JoeJoeJoe]

@zhj0326 #4 你提成计算属性应该能解决, 至于生产/测试环境的差异, 可以再研究一下, 给大家分享分享.

-----------
> '如果我直接给 list = [] ,就不会出现这个 bug "
因为没数据, 不变化, 肯定是不会自动触发渲染的.

---------
ps: 尽量不要在模板的数据源中调用方法, 可以用计算属性来替代

[chenluo0429]

开发模式下会有一个 checkRecursiveUpdates 的机制检查递归更新的次数，达到上限 100 之后就会抛错中断的，你在控制台应该可以看到错误打印。
构建之后这种耗性能的检查都去掉了，所以你就会无限循环卡死掉了。