vue中v-if影响同级audio标签播放？

Question

问题描述

vue环境中，audio标签自动播放的情况下，更改同级的div标签v-if条件为非，会导致当前音频暂停。

如果将v-if替换为v-show则没有此问题

以下是部分代码

  <audio class="basic-audio" :src="audio" autoplay="autoplay" @ended="ended"></audio>

  <div class="content-region" v-if="chooseCard">
      <el-row type="flex" v-for="(item,index) in contentList" :key="index" >
          <el-col class="content-lattice"   v-for="(item,index1) in item"  :key="index1">{{item.name}}</el-col>
      </el-row>
  </div>

注：audio未添加播放、暂停事件

Answer 1

可以了解一下vue中diff算法相关的实现。比如这篇文章。

这种情况应该会出现于audio前后（不仅限于相邻）的兄弟节点中都存在v-if的情况。

因为vue中diff是基于同层级比较的，并且updateChildren方法中的VNode比较是从节点左右两侧向中间靠拢的，所以当audio前后都存在v-if时，virtual dom重新渲染时，会将audio这个dom进行移动，所以实际上audio是会被从父节点移除然后再重新加入（可以通过给audio绑定DOMNodeRemoved来验证）。

由于audio被移除过，所以播放会被停止。至于v-show没有此问题，是因为v-show前后dom结构未发生改变。