生命周期onLoad和onReady在vue3组合式api中的使用以及onShow和onHide在钩子中的对比和顺序

1.生命周期onLoad和onReady在vue3组合式api中的使用

1.onLoad的认知和使用

我们在使用我们的onLoad时，并不可以直接的使用我们的onLoad需要先导入我们的onLoad，因为我们没有导入我们的onload时而直接进行使用是会发生错误的，因为此时的onLoad是并没有在我们的生命周期里面的，所以直接使用会发生错误。

因此我们在使用onLoad是需要导入我们的 import { onLoad } from '@dcloudio/uni-app'  这个与我们的ref导入类似，我们导入完成之再次到我们的页面中进行查看。

我们也可以在onLoad里面来修改我们的值

由此可见我们的onLoad可以用来对我们的定义的变量或者常量的value进行修改，从而改变我们在页面显示的值。

2.onLoad的回调函数

我们可以在官方的网址里面找到我们的的页面声明周期，在那里可以看的我们的onLoad的详细信息。

连接：页面 | uni-app官网 (dcloud.net.cn)

我们在平时的跳转页面时会发现我们的地址栏都有一些值，这些值是我们传递的值，我们可以使用onLoad来取到我们的地址栏跳转传递的值。

我们先到另一个页面或者新建一个页面，设置一个<navigator url=""></navigator>组件，在url属性里面设置我们需要跳转的地址，在地址后面加上？值名=值如果需要传递多个则使用&。

我们可以给我们的onLoad设置一个参数e这个是我们从页面传递过来的值。

我们从页面传递过来的值是一个对象，所以我们需要找到我们需要的属性及其属性名来取值。

3.onReady的认知和用法

我们如果需要获取到我们的节点信息的话，可以使用我们的onReady因为我们直接获取我们设置的节点信息是拿不到的，需要在我们的onReady里面来获取。

这里的null只是定义为null， 输出null 说明拿到的只是上面const定义的scroll，而不是dom体里面的，dom体里面的不是null

我们导入我们的onReady并在其里面再次输出我们的节点信息

我们的onLoad类似于构造函数，onReady类似于onLoad，我们不可以在onReady里面输出我们页面传递过来的值。

2.onShow和onHide在钩子中的对比和顺序

1.onShow的认知和用法

我们导入我们的onShow然后改变我们onReady和onLoad的输出改为输出，就是我们进入页面加载某个函数的时候就输出这个函数名，来方便我们查看执行的顺序。

但是在我们切换页面之后可以发现，只有我们的onShow是会重复执行的，其它两个函数都只是在页面加载是执行的。

我们可以在当前页面设置一个navigator组件来跳转页面，然后从那个页面回到我们当前页面。

跳转过去在点击跳转回来，然后在观察我们的控制台输出。

我们再次点击上面的那个箭头返回的话，那么我们的页面就没有再次加载，所以我们只有onShow会进行输出。

总结：点击返回时之前的页面还保留着，没有重新加载；而demo5页面点击按钮跳转相当于重新加载一个新页面，所以onLoad会被调用

2.onHide的认知和用法

我们导入我们的onHide然后使用我们的onHide，我们的onHide与onShow类似，一个是每次访问页面的时候执行，另一个是每次退出页面的时候执行。

我们进行页面的切换时，比如点击另一个页面，在回到我们的页面。

所以我们的onHide函数是在我们退出页面的时候使用，就比如你在刷视频的时候微信来了消息，点击这个消息我们的视频就暂停了，等你回来在继续播放。

然后我们在onHide函数里面设置clearInterval（定时器名字）我们每次出去的时候，就会暂停我们的数字增加。

当我们进入页面是数字开始增加，然后我们切换页面再次进入时，发现我们的数学已经停止增加了。

但是我们如果想要我们出去页面，然后切回我们的页面时，我们的数字又开是重新增加。这个时候我们需要在我们的onShow函数里面再次调用我们的定时器。

我们页面的函数执行顺序在没有组件的情况下是：onLoad>onShow>onReadyz。这个也是我们经常使用的顺序，一般都是以这个顺序为主的。

我们页面的函数执行在有组件的情况下是这个顺序的：onLoad>onShow>onBeforeMount>onReady>onMounted。

这两顺序都可以使用，也能混合调用这两种顺序，主要是根据我们的个人习惯来使用。

在我们的页面中调用我们的onBeforeMount函数和onMounted函数，在控制台输出我们的顺序。

这样就可以清晰的了解我们的函数执行的过程。