VueJS中ref绑定的audio元素为何时而为NULL时而正常？

你的问题核心原因是audio元素被动态渲染逻辑（如条件渲染）控制，导致元素反复销毁重建，进而出现ref值在null和实例之间切换的情况，具体分析及解决方法如下：

核心原因 #

1. 条件渲染触发DOM重建
   如果audio元素或其父节点带有v-if、v-for（循环项变化）等动态渲染逻辑——比如你可能写了v-if="audioUrl"——当audioUrl异步加载时，初始阶段audioUrl为空，元素不会被渲染，此时onMounted钩子执行时ref自然为null；当audioUrl加载完成后，元素才被挂载，ref会被赋值为实例。但如果后续audioUrl发生变化（比如重新请求音频地址），元素会被销毁再重新创建，这时候ref会先变为null，待新元素挂载后又重新赋值为实例，就会出现你看到的“时而为实例时而为null”的现象。

2. 媒体元素的浏览器特殊处理（次要因素）
   audio作为媒体元素，浏览器对其初始化、加载有独立的处理流程，可能存在Vue的DOM更新队列与媒体元素就绪时机不同步的情况，但这只会导致onMounted或nextTick中暂时拿不到实例，不会出现ref反复切换的情况，所以不是核心原因。

解决方法 #

• 排查并调整动态渲染逻辑
  检查audio元素及父节点的渲染条件，比如如果是v-if="audioUrl"，可以改成v-show="audioUrl"（v-show不会销毁元素，只是隐藏），这样元素只会被挂载一次，ref不会反复重置。

• 监听音频地址变化，延迟获取ref
  通过watch监听audioUrl的变化，在地址更新完成后，用nextTick确保DOM已经渲染完成，再获取ref：

  import { ref, watch, nextTick } from 'vue'
  
  const audioUrl = ref('')
  const audioPlayer = ref<HTMLAudioElement|null>(null)
  
  watch(audioUrl, async () => {
    if (audioUrl.value) {
      await nextTick()
      // 此时可以安全访问audioPlayer.value
      console.log(audioPlayer.value)
    }
  })
  

• 直接监听audio元素的原生事件
  放弃依赖ref的挂载时机，直接给audio元素绑定loadedmetadata或canplay事件，在事件回调中处理元素：

  <audio
    ref="audioPlayer"
    controls
    controlsList="nodownload"
    preload="metadata"
    @loadedmetadata="handleAudioReady"
  >
    <source :src="audioUrl" />
  </audio>
  

  const handleAudioReady = (e) => {
    const audioElement = e.target
    // 直接使用事件目标获取audio元素实例
    console.log(audioElement)
  }
  

• 修正ref的类型声明
  你的ref类型声明用了HTMLElement，更准确的应该是HTMLAudioElement，这样能获得更精准的类型提示：

  const audioPlayer = ref<HTMLAudioElement|null>(null)
  

内容的提问来源于stack exchange，提问作者itinance