2022-02-26 v-for 中使用 key

使用 v-for 更新已渲染的元素列表时，默认用就地复用策略；列表数据修改的时候，他会根据 key 值去判断某个值是否修改，如果修改，则重新渲染这一项，否则复用之前的元素。

何时使用何种 key？

vue 采用原地复用策略，虚拟 dom 变化时，两个虚拟 dom 节点的 key 如果一样就不会重新创建节点，而是修改原来的节点。

当渲染的数据不需要保持状态时，例如常见的单纯的表格分页渲染（不包含输入，只是展示）、下拉加载更多等场景，那么使用 index 作为 key 再好不过，因为进入下一页或者上一页时就会原地复用之前的节点，而不是重新创建，如果使用唯一的 id 作为 key 反而会重新创建dom，性能相对较低。

此外使用 index 作为 key 还应该要尽量避免对数组的中间进行 增加/删除 等会影响后面元素 key 变化的操作。这会让 vue 认为后面所有元素都发生了变化，导致多余的对比和原地复用。

所以使用 index 作为 key 需要满足：

1. 数据没有独立的状态
2. 数据不会进行 增加/删除 等会影响后面元素 key 变化的操作

何时使用 id 作为 key？

分页数据展示，如果使用 id 作为 key，每一页的每一条数据 id 都是不一样的，所以当换页时两颗虚拟DOM树的节点的 key 完全不一致，vue 就会移除原来的节点然后创建新的节点，效率会更加低下。但是它也有它的优点，唯一的 key 可以帮助 diff 更加精确地绑定状态，这尤其适合数据有独立的状态的场景，例如带输入框或者单选框的列表数据。

所以何时使用 id 作为 key：

1. 无法使用 index 作为 key 的时候