这是一个创建于 186 天前的主题，其中的信息可能已经有所发展或是发生改变。
假如有这样一个场景：
一个用来显示文章的组件，
如果每一行，都用一个 vue 子组件来表示一个行，
这是否会产生性能问题？
比如，如果文章有上百行呢？
官方文档指出，每一个 vue 组件，比简单的 dom 结构更宝贵。
这种情况，用原生 js 构建临时 dom ，然后通过 fragment 一次性挂载，
跟上面的每一行都是一个 vue 子组件相比，性能差距会有多大呢？
一个用来显示文章的组件，
如果每一行，都用一个 vue 子组件来表示一个行，
这是否会产生性能问题？
比如，如果文章有上百行呢？
官方文档指出，每一个 vue 组件，比简单的 dom 结构更宝贵。
这种情况，用原生 js 构建临时 dom ，然后通过 fragment 一次性挂载，
跟上面的每一行都是一个 vue 子组件相比，性能差距会有多大呢？
11 条回复 • 2024-06-03 11:43:03 +08:00
 |
1
Jtyczc 185 天前
这个要自己实际场景测啊，你得看你请求这个页面花了多少时间。
而且只要数据更新不频繁，那么性能问题不严重，如果你是老是整个 DOM 树全部加载，那估计卡。 你能这么问你们公司估计没测试指标的，那么领导能感觉不到卡就可以了。 |
 |
2
summerwar 185 天前
如果每一行用一个 vue 组件，你的文章如何编辑和保存呢？这好像比性能问题更重要吧
|
 |
3
Track13 185 天前
不 re-render 问题不大。为什么会有这种需求？
|
 |
4
kylebing 185 天前
几百个是同一个组件渲染出来的吧？还是说几百个都是完全不一样的组件？不一样的话不知道如何。
但如果是一样的，我试过，几百个没什么问题，很流畅  |
 |
5
790002517zzy 185 天前 via Android
？什么奇怪需求
你是想了解富文本？ |
 |
6
WarlockMan OP @790002517zzy
是的，实际上是一种富文本组件，之所以每一行都要用一个子组件， 是因为，每行，都不是纯粹的文本行，而是结构化的行数据，算是一种杂合体， 这样一行就是一个小型 dom 结构，所以用 vue 子组件来表达一行， 根据行内容的不同，有不同的结构。 如果有很多行的话，每一行都是这样的一个子组件，不知道是否会有性能问题 |
 |
7
Zwying 184 天前
以前有个业务是渲染田字格，每个格子都是一个小组件，性能上来说没有太大的问题
|
 |
8
sunwayTaihulight 184 天前
从源码上看，处理组件和处理 DOM 之间的差别在于两点：
1. 组件会多一个组件实例，会增加内存消耗 2. 组件会多一层初始化/组件更新的逻辑，走完组件逻辑后再经过 patch 走进 DOM 逻辑里 但是似乎没有看到有非常"昂贵”的操作，感觉在能接受的范围内。如果有人测试过性能数据或是我漏看了某些逻辑，希望能踢我一下，感谢 |
 |
9
goxxoo 183 天前
多俩字都有损耗,别说组件了
|
 |
10
realJamespond 183 天前
可用虚拟滚动实现，可视范围内怎么折腾都不至于性能太差
|
 |
11
royalknight 183 天前
列表组件太多的话，如果要改到数据，那 diff 计算量太大了，需要非常谨慎的编写逻辑
|
Select Language