:key 可以在 VUE 中不使用 v-for 吗？答案

【问题标题】：Can :key be used without v-for in VUE?:key 可以在 VUE 中不使用 v-for 吗？
【发布时间】：2019-05-10 06:09:12
【问题描述】：

我使用 VUE 为滑块（图像列表）设置动画。有两/三张幻灯片，每张幻灯片最多包含 9 张图像。我有一个计算属性slide，它返回当前的图像集。还有另一个属性start 代表当前幻灯片的第一张图像的编号。 <ul> 元素是<transition> 的直接后代，因此动画仅在<ul> 的键更改时发生。第一个 sn-p 是我想解决的问题。它正在工作，但如果可以在没有 v-for 循环的元素上使用 :key 属性，我找不到任何信息。

到目前为止，问题是如何解决的？有两个 v-for 循环。 Slide 计算属性返回 [slide] 并人为地循环遍历单元素表。我看到的问题是 v-for 循环将整个对象作为 :key ，这不是文档推荐的。第二个 sn-p 是代码现在的样子。

        <transition>
            <ul :key="this.start">
                <li v-for="image in slide" :key="image.id">
                    <a>
                        <img />
                    </a>
                </li>
            </ul>
        </transition>
        <!--CURRENTLY-->
        <transition>
            <ul v-for="slide in slides" :key="slide">
                <li v-for="image in slide" :key="image">
                    <a>
                        <img />
                    </a>
                </li>
            </ul>
        </transition>

【问题讨论】：

好像是的vuejs.org/v2/api/#key
如果您将问题描述为您想要实现的目标和面临的问题，会更好地理解您的问题。
@VaibhavSingh Singh 它是一个滑块组件，它需要大约 18 个图像，将其分成多个部分（取决于可在一张幻灯片上显示的插槽数量）并以动画幻灯片的形式显示。例如 9 张图片（第一张幻灯片）=> 动画 => 9 张图片（第二张幻灯片）=> 动画 => 9 张图片（第一张幻灯片）等等。 CbaConnier 的帖子似乎回答了这个问题。我不知道为什么我没有在文档中注意到它。请将其发布为答案。

标签： javascript vue.js transition

【解决方案1】：

既然你让我发表我的评论作为答案，我将简单地引用文档：https://vuejs.org/v2/api/#key

它也可以用来强制替换元素/组件而不是重用它。当您想要：

正确触发组件的生命周期挂钩

触发转换

例如：
<transition>
  <span :key="text">{{ text }}</span>
</transition>
当text 更改时，<span> 将始终被替换而不是修补，因此将触发转换。

【讨论】：