Vue3中onMounted内window的load事件失效，如何解决？

核心原因 #

当onMounted钩子执行时，window的load事件可能已经触发完毕，导致后续添加的监听器无法捕获到该事件。Vue3的onMounted仅保证当前组件的DOM挂载完成，而window.load是等待所有资源（图片、样式、脚本等）加载完成才触发，这个时机可能早于组件挂载完成的时间。

解决方案 #

1. 检查加载状态，兼容已完成的场景 #

先判断页面是否已经加载完成，避免错过事件触发时机：

<script setup>
import { onMounted } from 'vue';

onMounted(() => {
  const handleLoad = () => {
    alert("Window Loaded");
    // 移除监听避免内存泄漏
    window.removeEventListener('load', handleLoad);
  };

  if (document.readyState === 'complete') {
    handleLoad();
  } else {
    window.addEventListener('load', handleLoad);
  }
})
</script>

2. 全局提前监听（多组件共用场景） #

如果多个组件都需要监听window.load，建议在应用初始化阶段就添加监听，确保不会错过事件：

// main.js
import { createApp } from 'vue';
import App from './App.vue';

const handleWindowLoad = () => {
  alert("Window Loaded");
  // 可将加载状态挂载到全局，供组件判断
  app.config.globalProperties.$isWindowLoaded = true;
};

// 先判断当前状态
if (document.readyState === 'complete') {
  handleWindowLoad();
} else {
  window.addEventListener('load', handleWindowLoad);
}

const app = createApp(App);
app.mount('#app');

后续组件可通过$isWindowLoaded判断加载状态，直接复用全局逻辑。

3. 用生命周期钩子替代（无需等资源加载场景） #

如果你的逻辑仅需要DOM挂载完成即可执行，不需要等待所有资源加载，直接在onMounted中执行逻辑即可：

<script setup>
import { onMounted } from 'vue';

onMounted(() => {
  alert("DOM Mounted");
});
</script>

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