表格数据错乱 - 关于 vue2.0的 key 值

:key=Math.random()的用处

最近在项目中遇见一个bug - 关于key值

根据筛选项 判断出某些表格列的显示or隐藏

表格一 为模拟初始数据

name	age
路人甲	18
路人乙	17
路人丙	17

表格二为筛选后结果
当筛选项的值为"路人甲"时 表格会多一列 “city”

name	age	city
路人甲	18	山东

关于是否有city这列是从筛选值获取

这里我们可以通过计算属性

给列添加v-if 来判断显示与隐藏

（一开始尝试的v-show发现不生效，应该是组件库的原因）

但是我在项目中遇见一个奇妙的bug

在我切换表格列时 可能会出现数据错乱

错误示例：

name	age	city
路人甲	18	18

数据是从后端接口里直接拿的

本地也打过断点调试 是没问题的

经过研究 发现问题出现在key上

解决办法是:key=Math.random()

给列加key，这样动态展示列的时候布局就不会再乱了。

---

关于key的定义

有相同父元素的子元素必须有独特的 key。重复的 key 会造成渲染错误。
也就是说必须保证key是唯一标识

key主要用在vue的虚拟Dom算法，在新旧节点对比时辨识VNodes。使用key时，它会基于key的变化重新排列元素顺序，并且会移除key不存在的元素。

有相同父元素的子元素必须有独特的key，重复的key会造成渲染错误。
给列加上key之后，再这样切换表格的时候会不出现表头字段的错乱

---

使用key的坏习惯

把 index 作为 key

我经常在使用 v-for 的时候，直接使用 index 作为它的 key 值。
这当然是不对的，坏习惯应尽快改正。

用 index 作为 key 值是有隐患的，除非你能保证 index 始终能够能够作为一个唯一的标识。

key值在vue中是非常重要的，可以在dom diff中提高dom的可复用性。

v2和v3 在key 有哪些不同

vue2	vue3
必须绑定key值	不强制 因为会自动生成唯一的key值
不能在模版上绑定v-for 和 key值。要在里面的子元素身上绑定key值	应该绑定在上而不是它的子元素

key的使用

如果不使用 key，Vue 会使用一种最大限度减少动态元素并且尽可能的尝试修复/再利用相同类型元素的算法。使用 key，它会基于 key 的变化重新排列元素顺序，并且会移除 key 不存在的元素。

如果我们有 key 值，我们就可以直接在 createKeyToOldIdx 方法中创建的 map 对象中根据我们的 key 值，直接找到相应的值。没有 key 值，则需要遍历才能拿到。相比于遍历，映射的速度会更快。

key 值是每一个 vnode 的唯一标识，依靠 key，我们可以更快的拿到 oldVnode 中相对应的节点。

经验点+1

遇到 vue 使用数组splice方法失效，删除当前数据会有偶现bug

很快排查问题 不是splice的原因 是跟key有关

给v-for的key从index改成唯一标识之后解决