javascript - Vue3 onload 方法不执行的原因及解决方案？

Question

vue3不执行onload方法
下面是我的测试代码，mounted和nextTick总是前后脚一起打印出来，但onload不执行
我的需求是弄一个loading，所以需要监听页面是否完全加载完成关闭loading

window.onload = () => {  console.log('loaded')}onMounted(() => {  console.log('mounted')  nextTick(() => {    console.log('nextTick');  })})

会出现背景图还没渲染完成的情况

Answer 1

因为 window.onload 在很早之前就执行好了，并不是不执行……你可以在 index.html 中直接加上这个 onload 的事件处理打印出来看看。它会在你的入口 文件执行之前在控制台输出。

---

另外就是你得了解一下Vue的生命周期函数的执行。

• Vue3生命周期 - SegmentFault 思否

如果在 mounted 之后没有数据更新，你的两个 log 就是差不多同时输出的。

---

所以如果你想要在页面全部加载完毕关闭loading，得看你的加载完成是指是什么了。
是Vue初始化完成，还是当前页面组件渲染完毕，还是异步数据请求回来之后子组件也都渲染完毕了。

Answer 2

mounted()钩子函数会在页面和组件加载完成后执行，而$nextTick()方法可以确保在页面和组件数据更新完成后再执行下一步操作。因此，结合使用这两个方法可以监控到页面和组件中的所有数据是否全部加载完成。例如，在mounted()钩子函数中使用$nextTick()方法可以确保页面数据更新完毕后再执行下一步操作。

onBeforeMount(() => {  loading.value = true})onMounted(async () => {  await nextTick()  loading.value = false})

Answer 3

你onload只有写在入口main.js内才有效。否则其他控件内都已经在onload之后了。所以在组件内是不会触发onload事件的。在vue组件中只能使用$nextTick来确保组件挂载完毕之后执行。

Answer 4

Vue3 中不再支持 window.onload，这是因为 Vue3 使用了新的生命周期钩子函数，如 onMounted，onUpdated，onUnmounted 等，来替代了 Vue2 中的 mounted，updated，destroyed 以及全局的 window.onload，window.onbeforeunload 等。

在你的代码中，window.onload 没有执行，可能是因为 Vue3 已经接管了应用的生命周期，并且不再触发全局的 window.onload 事件。

对于你的需求，你可以在 Vue3 的 onMounted 生命周期钩子函数中关闭 loading。因为 onMounted 会在实例被挂载到 DOM 后调用，这时你可以认为页面已经完全加载完成。nextTick 在这里不是必需的，因为 onMounted 已经确保了在 DOM 更新后执行。

以下是一个示例：

import { ref, onMounted } from 'vue'export default {  setup() {    const isLoading = ref(true) // 初始化一个响应式变量来控制 loading 的显示和隐藏    onMounted(() => {      console.log('mounted')      isLoading.value = false // 在组件挂载后关闭 loading    })    return {      isLoading // 返回 isLoading 变量，以便在模板中使用    }  }}

在模板中，你可以根据 isLoading 的值来决定是否显示 loading：

<template>  <div v-if="isLoading">Loading...</div>  <!-- 其他内容 --></template>

这样，当组件挂载后，loading 就会自动关闭。