00:00
上一节课呢,我们说完这个路由跳转了,对吧,那这节课呢,我们来看一下这个对应的生命周期。啊,那生命周期的话呢,它比较简单啊,那现在大家看啊,在我们的index里边啊,我们在这儿来看吧,啊在index里边。我们刚刚用到一个叫onload对吧,那在这里呢,我做了一个打印,那除了no呢,我们继续往下看啊,有already啊,On,还有onlo,一共就这五个。那么下边这些呢,是对应的页面相关一些事件的处理函数,那这个稍后在我们的项目中都会遇到,那我们先看生命周期,那么对应的打印呢,我把这个钩子函数这啊给大家切换一下on head,包括这个on alo来换过来。诶,还有一个啊,Already我们也换一下好,那现在我们这儿呢,做了一个打印,哎,为了不干扰大家呢,我先把之前啊我们修改状态数据的代码呢,给大家注释一下。
01:05
嗯,在哪呢?在我们的outload里面展开。点击啊,把这个里边的啊这一套我们先给它注掉,那这样的话呢,我们的控制台呢,就干净一些啊干净一些。好,那答上来能看到啊,这三个执行了对不对,没有问题,那么要想搞清楚这个生命周期函数呢,我们需要看一下它的官网来,在官网指南这一块呢,小程序框架往下这儿有一个页面的生命周期。这里面呢,有一副生命周期的呃,图示,来我们看一眼。首先在这里呢,它分为两部分啊,两部分一部分呢叫view thread,一部分呢叫APP service thread。首先我们要知道啊,这个thread这个单词呢,叫谢成。线程我们清楚啊,咱们之前也讲过对吧,哎,说进程啊,还有线程,那那现在呢,相当于是它同时会开两个线程,一个线程呢服务于我们的视图层,一个呢算是我们的逻辑层。
02:13
我看服务层。那视图层是展现给用户看的页面对吧?这个逻辑层呢,最终负责去提供数据,那相当于MVC里边的哪一层呢?Models就是数据层一样。啊,那这个里面呢,不止是model层啊,它还有逻辑呢,也也在这儿处理嘛,那可能它就相当于是M加C嘛,控制层。OK,来,那呃,我们接着往下来看啊,那在这先来看啊,视图层上来start来in it in it是不是开始初始化呀。初始化完了以后。注意。这儿会做这样一个操作,叫notify。Notify去干嘛呢?哎,首先你要知道notify是通知的意思,它呢去通知谁通知我们的啊,在这呢,我就叫他什么呀,叫它的逻辑层啊,或者叫数据层,通知我们的逻辑层。
03:13
通知它干嘛呀,你看我通知完我在这儿呢,叫waiting data,哎,是不是在等数据呀,而我们的逻辑层接收到了这个notify之前呢,你看他这在waiting notify,哎,我是不是就等你通知我,你这一通知我会做这样一个操作,叫send in条data,哎,发送初始化的数据。对吧,呃,发送初始化的数据。那说完这一把通知是不问我们的逻辑层要数据,而是逻辑层会把初始化的数据给到我们的视图层。视图层拿到了数据,紧接着走的叫first render,那就是初始化渲染,然后渲染完以后呢,哎,你看又去通知谁,我们的逻辑层,逻辑层接收到通知,注意这个时候呢,它会执行哪个钩子函数呢。
04:11
叫already。诶already,那already是干嘛的?来来到我们这个里边,我们看一下官方给出来的注释。在这already监听页面初始化啊,初次渲染完成啊,那这样的话,这是不是跟官网的图示就对上了,First render之后执行already来渲染完成。好,那刚才给大家捋的这条线啊,能不能听懂。页面初始化完问逻辑层要数据啊,要完数据以后初始化渲染,然后执行already。那没有问题是吧,好,那这条线捋明白了以后呢,我们看这一侧。那我们的逻辑层呢,上来也要start啊,Create created,哎,这叫创建。
05:03
那这个是创建啥呀。创建啥呀。啊,其实呢,就是在创建我们页面的实例,别忘了啊,我们这个配件最终会被调用生成页面的实例,就是我们操作的什么类。哎,就是他。那好了,页面的实例创建完了,注意在这个创建的过程中,那根据刚才的意思,它是不是在这开了on和数这两个钩子函数。没有问题吧,也,而且呢,在waiting they notify之前呢,在这儿是不是就执行了。那说明一个点onload和on执行的时候,请问页面上有没有我逻辑层的数据。那根据官网的这幅图来看,它并没有因为我执行之后你才有第一次的。交互。对吧,好,那这是我们得到的啊,就是说在页面初始化渲染之前啊,渲染完成这三个钩子函数,来我们看一下啊,来到开发工具onlo的先执行,紧接着on啊,然后是没有问题,那么allload它就是接听页面加载的,就说一加载我就执行。
06:21
而呢,代表的是页面显示,而这个时候显示根据刚才的描述,它不应该有数据层的数据,也就只能显示出来基本的结构和静态的数据。而到already,也是初次渲染完成的时候。全部显示完毕。啊,全部显示完毕没有问题,那这样的话呢,啊,看完这呢,我们要去测试一下啊,啊当初呢,我是做了这样一个测试。在onload这儿我去做一个de bug啊,打一个断点得bug。对吧,那这个时候来重新编一下我们的项目啊来断点来了,在outload这停着呢,Outload大家看outload执行了,那么后边没有执行,但是我发现一个很奇怪的问题。
07:10
在这儿你会发现逻辑层的数据。我们可以看到。我们可以看到。那这个就很奇怪很奇怪,那这个现象呢,应该是它模拟器的问题啊,因为按照官网想要表达的意思,在onload和第一次的on执行的时候,根本不应该有逻辑层的数据。所以呢,我们应该是以官网这个图示为主啊为主。OK,那如果说以现在模拟器的现象为主的话,你看到就是他官网那幅图毫无意义,而且还是错的。哎,那就是这个。那呃,再说啊。All和already这两个钩子函数呢?只执行一次,而这个on。他呢会执行多次。
08:01
会执行多次,哎,为什么这样说,首先你要知道on是页面显示,那我们看一下这幅图啊,除了on以外呢,往下看它有on hide。哎,是不是隐藏能隐藏,是不是就能够再次显示呀。那除了呢,还有什么?嗯,还有什么,你看啊,这个also,这不是再次显示吗?还有一个叫on alold。哎,上面对应叫destroy,是不是销毁呀,那销毁呢,肯定这个动作也只发生一次,销毁完就一了百了,就拉倒了。哎,如何证明这个also会执行多次呢?来啊,我们来到这个模拟器这啊,把这个断点我就干掉了啊,因为我要拿这个断点呢给大家证明一下。这个调试工具里边显示出来的现象和官网图示表达的并不一致。好,那这是这个来往下啊on head这呢,我给大家把这个填过来,这是页面隐藏好阿lo呢啊是页面卸载,那这样的话五个啊对应的描述咱们也补齐了。
09:09
注意看。刚刚我们路由跳转,咱用的是哪个API来着,在上面的对吧,叫。的话。我们再看一个啊,访问一下这个API。找到刚才那个路由方法来。哎,在路由里面啊,找到SH。啊,他说了会关闭所有的页面,打开应用内的某个页面来,那这个时候大家看啊。我们把这些听一下,哎,上来先看一下吧,上来先看一下,我们看一下初始化这三个是不是都执行了,紧接着啊,看着我去跳转走。嗯,你会发现。Index页面。On unload是不是执行了?因为我在这做了一个打印嘛,直接了说明当前的页面是不是被卸载了。
10:00
啊,那这个时候。你就知道了什么叫关闭页面,关闭其实就是把你销毁了。销毁了,因为对应的navigate to呢,它是不是有一个有一句话叫保留当前页面。OK,那待会儿呢,我们来测单位题的错啊,现在呢,我们把重心呢移到这儿。在跳转到logs页面的时候呢,是不是先要去销毁index页面那?这个时候大家要注意啊,我再点击回到主页,请问那初始化显示的这三个钩子函数会执写几个?就also alllo,已经already。那它都会执行,因为它相当于是重新加载嘛,来我们看一下是不是走。三巨头是不是都出来了没问题,那假如说啊,我们路由跳转的方法呢,我换成navigate to来换上看啊,注意啊,我一敲回车的话,这多了两行啊,这两行没用,我们把它删掉,已保存。
11:04
这个时候大家再来看啊,我路由跳转走。哎,你看这一把呢,写是调动出来,On on hi hi,是不是隐藏呀,那说明之前的页面还在,只不过是隐藏起来而已。实力没有销毁页面不用重建好,那这个时候我把这个清掉再重办啊,我回退到index。来这三个初始化的钩子函数就是可页面显示相关的钩子函数会执行几个?想想。Onload和on ready还会执行吗?并不会,因为他们页面还在,而且他们只需要执行一次就够了,所以这个时候大家看我后退来往上拖一点,只直引谁啊往手。没有问题,那这个时候呢,我们是不是能看到also,它确实会执行多次呀。
12:01
OK,哎,那这是这个啊好,那以上呢,就是五个钩子函数啊,那这些执行是on的啊,所以呢,我们可以在这里去发请求,你呢也可以在already去发。都没都没问题。啊,都没问题,只不过already的实际要晚一点啊,但是呢,有可能有这种需求啊,比如说我要求页面全部加载完,你再去发请求,那我们就可以在already去做这个操作。嗯,而on使用的时候,你一定要注意啊,它呢会执行多次啊,那就是说我们如果说把请求放到这儿,一定要注意会不会发多次,发多次性能肯定会差嘛,对不对。哎,那这在这呢,要注意啊,在all和all allload里面啊,我们可以去发请求,哎,没有问题。好,那以上呢,就是这个啊,小程序页面的生命周期函数,然后呢,我们得到一个结论啊,说它的测试呢,跟页面。
13:06
呃,官网这个图不相符啊,不过后来呢,我看到这句话呢,我释然了啊,他说了以下的内容你不需要立马完全弄明白,不过以后他会有帮助。啊,其实大部分我们都能看懂啊,但是呢,你看这儿觉得看得很清晰,然后再去自己调试就懵了,不过呢,我觉得啊,其实最终我们应该以页面为主啊,因为这个开发工具呢,还是有点不稳定。呃,可能是因为他的问题。OK,那这是这个啊,那这节课呢,我们先讲到这里。
我来说两句