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函数,在控制台输出我们的顺序。
这样就可以清晰的了解我们的函数执行的过程。