V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
WarlockMan
V2EX  ›  Vue.js

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

  •  
  •   WarlockMan · 160 天前 · 2174 次点击
    这是一个创建于 160 天前的主题,其中的信息可能已经有所发展或是发生改变。
    假如有这样一个场景:
    一个用来显示文章的组件,
    如果每一行,都用一个 vue 子组件来表示一个行,
    这是否会产生性能问题?
    比如,如果文章有上百行呢?

    官方文档指出,每一个 vue 组件,比简单的 dom 结构更宝贵。
    这种情况,用原生 js 构建临时 dom ,然后通过 fragment 一次性挂载,
    跟上面的每一行都是一个 vue 子组件相比,性能差距会有多大呢?
    11 条回复    2024-06-03 11:43:03 +08:00
    Jtyczc
        1
    Jtyczc  
       160 天前
    这个要自己实际场景测啊,你得看你请求这个页面花了多少时间。

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

    你能这么问你们公司估计没测试指标的,那么领导能感觉不到卡就可以了。
    summerwar
        2
    summerwar  
       159 天前
    如果每一行用一个 vue 组件,你的文章如何编辑和保存呢?这好像比性能问题更重要吧
    Track13
        3
    Track13  
       159 天前
    不 re-render 问题不大。为什么会有这种需求?
    kylebing
        4
    kylebing  
       159 天前
    几百个是同一个组件渲染出来的吧?还是说几百个都是完全不一样的组件?不一样的话不知道如何。
    但如果是一样的,我试过,几百个没什么问题,很流畅

    790002517zzy
        5
    790002517zzy  
       159 天前 via Android
    ?什么奇怪需求
    你是想了解富文本?
    WarlockMan
        6
    WarlockMan  
    OP
       159 天前
    @790002517zzy
    是的,实际上是一种富文本组件,之所以每一行都要用一个子组件,
    是因为,每行,都不是纯粹的文本行,而是结构化的行数据,算是一种杂合体,
    这样一行就是一个小型 dom 结构,所以用 vue 子组件来表达一行,
    根据行内容的不同,有不同的结构。

    如果有很多行的话,每一行都是这样的一个子组件,不知道是否会有性能问题
    Zwying
        7
    Zwying  
       158 天前
    以前有个业务是渲染田字格,每个格子都是一个小组件,性能上来说没有太大的问题
    sunwayTaihulight
        8
    sunwayTaihulight  
       158 天前
    从源码上看,处理组件和处理 DOM 之间的差别在于两点:
    1. 组件会多一个组件实例,会增加内存消耗
    2. 组件会多一层初始化/组件更新的逻辑,走完组件逻辑后再经过 patch 走进 DOM 逻辑里

    但是似乎没有看到有非常"昂贵”的操作,感觉在能接受的范围内。如果有人测试过性能数据或是我漏看了某些逻辑,希望能踢我一下,感谢
    goxxoo
        9
    goxxoo  
       157 天前
    多俩字都有损耗,别说组件了
    realJamespond
        10
    realJamespond  
       157 天前
    可用虚拟滚动实现,可视范围内怎么折腾都不至于性能太差
    royalknight
        11
    royalknight  
       157 天前
    列表组件太多的话,如果要改到数据,那 diff 计算量太大了,需要非常谨慎的编写逻辑
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   1018 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 20ms · UTC 22:09 · PVG 06:09 · LAX 14:09 · JFK 17:09
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.