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

[yxcoder]

框架 vue2

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

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

[vitozyf]

给每个节点增加唯一 key

[shintendo]

本来就是只渲染修改的部分，问题在于你的列表增删了项以后，vue 无法确定新列表和旧列表的元素对应关系。
比如[1, 2, 3, 4, 5]变成[2, 3, 4, 5]，有可能是删掉了第一项，也有可能是删掉了最后一项并把前四项+1 ，vue 无从知道。
当列表元素持有状态（类似 react 的非受控组件）的时候，就会出现问题了。
解决方法如一楼所说，给元素加 key 。通过对比新列表和旧列表的 key ，vue 就能知道你增删了哪一项，从而只渲染对应的项。
注意不要给$index ，那跟没给是一样的。

[yxcoder]

@shintendo 懂了，key 不要用 $index ，感谢