v-for绑定的key使用随机数导致DOM丢失问题?

Question

v-for绑定的key如果调用了生成随机数的函数会在重绘中丢失这个DOM

今天在搬砖的过程中发现，如果在v-for中绑定key的时候调用了一个生成随机数的函数，那么在视图刷新以后这些DOM会丢失。
先说业务场景：
同一个页面下，在执行radio的input事件时，对该radio按钮控制的Echarts图表执行了dispose操作，销毁图表后切换列表展示。在这过程中，页面另一处的Echarts图表无缘无故的消失了，而且在Document中也找不到该Echarts图表的DOM实例。最后排查到的问题是在消失的Echarts图表中，:key是调用了生成随机数的函数生成的，于是我就有如下猜想：是否在更新虚拟DOM的时候，重新调用了该函数，导致生成了与第一次完全不同的key，所以才会在视图更新之后丢失该DOM。网上搜到的关于key的解释都感觉没有准确的解答我的疑惑，希望有大佬不吝赐教

Answer 1

简单的说 key 是每次更新时，框架用来判断对应的 vnode 是否可以被复用的标识，由此来减少 DOM 重新创建的频率，这也就是为什么通常 key 都是用业务数据中的 uuid

回到你的问题，key 如果绑定的是一个随机数，那么每次更新，列表元素的 key 都是在变化的，key 都变了，框架就会把原来的 DOM 删除掉并重新创建

vue 的官方文档中也有对应的描述
https://cn.vuejs.org/api/built-in-special-attributes.html#key

Answer 2

key不能使用随机数绑定