Does v-if in vue affect peer audio tag playback?

problem description

In the

vue environment, when the audio tag plays automatically, changing the v-if condition of the div tag at the same level to no will cause the current audio to be paused.

there is no problem if you replace v-if with v-show

the following is part of the code

  <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>

Note: no playback or pause events have been added to audio

Javascript front-end vue.js audio

Feb.08,2022

you can learn about the implementation of the diff algorithm in vue . For example, the article .

this should occur when v-if exists in all sibling nodes before and after v-if (not just adjacent ones).

because diff in vue is based on the same level comparison, and the VNode comparison in the updateChildren method moves from the left and right sides of the node to the middle, when v-if exists before and after audio , virtual dom renders the audio dom . So in fact, audio is removed from the parent node and then rejoined (this can be verified by binding audio to DOMNodeRemoved ).

playback is stopped because audio has been removed. As for v-show , there is no such problem because the structure of dom has not changed before and after v-show .

Previous: Webpack output publicPath

Next: WeChat Mini Programs, how to modify the data of properties