Vue3中v-for嵌套于v-once时是否仍需设置key？

我使用Vue3编写了如下代码：

<div v-once>
  <div v-for="hour in [...Array(25)].map((_, i) => i)">{{ `0${hour}:00`.slice(-5) }}</div>
</div>

搭配eslint-plugin-vue检查时，出现错误提示：

Elements in iteration expect to have 'v-bind:key' directives. (vue/require-v-for-key)

我疑惑这是否属于误报，不清楚此处为何需要设置key。

这不属于误报，原因如下：

1. vue/require-v-for-key是静态代码检查规则，它只会扫描代码中是否存在未绑定key的v-for元素，不会判断外层是否有v-once指令。
2. 即使外层用v-once确保内容只渲染一次，Vue的v-for设计逻辑里，key是用来标识循环节点唯一性的核心属性——规则的初衷是强制开发者养成给v-for加key的习惯，避免后续如果移除v-once后出现渲染问题。

处理方案：

• 方案一：添加key（推荐）：因为hour是0到24的唯一值，直接用它作为key即可：

  <div v-once>
    <div v-for="hour in [...Array(25)].map((_, i) => i)" :key="hour">{{ `0${hour}:00`.slice(-5) }}</div>
  </div>
  

• 方案二：忽略该规则：如果确定不需要key，可以添加eslint注释忽略当前行的检查：

  <div v-once>
    <div v-for="hour in [...Array(25)].map((_, i) => i)" <!-- eslint-disable-line vue/require-v-for-key --> >{{ `0${hour}:00`.slice(-5) }}</div>
  </div>
  

内容的提问来源于stack exchange，提问作者tsh