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

2022-05-16 13:18:50 +08:00
 yxcoder

框架 vue2

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

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

1512 次点击
所在节点    Vue.js
3 条回复
vitozyf
2022-05-16 13:22:28 +08:00
给每个节点增加唯一 key
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
2022-05-16 14:04:39 +08:00
@shintendo 懂了,key 不要用 $index ,感谢

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/853160

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX