JavaScript页面加载完成后执行方法：window.onload、$(document).ready()、Vue.created()

pan_junbiao

已于 2025-03-31 20:53:05 修改

阅读量1.7k

点赞数 2

分类专栏： JavaScript JQuery 我の原创文章标签： vue.js 前端 javascript

于 2024-08-15 11:39:27 首次发布

本文链接：https://blog.csdn.net/pan_junbiao/article/details/141215774

版权

我の原创同时被 3 个专栏收录

598 篇文章

订阅专栏

JavaScript

41 篇文章

订阅专栏

JQuery

19 篇文章

订阅专栏

关于 Window对象和 Document 对象的详细使用，系列文章：

《Window对象的常用属性和方法》

《Document对象的常用属性和方法：getElementById()、getElementsByName()、createElement()方法》

《Document获取元素并修改内容：getElementById()方法、value属性、innerHTML属性、innerText属性》

《Document自定义属性：getAttribute()、setAttribute()、removeAttribute()函数》

《Document动态添加与删除HTML节点：createElement()、appendChild()、removeChild()函数》

《JavaScript操作表单元素：文本框、单选按钮、下拉列表、复选框》

《JavaScript实现下拉框动态绑定与级联功能》

《JavaScript页面加载完成后执行方法：window.onload、$(document).ready()、Vue.created()》

《JavaScript弹出框的使用：对话框、确认框、提示框、弹窗操作》

1、JavaScript 的 window.onload 方法

window.onload 方法是在页面所有元素（包括图片、样式、链接等）加载完成后触发的，在这个事件之前，页面上的所有资源都必须加载完成。因此，如果页面中包含大量的图片或其他资源，那么 window.onload 事件可能比较晚触发，可能需要等待几秒钟或更长时间才会被触发。这意味着在使用 window.onload 时需要等待所有的资源加载完成后才能执行相应的 JavaScript 代码，可能会影响用户体验。

使用方式一：将 onload 事件写在 <body> 标签中。

<body onload="myFun()">
</body>

<script type="text/javascript">
    function myFun() {
        document.write("<h3>您好，欢迎访问 pan_junbiao的博客</h3>");
        document.write("<h3>https://blog.csdn.net/pan_junbiao</h3>");
    }
</script>

使用方式二：将 window.onload 写在 <script> 标签中。

<script type="text/javascript">
    window.onload = function () {
        myFun();
    }

    function myFun() {
        document.write("<h3>您好，欢迎访问 pan_junbiao的博客</h3>");
        document.write("<h3>https://blog.csdn.net/pan_junbiao</h3>");
    }
</script>

执行结果：

2、JQuery 框架的 $(document).ready()

JQuery 框架的 $(document).ready() 方法和 window.onload 方法有相似的功能，但是在执行时机方面时有区别的。window.onload 方法是在页面中所有元素（包括元素的所有关联文件）完全加载到浏览器后才执行，即 JavaScript 此时才可以访问页面中的任何元素。而通过 JQuery 中的 $(document).ready() 方法注册的事件处理程序，在 DOM 完全就绪时就可以被调用。此时，页面的所有元素对 JQuery 而言都是可以访问的，但是，这并不意味着这些元素关联的文件都已经下载完毕。

<!-- 引用 jquery 包 -->
<script src="../js/jquery-3.4.1.min.js"></script>

<script type="text/javascript">
    $(document).ready(function () {
        //执行方法
    });
</script>

3、Vue 2.0 框架的 created() 钩子函数

Vue 框架为每个应用程序实例在创建时都有一系列的初始化步骤，例如：创建数据绑定、编译模板、将实例挂载到 DOM 并在数据变化时触发 DOM 更新、销毁实例等。在这个过程中会运行一些叫作生命周期钩子的函数，通过这些钩子函数可以定义业务逻辑。

关于 Vue 生命周期钩子的详情，请点击并浏览本博客的文章：《Vue3.0生命周期钩子（包含：Vue 2.0 和 Vue 3.0）》

Vue.created() 钩子函数是在实例创建之后进行调用，此时尚未开始 DOM 编译。在需要初始化处理一些数据时会比较有用。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue 框架的 created() 钩子函数</title>
</head>

<body>
    <div id="app">
        <h3>{{title}}</h3>
        <p>{{blogInfo}}</p>
        <p>{{blogUrl}}</p>
    </div>
</body>
<!-- 引用 Vue 框架 -->
<script src="../js/vue.global.js"></script>

<!-- 使用 Vue.createApp 函数创建一个应用程序实例-->
<script type="text/javascript">
    const vueApp = Vue.createApp({
        data() {
            return {
                title: '',
                blogInfo: '',
                blogUrl: ''
            }
        },
        // 使用 created 生命周期的钩子函数，初始化页面信息
        created: function () {
            this.title = "使用 Vue 框架的 created() 钩子函数初始化页面数据：";
            this.blogInfo = "您好，欢迎访问 pan_junbiao的博客";
            this.blogUrl = "https://blog.csdn.net/pan_junbiao";
        }
        //装载应用程序实例的根组件
    }).mount('#app');
</script>

</html>

执行结果：

4、Vue 3.0 框架的 onMounted 钩子函数

Vue3.0 是兼容 Vue2.x 版本的也就是说我们再日常工作中可以在 Vue3 中使用 Vue2.x 的相关语法。

Vue 3.0 带来了许多新特性和改进，其中包括更强大的组合 API。与基于选项的 API 相比，组合 API 中的生命周期钩子函数也发生了变化，将选项中的生命周期钩子函数改成了 onXxx() 函数的形式。

需要注意：

1、beforeCreate() 和 created() 两个钩子函数已被删除了，取而代之的是 setup() 函数。

2、组合 API 中的生命周期钩子函数都是在 setup() 函数内部通过引入相应的函数来使用的。

onMounted() 钩子函数：组件挂载完成后执行的函数。

【示例】使用 Vue 3.0 框架的 onMounted 钩子函数，初始化数据。

（1）创建 MyComponent.vue 组件，并使用 onMounted 钩子函数初始化数据。

<template>
    <h3>Vue3.0基于组件式开发</h3>
    <p>用户名称：{{ userInfo.userName }}</p>
    <p>博客信息：{{ userInfo.blogName }}</p>
    <p>博客地址：{{ userInfo.blogUrl }}</p>
</template>

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

//用户信息
let userInfo = ref({});

// 挂载时的操作
onMounted(() => {
    //初始化用户信息
    initUserInfo();
});

//初始化用户信息
function initUserInfo() {
    userInfo.value = {
        userName: "pan_junbiao的博客",
        blogName: "您好，欢迎访问 pan_junbiao的博客",
        blogUrl: "https://blog.csdn.net/pan_junbiao",
    };
}
</script>

（2）在 App.vue 根组件中，引入组件

<template>
  <!-- 2、使用组件 -->
  <MyComponent></MyComponent>
</template>

<script setup>
// 1、导入组件，使用 <script setup> 语法糖，导入的组件将会自动执行注册
import MyComponent from '@/views/MyComponent.vue';

</script>

执行结果：