Javascript 移动阵列项目时，嵌入的Youtube视频将在组件内部重新加载，并使用v-for进行渲染

背景：

我正在开发基于Vue的项目内容编辑器页面，用户可以在其中插入不同类型的块，如文本块、图像块、视频块，从而形成一个完整的页面

我的解决方案是使用块数组，我只需使用v-for进行渲染，效果非常好

有时，我的用户需要对块重新排序，所以我有两个按钮，可以上下移动块。除了视频块，它也可以正常工作

此视频块包括嵌入YouTube的iframe

问题是：

每次我向下移动视频块-靠近阵列的末端-视频重新加载。如果向上移动，它将保持播放状态，而不会重新加载

基本上，我在其中一个块中通过v-for和YouTube视频渲染数组：

<div v-for="item in items" v-bind:key="item" class="block">

为了说明这个问题，我准备了这个

复制问题的步骤：

在2号区块内运行视频 向上移动它，您将看到它仍在播放 向下移动它，它将被重新加载 当块向下移动时，Vue似乎重新创建了这段DOM

尝试过的解决方案：

我认为这是因为我过去常常嵌入视频，但没有——即使我直接嵌入iframe，问题仍然存在

我还尝试在没有动画的情况下渲染我的块列表，但这也没有帮助

我尝试重新编写我用来在数组中重新排序项目的方法，我在演示中实际上有两个版本，但两个版本的工作方式相同

---

所以我不知道为什么会发生这种情况，也许有人可以给我一个建议或解释引擎盖下发生了什么？

这不一定是Vue问题

即使使用key来保留iframe元素，当Vue在DOM中移动它时，它也会重新加载

---

尝试使用CSS flexbox命令移动项目：。

是否可以使键类似于item.id而不是item对象？为什么只有在块向下移动时才会发生？这取决于渲染后修补DOM时Vue如何移动DOM元素。也许当你向下移动块时，Vue会向下移动元素，但当你向上移动块时，这与你向下移动上一个块一样，所以块实际上不会被Vue移动，它只是在DOM中向上移动，因为上一个元素被向下移动。看起来你是对的。我用两个视频更新了演示，并进行了测试——它的行为和您解释的一模一样。非常感谢。