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

给每个节点增加唯一 key

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

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