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

瞳孔放大黑洞

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

阅读量：187

点赞量：0

问AI
简单的说 "key" 是每次更新时，框架用来判断对应的 "vnode" 是否可以被复用的标识，由此来减少 "DOM" 重新创建的频率，这也就是为什么通常 "key" 都是用业务数据中的 "uuid" 回到你的问题，"key" 如果绑定的是一个随机数，那么每次更新，列表元素的 key 都是在变化的，key 都变了，框架就会把原来的 DOM 删除掉并重新创建 "vue" 的官方文档中也有对应的描述 "https://cn.vuejs.org/api/built-in-special-attributes.html#key" (https://link.segmentfault.com/?enc=3STgbUzsyfkYX6n00AU9dA%3D%3D.%2FQ6FWvVP4DF9KGQSJUlPbII%2B8Ir4wypcrGMksCJ2G3OkrJMTiJMcjjizxWWLsk346sU7YdujLmKIobdacxi7tw%3D%3D) "image.png" (https://wmprod.oss-cn-shanghai.aliyuncs.com/c/user/20241013/ad8dda3e2f66d5c290682ea20e7c5521.png)