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的解释都感觉没有准确的解答我的疑惑，希望有大佬不吝赐教
共有2个答案
简单的说 key 是每次更新时，框架用来判断对应的 vnode 是否可以被复用的标识，由此来减少 DOM 重新创建的频率，这也就是为什么通常 key 都是用业务数据中的 uuid
回到你的问题，key 如果绑定的是一个随机数，那么每次更新，列表元素的 key 都是在变化的，key 都变了，框架就会把原来的 DOM 删除掉并重新创建
vue 的官方文档中也有对应的描述
https://cn.vuejs.org/api/built-in-special-attributes.html#key
key不能使用随机数绑定
-
当 Vue.js 用v-for正在更新已渲染过的元素列表时，它默认用“就地复用”策略。如果数据项的顺序被改变，Vue 将不会移动 DOM 元素来匹配数据项的顺序， 而是简单复用此处每个元素，并且确保它在特定索引下显示已被渲染过的每个元素。这个类似 Vue 1.x 的track-by="$index"。 这个默认的模式是高效的，但是只适用于不依赖子组件状态或临时 DOM 状态 (例如：表单输入值)
-
问题内容： 简而言之，问题 ：执行带有子聚合的查询时，内部聚合为什么在某些情况下会丢失数据？ 详细问题 ：我有一个带有子聚合（存储桶中的存储桶）的搜索查询，如下所示： 如果我执行此查询，对于某些external_docs，我不会收到与之关联的所有inner_docs。在下面的输出中，有三个用于外部文档key_1的内部文档。 现在，我添加了一个查询，以单选一个反而应该在前20个中使用的externa
-
我的gradle文件中有以下数据绑定依赖项
-
我有一个项目A，它依赖于我的Eclipse工作区中的项目B和C。 有时我希望A运行时使用来自存储库的工件B和C，而不是工作区中的版本。因此，我选择A，然后选择'Maven->Disable Workspace Resolution'，这样A将使用存储库中的版本。 附加信息：这些项目的确切版本在存储库中。事实上，如果我关闭工作区中的项目B和C，项目A会很高兴地使用B和C的存储库版本。
-
本文向大家介绍为什么在v-for中的key不推荐使用随机数或者index呢？那要怎么使用才比较好呢？相关面试题，主要包含被问及为什么在v-for中的key不推荐使用随机数或者index呢？那要怎么使用才比较好呢？时的应答技巧和注意事项，需要的朋友参考一下 因为在插入数据或者删除数据的时候，会导致后面的数据的key绑定的index变化，进而导致从新渲染，效率会降低 派发更新：vue/src/core
-
本文向大家介绍v-for循环中key有什么作用？相关面试题，主要包含被问及v-for循环中key有什么作用？时的应答技巧和注意事项，需要的朋友参考一下 四个字: 性能优化, 简述: 让vue在更新数据的时候可以更有针对性的