Vue 3中v-for循环使用v-once出现重复输出是Bug吗？

问题结论 #

这是Vue 3的官方已知Bug，并非你操作有误。

问题原因 #

v-once指令在v-for循环内使用时，缓存逻辑出现异常，会错误复用第一个循环项的渲染结果，导致后续所有循环项的v-once节点都读取了首个数组元素的属性值，所以出现两个div都展示test1的问题。

修复方案 #

你可以选择以下任意一种方式修复：

• 直接移除不需要的v-once指令，即可正常渲染对应内容
• 若确实需要使用v-once做渲染优化，将v-once移动到v-for所在的父节点上：

<script setup>
import { ref } from 'vue'

const testArray = ref([{
id:1,
string: 'test 1'
},{
id:2,
string: 'test 2'
}])
</script>

<template>
    <div v-for="obj in testArray" :key='obj.id' v-once>
        <span>{{obj.string}}</span>
  </div>
</template>

• 若需要保留内层节点的v-once，给v-once绑定和外层一致的唯一key，强制区分缓存节点：

<span v-once :key="obj.id">{{obj.string}}</span>

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