Nuxt3布局中load事件失效求助：Nuxt2迁移后无法触发load事件

在Nuxt3的layouts/default.vue里直接绑定window.load事件失效，核心原因是布局组件的setup代码执行时机晚于页面load事件的触发时机——Nuxt3的客户端渲染/ hydrate 流程中，布局初始化时页面资源往往已经加载完成，此时再绑定load事件自然不会被触发。而scroll、resize这类可重复触发的事件，后续绑定后仍能正常响应，所以不存在这个问题。

下面是两种可行的解决方法：

方法一：结合onMounted和readyState检查 #

借助Nuxt的客户端生命周期钩子onMounted，在DOM挂载后判断页面是否已加载完成，直接执行逻辑；若未完成则绑定load事件：

<script setup>
onMounted(() => {
  // 页面已加载完成，直接执行操作
  if (document.readyState === 'complete') {
    alert('hello');
  } else {
    const handleLoad = () => {
      alert('hello');
      // 执行完毕移除监听，避免内存泄漏
      window.removeEventListener('load', handleLoad);
    };
    window.addEventListener('load', handleLoad);
  }
});
</script>

方法二：使用Nuxt内置的useWindowEvent组合式函数 #

Nuxt3提供了useWindowEvent简化窗口事件绑定，它会自动处理事件清理，同样结合readyState判断即可：

<script setup>
import { useWindowEvent } from '#app';

onMounted(() => {
  if (document.readyState === 'complete') {
    alert('hello');
  } else {
    useWindowEvent('load', () => {
      alert('hello');
    });
  }
});
</script>

如果你的需求仅需等待DOM结构加载完成（无需等待图片、样式等资源），可以改用DOMContentLoaded事件，它的触发时机更早，也能避免错过事件的问题：

<script setup>
onMounted(() => {
  if (document.readyState === 'interactive' || document.readyState === 'complete') {
    alert('DOM ready');
  } else {
    const handleDOMReady = () => {
      alert('DOM ready');
      document.removeEventListener('DOMContentLoaded', handleDOMReady);
    };
    document.addEventListener('DOMContentLoaded', handleDOMReady);
  }
});
</script>

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