Vue3中组件卸载后@load事件是否会触发？如何彻底阻止？

核心问题解答 #

组件卸载后，<img>的@load事件确实可能触发。原因是图片加载属于浏览器层面的异步操作：如果组件已被Vue卸载（对应DOM节点已移除），但图片的网络请求仍在进行，那么请求完成后浏览器依然会尝试触发load事件——只要事件在组件卸载前已经绑定，回调函数就可能执行，进而引发后续的DOM不存在报错。

具体解决方案 #

针对你的Vue3项目场景，以下是几种可靠的处理方式：

1. 用组件状态标记控制回调执行 #

在组件中添加一个状态标记，标记组件是否处于挂载状态，在load回调中先判断状态，再执行后续逻辑：

<script>
export default {
  data() {
    return {
      isComponentMounted: false,
      // 你的其他数据：imageId、imgSrc等
    }
  },
  mounted() {
    this.isComponentMounted = true
  },
  beforeUnmount() {
    this.isComponentMounted = false
    // 提前清理GSAP动画，避免残留执行
    const imgEl = document.getElementById(this.imageId)
    imgEl && gsap.killTweensOf(imgEl)
  },
  methods: {
    handleAfterLoad() {
      // 组件已卸载直接终止逻辑
      if (!this.isComponentMounted) return

      this.$nextTick(() => {
        const imgEl = document.getElementById(this.imageId)
        // 双重校验DOM是否存在
        if (!imgEl) return
        
        gsap.to(imgEl, {
          scale: 1,
          opacity: 1,
          delay: 0.2,
          duration: 0.5,
          onComplete: () => {
            this.isComponentMounted && this.handleAfterDisplay()
          }
        })
      })
    }
  }
}
</script>

2. 手动移除事件监听+中断图片加载 #

在组件卸载时，直接移除图片的load事件监听，并中断未完成的图片请求，从根源阻止load事件触发：

<script>
export default {
  data() {
    return {
      targetImg: null
    }
  },
  mounted() {
    this.targetImg = document.getElementById(this.imageId)
  },
  beforeUnmount() {
    if (this.targetImg) {
      // 移除load事件监听
      this.targetImg.removeEventListener('load', this.handleAfterLoad)
      // 中断图片加载，阻止后续load触发
      this.targetImg.src = ''
      // 清理GSAP动画
      gsap.killTweensOf(this.targetImg)
    }
  },
  methods: {
    handleAfterLoad() {
      // 你的原有逻辑
    }
  }
}
</script>

3. 用Vue ref替代ID选择DOM元素 #

避免使用ID选择器，改用Vue的ref直接引用图片元素，能更安全地判断元素是否存在，减少报错可能：

<template>
  <img class="the-image" ref="targetImage" :src="imgSrc" @load="handleAfterLoad">
</template>

<script>
export default {
  methods: {
    handleAfterLoad() {
      const imgEl = this.$refs.targetImage
      if (!imgEl) return

      this.$nextTick(() => {
        gsap.to(imgEl, {
          scale: 1,
          opacity: 1,
          delay: 0.2,
          duration: 0.5,
          onComplete: () => {
            this.$refs.targetImage && this.handleAfterDisplay()
          }
        })
      })
    }
  }
}
</script>

总结 #

组件卸载后img的load事件触发，本质是浏览器异步加载与Vue组件生命周期的时序差导致的。最稳妥的处理方式是结合组件状态标记+提前清理动画/事件，同时尽量使用Vue的ref操作DOM，避免依赖不稳定的ID选择器。

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