信创环境前端该不该升 vue3？

[Southside]

项目运行在信创环境下（国产 CPU ），现在用的是 vue2 ，在一些数据量大的场景下（几千条）有明显卡顿（ 1-2s ）。问下前端大佬们升 vue3 能解决吗？性能对比 vue2 有明显提升吗？

感谢大家回复哈。这个优化主要是另外一个同事负责，他基本上能用的方法都用了，还是解决不了几个卡顿问题，所以才和我讨论要不要换框架。我觉得不应该换，换框架工作量肯定更大（不能摸鱼）。现在我知道的问题有三个：

1. 树选择器在有几千条数据时做前端搜索很卡，后端搜索也有一定延迟（客户不喜欢）
2. 数据量比较大的弹窗关闭有卡顿感
3. getInfo接口有时候会超时，页面直接出不来

[yamedie]

升 vue3 解决不了这种问题, 列表太长就分页吧, 不能分页的话用虚拟滚动(virtual scroll)

[mscststs]

如果你连卡顿的原因都没找到，就在想换框架的话，我觉得换框架多半也解决不了你的问题。

建议打开浏览器 Performance 录制一下卡顿的 profile ，定位一下卡顿的原因先

[shanyuhai123]

看你使用的 UI 库，有的 UI 库的确是在 Vue3 才内置虚拟滚动。升级的话配套也得升级，需要评估下成本，不然做分页改造更简单。

[statumer]

页面卡顿应该 profiling ，怎么能卡顿就想着换框架？观察一下到底是多余的重排和 DOM 操作还是计算太复杂导致的。前端这块把优化做好性能提升 5 倍很正常。

[jydeng]

从你的描述来看，解决卡顿的工作量应该比升级 3 更少，不一定非得升级。

[qbuer]

可以直接用 vue3 测试一下数据量大的列表。

[snoopyhai]

如果没有能力定位卡顿问题，可以尝试下你看中的 vue3 框架，如果解决目前问题，那就升级吧。

[wu67]

有用但是没那么有用. 我之前整的 1 到 6 千左右的数组, 该卡的还是会卡, 所以我干脆加了 loading, 然后手动过滤分页.

你可以先就那个页面数据用 3 写个 demo, 看看实际效果满不满意, 再考虑要不要升. 不然还是花时间解决导致卡顿的瓶颈比较好

[gouflv]

升 vue10 估计可以

[chunqiuyiyu]

不该，你现在只有页面卡顿的问题，换了之后不知道会新产生多少问题。

[cweijan]

Hi, 我之前也有这个场景, vue2 使用了 https://github.com/u-leo/umy-ui, 效果不错; 最近调研了 vue3 的 naive ui 和 element plus, 测试结果是虚拟表格体验不如 umy-ui.

[sjhhjx0122]

信创电脑的浏览器是那个呢？老火狐还是那些 chrome 套壳的，数据大就自己在前端分个页吧，要不就虚拟滚动。。换 vue3 没用的，我之前 ng 项目跑起来都卡，vue2 项目就别想升级 vue3 了，新项目再开 vue3 吧

[rabbbit]

换虚拟滚动
试过 vxe-table 的虚拟树，1 万行 x 20 列 PC 端无压力

[xxfye]

其实可以尝试用 Vue3 封装一个 web components 引入试试看

[Osk]

@sjhhjx0122 只需要知道火狐二次开发比较麻烦...

其他的不敢乱透露了...

[Lighfer]

非必要别升，vue3 还有比较容易遇到的内存泄漏问题没解决呢，信创环境本身机器配置又低

[sqlNice]

1.对于那么多的数据是否有必要让 Vue 把他们变成响应式
1.1 是否可以减少响应式的数据,比如 { id: 23, name: 'Filex', age: 18 ... } 其实你只需要 id 和 name,那么可以把对象中的其他 key 去掉后再给 UI 绑定数据

2.对于你使用的树选择器 /弹窗,检查源码实现

[Nullnode]

如果是数据量大导致的卡顿，建议虚拟列表或分页。vue2 有单独的虚拟列表组件

[tuutoo]

如果项目比较大 直接升 Vue3 风险还是比较大的 要改的东西多, 还要测试.
数据量比较大试下分页, 或者是虚拟滚动

[yqxxoo]

虚拟滚动，大批量搜索别丢主线程去做，丢 Web Workers 或者 WAMS 里面去

[yqxxoo]

改造不了虚拟滚动就去，找个 用 canvas 绘制的 tree