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

vue 视频流 列表数据更新导致 DOM 树重建

  •  
  •   yxcoder · 2022-05-16 13:18:50 +08:00 · 1381 次点击
    这是一个创建于 682 天前的主题,其中的信息可能已经有所发展或是发生改变。

    框架 vue2

    摘要 列表循环渲染,列表项中的 DOM 树上挂载了视频流,由于列表数据更新导致 DOM 重新加载,于是视频没了

    问题 列表增加或者删除某项,会导致整个列表 DOM 重新渲染,但是流数据是通过组件绑在列表项的某个 DOM($dom)上的,有方法让 vue 不重新渲染 $dom 节点,但是渲染其他节点吗?

    3 条回复    2022-05-16 14:04:39 +08:00
    vitozyf
        1
    vitozyf  
       2022-05-16 13:22:28 +08:00
    给每个节点增加唯一 key
    shintendo
        2
    shintendo  
       2022-05-16 13:42:07 +08:00
    本来就是只渲染修改的部分,问题在于你的列表增删了项以后,vue 无法确定新列表和旧列表的元素对应关系。
    比如[1, 2, 3, 4, 5]变成[2, 3, 4, 5],有可能是删掉了第一项,也有可能是删掉了最后一项并把前四项+1 ,vue 无从知道。
    当列表元素持有状态(类似 react 的非受控组件)的时候,就会出现问题了。
    解决方法如一楼所说,给元素加 key 。通过对比新列表和旧列表的 key ,vue 就能知道你增删了哪一项,从而只渲染对应的项。
    注意不要给$index ,那跟没给是一样的。
    yxcoder
        3
    yxcoder  
    OP
       2022-05-16 14:04:39 +08:00
    @shintendo 懂了,key 不要用 $index ,感谢
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   4614 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 28ms · UTC 10:04 · PVG 18:04 · LAX 03:04 · JFK 06:04
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.