假如有这样一个场景:
一个用来显示文章的组件,
如果每一行,都用一个 vue 子组件来表示一个行,
这是否会产生性能问题?
比如,如果文章有上百行呢?

官方文档指出,每一个 vue 组件,比简单的 dom 结构更宝贵。
这种情况,用原生 js 构建临时 dom ,然后通过 fragment 一次性挂载,
跟上面的每一行都是一个 vue 子组件相比,性能差距会有多大呢?
举报· 137 次点击
登录 注册 站外分享
10 条回复  
royalknight 小成 2024-6-3 11:43:03
列表组件太多的话,如果要改到数据,那 diff 计算量太大了,需要非常谨慎的编写逻辑
realJamespond 小成 2024-6-3 10:18:10
可用虚拟滚动实现,可视范围内怎么折腾都不至于性能太差
goxxoo 小成 2024-6-3 09:26:59
多俩字都有损耗,别说组件了
sunwayTaihulight 小成 2024-6-2 16:49:20
从源码上看,处理组件和处理 DOM 之间的差别在于两点:
1. 组件会多一个组件实例,会增加内存消耗
2. 组件会多一层初始化/组件更新的逻辑,走完组件逻辑后再经过 patch 走进 DOM 逻辑里

但是似乎没有看到有非常"昂贵”的操作,感觉在能接受的范围内。如果有人测试过性能数据或是我漏看了某些逻辑,希望能踢我一下,感谢
Zwying 小成 2024-6-2 14:39:16
以前有个业务是渲染田字格,每个格子都是一个小组件,性能上来说没有太大的问题
790002517zzy 小成 2024-6-1 23:06:43
?什么奇怪需求
你是想了解富文本?
kylebing 小成 2024-6-1 08:58:51
几百个是同一个组件渲染出来的吧?还是说几百个都是完全不一样的组件?不一样的话不知道如何。
但如果是一样的,我试过,几百个没什么问题,很流畅

https://i.imgur.com/EuYDeGV.png
Track13 小成 2024-6-1 08:58:18
不 re-render 问题不大。为什么会有这种需求?
summerwar 小成 2024-6-1 07:45:26
如果每一行用一个 vue 组件,你的文章如何编辑和保存呢?这好像比性能问题更重要吧
Jtyczc 小成 2024-6-1 04:08:48
这个要自己实际场景测啊,你得看你请求这个页面花了多少时间。

而且只要数据更新不频繁,那么性能问题不严重,如果你是老是整个 DOM 树全部加载,那估计卡。

你能这么问你们公司估计没测试指标的,那么领导能感觉不到卡就可以了。
返回顶部