0

问题描述

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未添加播放、暂停事件
2018-12-11 提问
1 个回答
6

已采纳

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

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

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

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

撰写答案

推广链接