Vue 页面加载核心方法详解：告别 onload 误区，一文吃透生命周期钩子

在刚接触 Vue 开发时，很多小伙伴会习惯性沿用原生 JS 的 window.onload 思路，想找 Vue 里的「页面加载完成方法」，结果发现 Vue 根本没有 onload 这个专属方法！

这篇博文就带大家彻底理清：Vue 页面 / 组件加载的核心生命周期钩子、onload 的正确替代方案、不同场景该用哪个方法，从 Vue2 到 Vue3 全覆盖，新手也能秒懂。

一、核心误区：Vue 中没有 onload 方法！

原生 JavaScript 中，window.onload 表示整个页面（包含图片、样式、脚本等所有资源）加载完成后执行。

但 Vue 是组件化框架，它用生命周期钩子替代了原生的加载事件，专门管理「组件创建、挂载、更新、销毁」的全过程。

我们常说的「Vue 页面加载」，本质是Vue 组件的挂载流程。

二、Vue2 选项式 API：页面加载的核心钩子

Vue2 中，页面本质就是一个根组件，加载逻辑写在 export default 内，最常用的加载钩子集中在「挂载阶段」：

1. 四大核心加载钩子（按执行顺序）

表格

2. 最常用：mounted（替代 onload 的核心方法）

这是 Vue 中最接近原生 onload 的钩子，页面 DOM 结构渲染完成后立即执行，也是我们处理页面加载逻辑的首选。

代码示例：Vue2 页面加载基础用法

vue

<template>
  <div class="home-page">
    <h1 id="title">Vue页面加载示例</h1>
  </div>
</template>

<script>
export default {
  name: 'HomePage',
  // 1. 数据初始化（请求接口、赋值变量）
  created() {
    console.log('数据初始化完成，开始请求接口');
    this.getList();
  },

  // 2. DOM渲染完成（操作DOM、初始化插件）
  mounted() {
    console.log('页面DOM加载完成！');
    // 直接操作DOM（created中会报错）
    document.getElementById('title').style.color = '#42b983';
  },

  methods: {
    async getList() {
      // 模拟接口请求
      console.log('获取页面数据成功');
    }
  }
}
</script>

三、Vue3 组合式 API：现代化加载写法

Vue3 推荐使用 <script setup> 语法，加载钩子需要从 vue 中导入，用法更简洁：

核心加载钩子：onMounted

直接对应 Vue2 的 mounted，是 Vue3 页面加载的唯一首选。

代码示例：Vue3 页面加载用法

vue

<template>
  <div ref="titleRef">Vue3 页面加载示例</div>
</template>

<script setup>
// 1. 导入生命周期钩子
import { onMounted, ref, onCreated } from 'vue';

// 定义DOM引用（替代document.getElementById）
const titleRef = ref(null);

// 数据初始化（替代created）
onCreated(() => {
  console.log('Vue3：数据初始化，请求接口');
});

// 2. 页面DOM加载完成（核心！替代onload）
onMounted(() => {
  console.log('Vue3：页面DOM渲染完成');
  // 操作DOM（Vue3推荐用ref，不直接用document）
  titleRef.value.style.color = '#42b983';
});
</script>

四、关键区分：created 和 mounted 怎么选？

90% 的新手都会混淆这两个钩子，直接看场景选择：

1. 只需要请求数据、初始化变量 → 用 created / onCreated（执行更早，能更快拿到数据，提升页面体验）
2. 需要操作 DOM、初始化图表 (ECharts)、调用地图 SDK、获取元素宽高 → 必须用 mounted / onMounted（只有这个钩子能拿到真实 DOM，其他钩子操作 DOM 会报错）

五、原生 window.onload 还能用吗？

答案：能用，但不推荐！

1. window.onload 执行时机

等待整个网页所有资源（图片、视频、字体、样式表）全部加载完成才执行，比 Vue 的 mounted 晚很多。

2. 适用场景

只有需要等待图片 / 媒体资源加载完成时才用（比如计算图片高度）：

javascript

运行

// Vue3 中使用原生onload
onMounted(() => {
  window.onload = () => {
    console.log('页面所有资源（含图片）加载完成');
  };
});

3. Vue 钩子 vs 原生 onload

表格

六、路由页面加载：页面切换也能触发

如果是 Vue Router 路由页面，mounted/onMounted 会在每次路由切换到该页面时执行，完美满足「进入页面就加载数据」的需求。

七、新手必看：3 个常见坑

1. 在 created 中操作 DOM报错：Cannot read property 'style' of null → 换成 mounted 即可。
2. 重复写 window.onload原生 onload 只能写一个，会被覆盖，优先用 Vue 生命周期。
3. Vue3 忘记导入钩子onMounted 必须从 vue 导入，直接写会报错。

总结

1. Vue 没有 onload 方法，mounted (Vue2) / onMounted (Vue3) 是页面加载的核心替代方案；
2. 数据初始化用 created，操作 DOM 必须用 mounted；
3. 原生 window.onload 仅用于等待图片等资源，日常开发不用；
4. 路由页面切换时，加载钩子会自动重新执行。

以后写 Vue 页面加载逻辑，直接用 mounted/onMounted，再也不用纠结 onload 啦！