vue3页面生命周期onLoad和onReady的作用

1. 页面生命周期

1.1 概念

每个 Vue 组件实例在创建时都需要经历一系列的初始化步骤，比如设置好数据侦听，编译模板，挂载实例到 DOM，以及在数据改变时更新 DOM。在此过程中，它也会运行被称为生命周期钩子的函数，让开发者有机会在特定阶段运行自己的代码。

1.2 图例

下面是实例生命周期的图表。你现在并不需要完全理解图中的所有内容，但以后它将是一个有用的参考。

2. onLoad

2.1 onLoad的概念

onload事件时在网页或者图片完全加载完成后触发的，它适用于整个网页加载时

该方法就会执行一次，适合用于进行 页面初始化工作 和获取 一次性数据 。

在onload方法中可以通过this获取到页面实例，并且可以接受 页面跳转时传递的参数

2.2 onLoad加载

了解了以上概念后，可以进行以下操作

在这里导入"@dcloudio/uni-app" 并且在前面花括号中写入onLoad

此时只要进入页面，就会将《onLoad函数》这句话输出

2.3onLoad 传值

在跳转到demo6的时候给它带上一个name和一个age并且赋上值

此时的地址栏就可以看到，这两个属性已经被传递过来了

那么就接收它并到控制台输出看看结果

可以看到这个对象就已经被传递过来了，并且还尚未对页面进行任何操作

所以说onLoad是在页面进来的时候就已经在执行了，所以说onLoad被称为加载函数

想要在页面中输出也非常简单，只需要与之前相同，创建一个name对象再赋值即可

这样在页面中就可以看到 "王五" 了

3. onReady

3.1 onReady的概念

3.2 onReady使用方式

此时在onLoad中想输出scroll的value值，但因为定义的是null

所以此时value是获取不到东西的

所以现在需要使用到新方法onReady

直接将控制台输出的语句放在这里，那么结果是否会和刚才相同呢？

可以看到，已经是将这个对象给输出了

4.总结

onLoad和onReady都是用于在页面中加载执行的方法

但是两者都有互相做不到的工作

相对于执行速度来说，onLoad比onReady速度要快，也就是说当onLoad都执行完毕，onReady才开始执行