Vue中DOM异步更新的解决方案——$nextTick

Vue异步更新DOM：$nextTick解决音频播放问题

最新推荐文章于 2025-09-10 14:45:00 发布

原创

最新推荐文章于 2025-09-10 14:45:00 发布 · 1.2k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue #nextTick

本文介绍了在Vue中遇到DOM异步更新导致的音频播放错误，详细解释了audio.play()与VueDOM更新的同步性差异，并提出通过$nextTick解决此类问题，确保DOM更新后再执行音频播放操作。

html:

<body>
<div id="app">
    <audio ref="audio" :src="url" controls></audio>
    <span>第 {
  
  {index}} 首歌</span>
    <button @click="changeUrl">切歌</button>
</div>
</body>

js:

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    const musicList = [
        'http://aqqmusic.tc.qq.com/amobile.music.tc.qq.com/C4000013WPvt4fQH2b.m4a?guid=7543705016&vkey=870D49ACC6A725B134C7E6053AA8EAA7C85CDC8F46763C01A377BDD2C833329CC9849424A49D905DCA5F6707B5A4FE8B79A0727DC3AB275F&uin=&fromtag=38',
        'http://aqqmusic.tc.qq.com/amobile.music.tc.qq.com/C400003mBrF72dILfK.m4a?guid=7543705016&vkey=6C977963F96F1D904AD8C5507BC4C5251B6CCAB12AED45AE7CC3B14EBC397583E860EC0747F43D5AA58A6EEF5E26C3E363DC2B813DB1223C&uin=&fromtag=38',
        'http: