v-for 中 key 的作用与不当使用造成的问题。

理解：这个所谓的遍历循环，列表中的列表项会通过 Vue 的编译器 -> 会编译为虚拟的 dom 节点，每遍历一个产生一个虚拟 dom 节点，然后分情况：如果我不加入 key 那么在 Vue 中会默认是由 0 逐次递增的索引作为 key，依次给每个节点加入身份的唯一标识，然后情况模拟：比如列表中有一个列表项中的值是响应式的，变化的，然后该值变化，Vue 会触发就地复用，对比这两个新旧虚拟 dom 节点发现只是值改变，那么会复用原有 DOM 节点，仅更新动态内容（不会替换旧节点），其他节点不改变，这样其他虚拟的节点渲染 dom 元素不会没必要的被销毁。 然后另一种情况：列表中的列表项少一项，此时默认 key 的唯一标识中，被删除项后面的节点 key 会变动，造成节点混乱 —— 核心是 Vue 会误复用不该复用的 DOM，导致数据与视图绑定错乱，同时还会造成不必要的 dom 销毁和创建，因为只是删除一个列表项，但被删除项后的节点 key 都发生了改变，所以就会触发大量 dom 更新和重新渲染，而不是移动已经存在的 dom 元素