Vue3切换视频源后<video>元素未被垃圾回收的问题解决

我正在开发一个使用原生<video>标签播放视频的Vue3组件，会根据videoName prop动态切换视频源，需要避免内存泄漏。尽管已执行暂停视频、移除src属性、清空子元素、调用load()、从DOM移除元素等清理操作，切换视频后在Chrome DevTools内存面板仍能看到大量分离的<video>节点。

监听器简化代码： #

videoName: {
  handler(newVideoId) {
    const el = this.$refs.videoPlayer;

    if (el) {
      el.pause();
      el.removeAttribute('src');
      el.innerHTML = '';
      el.load();
      el.parentNode?.removeChild(el);
      this.$refs.videoPlayer = null;
    }

    const newVideoObj = this.getVideo(newVideoId);
    this.videoObj = newVideoObj;
    this.videoKey++; // used to force re-render
  },
  immediate: true
}

模板代码： #

<video
  v-if="videoName"
  :key="videoKey"
  ref="videoPlayer"
  autoplay
  preload="auto"
>
  <source :src="baseFileUrl + src" type="video/mp4" />
</video>

已尝试：使用动态:key强制Vue重新渲染<video>、手动清理并移除DOM元素、避免持有$refs的计算属性。

请问在Vue3中切换视频源时，如何确保<video>元素被正确垃圾回收？是否存在Vue或浏览器持有的引用阻碍了GC？

1. 停止手动DOM操作，让Vue接管元素销毁 #

你的当前代码里手动调用el.parentNode?.removeChild(el)，但Vue通过v-if和:key已经在负责DOM元素的销毁逻辑，手动移除会导致Vue内部的元素引用无法被正确清理，反而留下孤儿节点。直接删掉这行代码，让Vue自己处理DOM的移除流程。

修正后的清理逻辑：

videoName: {
  handler(newVideoId) {
    const el = this.$refs.videoPlayer;

    if (el) {
      el.pause();
      // 直接设置src为空字符串，比removeAttribute更彻底切断资源链接
      el.src = '';
      // 循环清空所有子元素（包括source标签）
      while (el.firstChild) {
        el.removeChild(el.firstChild);
      }
      el.load();
      // 不要手动修改this.$refs.videoPlayer，Vue会自动更新ref指向
    }

    const newVideoObj = this.getVideo(newVideoId);
    this.videoObj = newVideoObj;
    this.videoKey++;
  },
  immediate: true
}

2. 务必移除所有自定义事件监听器 #

很多时候内存泄漏的根源是绑定在video元素上的自定义事件没有被移除——浏览器会因为事件监听器持有元素引用，导致GC无法回收。

比如如果你的组件给video绑定了timeupdate、ended、error等事件，一定要在清理时手动移除：

// 示例：假设组件内绑定了事件
const handleTimeUpdate = (e) => { /* 业务逻辑 */ };
el.addEventListener('timeupdate', handleTimeUpdate);

// 清理阶段必须移除
if (el) {
  el.removeEventListener('timeupdate', handleTimeUpdate);
}

3. 不要干扰Vue对ref的管理 #

手动赋值this.$refs.videoPlayer = null会打乱Vue的ref管理机制，Vue在组件更新时会自动更新ref的指向，手动修改可能导致旧元素的引用被意外保留，直接去掉这行代码即可。

4. 处理浏览器内部的隐藏引用 #

部分浏览器在video加载媒体后，会保留解码器、缓存数据等内部引用，可在清理时补充以下操作：

• 临时关闭autoplay和preload：el.autoplay = false; el.preload = 'none'
• 在Chrome DevTools内存面板手动触发垃圾回收（点击垃圾桶图标），确认是延迟回收还是真的内存泄漏

5. 排查外部引用 #

检查组件内是否有全局变量、第三方库、自定义存储对象等持有video元素的引用，这些外部引用会直接阻止GC回收元素。

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