如果文章的每行都用一个 vue 组件来表示，是否会产生性能问题？

[WarlockMan]

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

官方文档指出，每一个 vue 组件，比简单的 dom 结构更宝贵。
这种情况，用原生 js 构建临时 dom ，然后通过 fragment 一次性挂载，
跟上面的每一行都是一个 vue 子组件相比，性能差距会有多大呢？

[Jtyczc]

这个要自己实际场景测啊，你得看你请求这个页面花了多少时间。

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

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

[summerwar]

如果每一行用一个 vue 组件，你的文章如何编辑和保存呢？这好像比性能问题更重要吧

[Track13]

不 re-render 问题不大。为什么会有这种需求？

[kylebing]

几百个是同一个组件渲染出来的吧？还是说几百个都是完全不一样的组件？不一样的话不知道如何。
但如果是一样的，我试过，几百个没什么问题，很流畅

[790002517zzy]

？什么奇怪需求
你是想了解富文本？

[WarlockMan]

@790002517zzy
是的，实际上是一种富文本组件，之所以每一行都要用一个子组件，
是因为，每行，都不是纯粹的文本行，而是结构化的行数据，算是一种杂合体，
这样一行就是一个小型 dom 结构，所以用 vue 子组件来表达一行，
根据行内容的不同，有不同的结构。

如果有很多行的话，每一行都是这样的一个子组件，不知道是否会有性能问题

[Zwying]

以前有个业务是渲染田字格，每个格子都是一个小组件，性能上来说没有太大的问题

[sunwayTaihulight]

从源码上看，处理组件和处理 DOM 之间的差别在于两点：
1. 组件会多一个组件实例，会增加内存消耗
2. 组件会多一层初始化/组件更新的逻辑，走完组件逻辑后再经过 patch 走进 DOM 逻辑里

但是似乎没有看到有非常"昂贵”的操作，感觉在能接受的范围内。如果有人测试过性能数据或是我漏看了某些逻辑，希望能踢我一下，感谢

[goxxoo]

多俩字都有损耗,别说组件了

[realJamespond]

可用虚拟滚动实现，可视范围内怎么折腾都不至于性能太差

[royalknight]

列表组件太多的话，如果要改到数据，那 diff 计算量太大了，需要非常谨慎的编写逻辑