Vue2 vs Vue3 中 v-for 的 key 用法对比

Vue2 vs Vue3 中 v-for 的 key 用法对比

Vue2 中 key 的位置

在 Vue2 中，key 必须放在 v-for 所在的元素本身上：

<!-- ✅ 正确 -->
<ul>
  <li v-for="item in list" :key="item.id">{{ item.name }}</li>
</ul>

<!-- ✅ 使用 template 时，key 放在 template 上 -->
<ul>
  <template v-for="item in list">
    <li :key="item.id + '-name'">{{ item.name }}</li>
    <li :key="item.id + '-age'">{{ item.age }}</li>
  </template>
</ul>

⚠️ Vue2 中 <template> 本身不会渲染为真实 DOM，所以 key 必须放在内部的每个子元素上，不能放在 <template> 标签上。

---

Vue3 中 key 的位置

Vue3 对 <template v-for> 的处理做了改进 ，key 可以直接放在 <template> 上：

<!-- ✅ Vue3 推荐写法：key 放在 template 上 -->
<ul>
  <template v-for="item in list" :key="item.id">
    <li>{{ item.name }}</li>
    <li>{{ item.age }}</li>
  </template>
</ul>

<!-- ✅ 普通元素写法与 Vue2 一致 -->
<ul>
  <li v-for="item in list" :key="item.id">{{ item.name }}</li>
</ul>

---

核心差异对比表

场景	Vue2	Vue3
普通元素 v-for	key 放元素本身 ✅	key 放元素本身 ✅
<template v-for>	key 放内部子元素上 ⚠️	key 放 <template> 上 ✅
key 放 <template> 上	❌ 不支持（会警告）	✅ 推荐写法

---

其他 Vue3 的变化点

1. v-if 与 v-for 优先级变了

   • Vue2：v-for 优先级 高于 v-if
   • Vue3：v-if 优先级 高于 v-for（所以不建议同时用，用 <template> 隔开）

2. key 的推荐类型

   Vue3 明确推荐使用 string | number，避免使用对象或数组作为 key。

3. 不再需要根节点

   Vue3 支持 Fragment，组件可以有多个根节点，配合 <template v-for :key> 更灵活。

---

总结一句话 ：Vue2 的 <template v-for> 要把 key 打散到子元素上，Vue3 统一收到 <template> 上，更简洁直观。