00:00
好嘞,各位在这一小节啊,我们给大家讲两个新的生命周期钩子,在真正讲之前呢,解答一个大家可能会产生的疑惑啊,就是在这儿缓存路由组件的时候,刚才啊,我告诉了大家两种写法,第一种写法呢,是直接写include,然后说明你想缓存谁,那么第二种写法呢,就是不写include,哎,就是来者不拒,这里边未来可能要展示八个路由组件,那这八个就都缓存,但有的时候呢,存在这么一个情况,就是我的导航里面啊,确实有八个导航项啊,确实这八个路由组件呢,以后都得展示到这个位置,但是呢,我只想缓存其中的两个或者是四个,那我得怎么写?舒老师,按照你这么写,那只是写了一个呀,那我有多个怎么办呀,很简单,各位直接写成数组,前边加一冒号,里边给它写上啊,一个叫做news,比如说你再写一个叫做message,因为我也没有别的了,是吧?各位啊,写上这个message,那你这么一写,同学他们两个就都缓存了,来看一下效果啊,刷新一波,我从news身上切走,你看不触发销毁,我从message身上切走,你看也不触罚销毁啊,像你刚才那写法,那可不是,各位你撤回来,如果你这么写的话,来吧,各位只是缓存了news,在这呢,给它删掉,来测试一下,各位刷新一波啊,从news身上切走,不触罚销毁,从message身上切走,诶是不是处罚销毁啊啊,那在这呢,给大家补上了啊,在这儿找到home啊,缓存多个,这么写一数组缓存,一个直接写字符串,OK,那这个疑惑呢,就给大家解答完了,那接下来同学我用一个功能把这两个新的生命周期钩子呀给大家引出来,回到页面里面,我想给news这个组件呀加。
01:42
它一个功能,加个什么功能呢?就是在这儿啊,展示一个文字,叫做欢迎学习viewu,随后呢,它的透明度啊,发生周而复始的变化,诶同学我这么一描述,绝不觉得这个需求似曾相识啊,哎,同学,我们写过在哪写过呀,还记得吗?我在给你讲这个基础的时候啊,有一个东西叫引出生命周期,在这儿我们写过这东西来文本编辑器呢,打开还记得不?写个H2啊,然后在这儿呢,写一个mon的定时器,嘣,发生变化是不?哎,把这功能给它拿过来,HR啊,给它复制回到我的代码里,找到news。
02:18
这个啊,然后呢,同学我加这么一个功能啊,就是把它放在这,也让它发生变化,但不是H2了啊,换一个也让它是Li啊,那随后呢,是不是得把那个数据也给它粘过来呀,把这data给它整个复制拿过来放在这儿啊,但是这么放啊就不太合适了,因为我们是组件嘛,组件里的data得写成一个函数,所以说把它剪切走啊,借助这个代码片段去生成啊data,然后在这写OB,那随后呢啊还得写这个mount,就是整个组件只要一挂载咋的是不是得开启定时器啊?诶好了,回来走到这儿mount的,那我们是学过生命周期的人,所以说我们明白你在mount的里面开启的定时器早晚得关了是不啊,这行输出我们不要在这直接写this.timer把这定时器的ID留下来,然后呢,这个组件即将销毁的时候,我做一件事儿,是不是clear interval,清空这个定时器是不是就可以了,把它拿过来,OK,这不就写完了吗?嗯,来,咱看看效果啊,回到页面里边走,不出意外的话,它应该发生。
03:18
变化了,哎说老师这儿呢,那是刚才没写完吗?没反应过来,刷新一波,嗯,一直在发生变化,挺好的,然后呢,我回到代码里给你做一个验证啊,就是只要定时器的回调在执行,我就一直输出这at符,哎,回到页面里面刷新,哎,定时器的回调一直在执行,所以说呢,透明度一直在发生变化,注意啦,各位,我从news身上切走。你发现了什么问题呢?定时器的回调是不是还在执行啊,为什么呀?哎,说老师可是呢,你的代码写的没毛病了,这销毁之前,然后在这儿就清空,哎,同学考虑一个问题啊,我的news销毁了吗?我的news组件没有销毁啊,被我缓存了对不?各位哎,所以说你看这是一个问题啊,说老师那有问题就有问题吗?那你不觉得这样效率很低吗?我已经不看它了是不?各位啊,说老师那简单,不就想让他销毁吗?那你就不要缓存它吗?把这删掉,问题解决,老师瞧效果啊,回到news里面刷新定时器再工作啊,切走了,News销毁吗?定时器停掉吗?但是同学你把这功能给我废了呀,来看着123啊,切走回来东西丢了呀。
04:29
哎,所以说各位你别把这删了,我还得要缓存的,但是你一缓存不要紧,各位咋的,它不处发销毁流程了,这定时器你停不掉了,哎呦喂,这怎么办呀?哎,各位引出两个新的生命周期钩子,而且啊,这两个新的生命周期钩子是路由组件独有的,来同学我把这个住掉不用了,我再把这个住掉不用了啊,它俩是一组mount的挂载啊,Before this try将要销毁是吧?接下来同学用这个啊,叫做active啥意思?被激活的,那与它对应的还有另外一个叫做active啥意思?
05:11
这是激活,那这个呢,取消激活呗,啊一般我们这么说啊,各位,这叫激活,那这个呢,哎叫失活,啥叫激活,啥叫失活呀,这两个函数什么时候调用啊,来说一下各位你给哪个组件写的这两个钩子呀,是不是news组件,那么你听我说各位,如果news组件从没有出现在你面前变成出现在你面前,OK active就被调用,意思啥激活了是吧?原来我没看你,现在我要看你了,诶active就调用一次。然后呢,当你不想看这个news组件了,你点击message那个选项卡,你把它从news组件身上切走的时候,诶,那就是什么呀,失火是吧?来我们验证一下各位,如果news这个组件被激活,那我就写consolo,写这么一个东西啊,News组件被咋的激活了?来把这个复制一份放在这空行删掉,那这就是news组件咋的不是被激活了,是失活了,OK,来看一下效果啊各位回到这,我重新点一下刷新点击news,诶同学,你看被激活了,我刚才是不是没有看这个news啊,来,我再调一下啊,要不样式太丑了,来走这样,我刚才是不是没有看news,现在是不是在看news,那就是被激活了呗,啊,那如果我切走呢,那就是不想看你了呗,那就失活。
06:35
啊,那我又想看了,诶,那就是咋的激活,那激活的同时各位你切走了message这块是不是销毁了?来,咱们把message那块啊给它注掉,省得它干扰咱们啊,把这个给它注掉,OK,好了,回来再看啊回到这儿整体刷新一波,我看你你就激活,我不看你你就失活,我又想看你了,你就再激活,我又不想看了你就再失活。同学觉不觉得这两个钩子比那个mounted和before this try更加有用,对于我的路由组件目前的状态来说是不,各位哎,那所以说你知道怎么做了,找到news,把原来写在mounted里的逻辑放在哪儿?激活这钩子里啊,那把原来呢写在这个将要销毁的那个里边的逻辑放在哪儿?诶,这呗,失活是不?各位这回就好了,瞧着啊,回到这儿整体刷新一波,我想看newsson OK,透明度是不是发生变化?那不想看了,走定时器是不是停掉?哎,那又想看了,走定时器是不是接着走啊,就是这么回事,OK。
07:35
两个新的生命周期钩子啊,名字需要大家记一下,Active,还有active,那同学们还记不记得了?我之前啊,在给你讲生命周期这个图的时候,我说过一句话。我说同学有三个钩子没有在这个图里面体现,那么其中两个,诶在哪呢?就在这儿呢,Activeive,还有activeive,舒老师,那还有一个呢,嗯,我已经给你讲完了,哎,舒老师,没有谁呀?啊,来这个人各位往上看,我们在做todo list这个案例的时候啊,我们是不是做过这么一个东西,就是编辑,我在这里面是不是用到了一个东西,叫做next t,这就是三个里的另外一个,OK,也就是说当年分析这个图的时候,我所说的三个没有呈现出来的生命周期钩子已经都跟大家说完了。
08:27
啊,刚才那两个你见到了active的active,那这个就是它说他怎么用的来着?诶打开你找到my active,你看一下是不是写了这段代码,什么意思来着啊,当你修改了数据之后,View帮你操作完do之后,把真实的do放入页面了,View再帮你调这个函数next t是不?各位我们说了什么叫生命周期函数啊,就是view在特殊的时候,当我们调的那些特殊的函数就叫生命周期函数,对不对?各位,那你不觉得这个next t就是一个特殊时候帮我们调用的函数吗?那你不觉得这个active active也是特殊的时候当我们调的一个函数吗?OK,同学,诶,那三个是不是都说完了呀?哎,你得有场景才能说,大家想想当年我们做todo list,我们在讲这些东西的时候,哪知都有路由啊,所以说没法说这些问题对吧,各位来最后呢,总结一波,各位回到笔记里面啊,两个新的生命周期钩子路由组件所独有的。
09:27
啊,两个钩子用于捕获路由组件的激活状态,具体的名字active active的啊,那这个active是被激活时触发,那这个activeive的呢,是失活时处罚,OK,哎,这就可以了,来,我们把这个呢复制一份,各位走着啊,我们已经写了30多个了是吧?39_src,诶,下划线src,那这叫什么呢?啊,叫做两个新的生命周期钩子,OK,这小节停。
我来说两句