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

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 框架的 created() 钩子函数

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

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>

执行结果：