vue3 博客dom更新的小问题!

62 阅读1分钟

引发问题的原因!

没有工作的2023年每天都在家里玩,无所事事所以没事就写写自己的博客(没有上线:因为不会后端,哈哈)。
看到某个网站的header有一个小的音乐播放器我挺喜欢,然后就在自己的博客header上也高了一个,本来以为很简单,谁知道我写了几百行(不是纯js)然后也遇到很多问题,因为没写过文章所以准备拿这个"问题"练练手,下面是问题--

具体场景是: 有一个音乐的切歌场景,在template里写了一个"audio" ,因为当自然播放到结束的时候会切歌/手动切歌,当src改变然后audio.play()但还是上一首歌,但是html里的src确实是改变了但是歌没变,那就想到dom刷新这个问题了尝试了vue2的$forceupdate但是没有,也想过v-if但是根据程序来说这样太复杂,所以最后就选用了key具体,原理我忘了(野路子)但是知道怎么解决,然后就有了:key="audioKey"在配合nextTick()就解决了。

audio代码 image.png 播放器效果 image.png

配合nextTick image.png

第一次写文章,算是一种尝试吧!