Vue2：DOM元素不可见时$refs为空，视频播放功能遇阻

架构老林

2026-5-21

解决Vue2中$refs为空的问题

看起来你遇到的问题是在AJAX回调里访问vm.$refs时得到空对象，我来帮你分析几个可能的原因和对应的解决办法：

1. 确保AJAX请求在组件挂载后执行

Vue的$refs是在组件mounted钩子之后才会被赋值的，如果你在组件还没挂载完成就发起了AJAX请求，回调执行时DOM可能还没渲染好，$refs自然是空的。

解决办法：把AJAX请求放在mounted钩子里面，保证DOM已经完成挂载：

mounted() {
  const vm = this;
  $.post({ /* 你的请求配置 */ })
    .done(function(response) {
      const json = JSON.parse(response);
      console.log(vm.$refs); // 现在应该能拿到wave元素了
      // 别忘了把获取到的URL赋值给audio.wave
      vm.audio.wave = json.wave;
    });
}

2. 检查video元素是否被Vue渲染了

如果你的audio.wave初始值是空字符串/undefined，Vue可能不会渲染这个video标签（或者渲染了但因为src无效被浏览器隐藏），这时候$refs.wave自然不存在。

可以做两个检查：

打开浏览器开发者工具的Elements面板，看看页面上有没有<video id="wave">这个元素
在mounted钩子直接打印this.$refs，确认如果没有AJAX的干扰，refs是否正常

如果是初始值的问题，可以给audio对象设置一个合理的初始值：

data() {
  return {
    audio: {
      wave: '' // 或者一个无效的占位URL，确保video标签被渲染
    }
  }
}

3. 用$nextTick确保DOM更新完成

有时候即使在mounted里执行，AJAX回调可能因为请求太快，Vue还没完成refs的绑定（虽然这种情况很少见），这时候可以用this.$nextTick()包裹回调里的代码：

$.post({ /* 你的请求配置 */ })
  .done(function(response) {
    const json = JSON.parse(response);
    vm.$nextTick(() => {
      console.log(vm.$refs); // 确保DOM已经更新完成
      vm.audio.wave = json.wave;
    });
  });