Vue3新特性学习v-for的key已变更(非兼容)9-10-21最后一次更文挑战前言记录积累学习 Vue3 及源码

这是我参与11月更文挑战的第9天，活动详情查看：2021最后一次更文挑战

前言

记录积累学习 Vue3 及源码! 之前有几篇文章有作 Vue3的一些变更学习总结的开始, 请直接转到文末Vue3 学习总结目录:

v-for 在实际工作中用到的最普遍的, 后端请求数据要处理成可迭代的数据后再通过 v-for 渲染到页面, 如表格, 列表, 卡片等等. 而这迭代的每一项都要设置一个不同的 uid, 用于在修改删除等操作时的 关键字key. 这里的 key 就很重要了.

在 Vue2.x 中, 对于 v-if/v-else/v-else-if 的各分支项 key 是必须的, 需要我们自己配置, 而且不建议使用循环的索引 index作为 key, 相信大家都有踩到过这个 use-index-for-key 的坑了.

所以 Vue3.x 现在会自动生成唯一的 key, 不用我们手动添加了; 而如果我们还非要自己添加, 那就需要保证每个分支必须使用唯一的 key, 而不能通过故意使用相同的 key 来强制重用分支。

在模板上使用 key: <template v-for> 的 key 应该设置在 <template> 标签上 (而不是设置在它的子节点上)。

<!-- Vue 3.x -->
<template v-for="item in data" :key="item._id">
  <span>{{ item._id }}</span>
  <div>{{ item }}</div>
</template>