00:00
好嘞,各位在这一小节呢,我们把所有讲过的生命周期钩子呀,进行一个总结和梳理,来首先回顾各位,我们一共讲了几个生命周期钩子,截止到目前是不是八个。哎,同学说老师啊,这也不少了,挺多的,我这么说你就不觉得多了啊,我不说八个,我说四对。那你觉不觉得他们都是一对一对一对出现的呀?咱就拿这举例子,同学,这叫啥创建之前?哎,那就有与之对应的啥创建完毕,这呢,再多聊一句,同学,谁创建之前呢?谁创建完毕呀,说的可不是VM呀,有多少同学在这踩坑了,说是VM同学你这么说都说不下去,就有一天人家问你,哎,说那个小王啊,这个before c指的是谁创建之前呀?啊,你告诉人家,人家说是VM,你信不信,人家再问你一个问题,你就说不下去了,人家问问你这里边的this是谁啊,你说不用问,This也是VM,那同学你看你说的是什么话啊,VM创建之前我掉的before create啊,完了我问你里边的this是谁,你告诉我是VM咋的?This是一个还不存在的人呗。所以说同学指的不是VM创建之前啊,来说的是这俩人创建之前和创建完毕,你看这图,各位这是干嘛呢,创建数。
01:24
语代理创建数据监测,那你说这呢当然是before create,那这儿呢,当然是create,对吧?完事了,好同学继续说啊,说那四对儿来同学有创建之前就有创建完毕,有挂载之前就有挂载完毕,那再往下各位有更新之前就有更新完毕,那同理有销毁之前也有什么呢?销毁完毕,我这么说是不是就能好记一点?哎,为了能让大家把这东西理解的更好啊,我把之前举过的那个例子翻出来了,并且给你完善了一下来。VM的一生就类比张三的一生,VM的一生就是VM的生命周期,那么张三的一生呢?就是张三的生命周期。好,来同学看一看啊,张三这辈子呢,会经历很多特殊的时刻。
02:15
那在这些特殊的时刻,张三或者是张三的朋友,或者是张三的父母,哎,就得做点与之对应的事儿,是这意思不,关键时刻做关键的事儿吗?咱之前聊过,那么在张三这一辈子当中啊,有两个时刻是最关键的,第一个时刻呢,就是呱呱坠地,哎,啥意思呢?张三出生了,那出生了就得,哎什么检查身体的各项指标等等这些同学,这是张三的生日哦,他还不重要吗?对吧?哎,这是第一个重要的时间点,我知道同学在张三出生之前还发生了一点别的事儿。啊,张三出生之后也发生了很多的事儿,张三会说话了,张三会走路了,张三第一次谈恋爱,第一次分手,第一次吃臭豆腐,是的,他发生了很多,但是我们不关心了,哎,我们关注的是另外一个事儿,哎,就是即将永别,哎,啥叫永别呀?就是拜拜了就挂了,对吧?哎,张三将要永别,同学就是将要不行了,那你说怎么办呀,是不是得交代点后事儿啊?哎,咱就开玩笑的说,你说张三要是个大老板,你说呢,八个餐饮七个洗浴,200来亿分给谁呀,是吧?哎,所以说同学我们关注的是出生和他将要离开的时候,哎,好,那再看这同学VM的一生啊,跟人的一生啊,特别类似啊,来,我换一下画笔的颜色,比如说这儿就是VM挂载完毕,就对应着人的什么呢?出生人一出生得做点初始化的事儿,那么这个东西也是VM1挂载完毕,同学马上干嘛呀,做点初始化的事儿,那什么算是初始?
03:52
发的事儿啊,开启一个定时器啊,对吧,发送个网络请求啊,订阅一个消息啊,绑定一个自定义事件呐,等等这些都叫做初始化的事儿,哎,再通俗易懂点来讲,就是我们之前嘴中所有的一上来怎么怎么的全都写在这个里面,你琢磨琢磨。
04:12
对吧,一上来怎么怎么地,还有一个时间点,我们也关注,就是这个东西啊,即将销毁的时候,其实就对应人的什么呢?哎,即将永别了啊,那得调什么呢?调这个before this函数,那在这个里面呢,我就得做一点收尾性的工作了,比如说各位曾经开的定时器你是不是得关了呀,曾经订阅过的消息你是不是得取消订阅呀,我知道现在跟大家说什么订阅消息取消订阅吧,大家可能有点就怎么说难以理解啊,同学你就这样想啊,说呀。你微信上啊,关注了一个公众号,当你点击关注按钮的一瞬间,其实就算订阅了,然后等你看了两天,觉得它这玩意儿没啥意思,你想取消关注,其实你点取消关注的时候,就相当于你取消订阅了一个消息,OK,先粗略的说一说啊,你等咱们讲到那个消息订阅与发布的时候呀,大家就懂了啊还有就是那个自定义事件,咱们也没学对不?哎,那会儿呢,咱先不提OK各位,总之就是初始化的事儿呢,在这儿做,收尾的事儿呢,在这儿做OK,哎,这一类比不就能记住了吗?好同学,回到代码中,咱要做一件事儿,我呢给你写好了三总结生命周期这个啊,这里边没写东西,那你知道我要干嘛?就是把一咱们当时做那个透明度的切换呢,在这儿完善一下诶,然后再把总结性的文字啊,写在这个里面来精简一下啊,总结的东西不要了,一里边已经写过了啊,也没有这H2了,也不需要通过。
05:44
这个A去控制显示还是隐藏了,来再往下外部的定时器啊,也不要了,删掉打开我们看一下效果啊,各位走着。是吧,哎,在这周而复始的发生变化呢,那现在呢,同学你听我说啊,我提出一个需求就是在这儿啊,有一个按钮啊,这个按钮呢,叫停止变换,只要我一点同学这个东西透明度就不要再变了。
06:08
啊,你就比如说同学在这种情况,哎,我点停止,你就永远停在这儿吧,哎,就这么一个需求啊,说老师来吧,写写我觉得so easy,同学听我说在真正写之前,我得给你聊一个特殊的人啊,这人是谁呢?来就是这儿,诶同学我们都知道啊,这个红色框里的逻辑啊。是销毁的流程是不,那同学请问怎么销毁?哎,是不得调这个Dollar符destroy呀,同学,那你听我说呀,这如果要类比到张三的身上啊,你张三点destroy,那就是让张三亲自把自己干掉,说白了,同学说的再不好听一点啊,这就叫自杀。对吧,哎,你比如说你告诉张三,哎,说你死了吧,是吧,啊,你自己去那个把自己给弄了吧,然后张三就把自己给弄了,同学就属于这种情况,哎,但是还有一种情况啊,咱是为了讲课啊各位我没别的意思啊,除了自杀,还有一种情况就是他杀。
07:08
就啥意思呢,张三明明没想那个啥,没想挂掉,但是由于某些不可抗的因素,导致张三N儿没了,嘿,苏老师还有这种情况呢。来,回到官网看这句话,各位来走在这儿呢,你看他说啥,他说在。大多数场景中你不应该调这个方法,你看人家说的是大多数场景中你不应该调这个方法,调哪个呀?就这个说的再直白点,大多数场景中你不应该让张三自杀。呀,说老师,那我不让他自杀,那他还有哪种方式死掉呢?同学还有别的方式,说老师那你快说说呗,各位你听我说啊,我们没讲路由呢,我们也没讲组件呢,我们也没讲路由的切换呢,没法掩饰张三他杀的情况,OK,现在我们只能是说啊,让张三自己把自己做个了断吧,只能是亲自调这个同学,就像这个this try我跟你说啊,很少我们在开发的时候亲自去调这个啊,因为开发的时候张三都是他杀而没的,是不好回到这儿,那那咱写写吧,各位啊,功能是啥来着,下面加一按钮是吧,来走按钮,哎,叫做点我停止变换啊,点我这个停止变换,然后我也说一下啊,各位,就是讲课咱说的这些例子啊,什么自杀他杀,其实只是说想让大家能更明白一点对吧,哎,没有别的意思啊,回来走啊,反而大家觉得说老师你这课太暴力了是吧,这听你的课听没了这人啊,来给个回调啊。
08:38
到stop就是停下来嘛,是吧?哎,停止变换在这儿呢,配置一个stop,同学你说这里边怎么办?咋能让它停止变换,其实非常简单啊,各位你说它能变的原因是啥?是因为定时器啵啵啵一直在那儿走,你把定时器一停,同学,它不就是停了吗?是不?那在这怎么办?非常简单,Clear inter是不是清除这个循环定时器啊,那接下来怎么办呀?各位是不是得写一个定时器的ID呀?
09:07
定时器呢,这呢,哎,老师简单cost啊,ID等于好了,老师这么一写就得了,你这么一写就报错了,因为ID啊,是在这个mount的函数作用域里的,这边呢是在这个stop里的,他俩互相是看不见的,对吧?不信你点点同学来控制台开好刷新一点就报错,ID没有定义,那怎么办?哎,有同学聪明老师,我这么的用let关键字把这ID定义在外边儿,我来个中转变量,对不,中转在外边,里边我在这写一个ID,这不就可以了吗?同学这么写不是不行,就是有点不太好,哎,那怎么做呢?教大家一招啊,也是开发中经常做的啊,就是这个里边,诶拿着东西这里边也要拿这个东西,那怎么办呢?来同学看着this.id哎就可以了。
10:00
分析一下mount的是不是生命周期勾的,对,那里边的意思是谁呀?VM,那我是不是往VM的ID属性上存了一个定时器的ID啊,哎,那你说到这儿呢,很简单,z.ID但是同学我说一下,一般情况下,咱们自己追加属性的时候,最好不要用这种敏感的属性,你比如什么ID呀,哎,什么key呀,这些东西尽可能避免,所以说呢,用这个timer啊,就是定时器同学不是说一定会出现问题,尽可能避免,OK,好,回来看效果吧,刷新。变着呢哈,来321走,停下来了吧,哎说老师这功能实现了呀,同学那你听我说啊,你这种停下来呀,停的就很温柔。说老师什么叫温柔呢?就是接下来如果我再改变透明度,通过某种其他的方式,页面也是有反馈的,你比如说来到这儿打开。是不是这是什么0.3几啊,删掉一回车看这是不是全显示了,哎,来再改,改成零同学是不是彻底没。
11:07
哎,也就是说同学你这种停啊,只是把定时器停下来了,它确实不切换了,你通过别的方式改啊,也是能改的,来回到代码中,同学,我做的更到位一点吧,我复制一个这个按钮完在这儿呢,换个名啊,叫做透明度设置为一,看这啊,我就直接写了OBS,直接让它等于几呢一,那你看一下现在的效果啊,来停止变换停了吧,定时定时器是不是停掉了?OK,好,各位你看好了,现在我点透明度设置为一,你注意观察走。我问你页面变没变变,这就证明响应事态还在,你说对吗?各位,哎,我这再来几个按钮,什么透明度设为0.2 0.3 0.4,是不是完全可以操作呀?哎,你看你这停的就很温柔,啥叫温柔?就是响应式还在,以后还能改,页面还能再变,现在我提出一个需求啊,各位,就是当你停止变换之后,我不是说把定时器停了,我是彻底把那个VM都给你干掉了,就是我把这东西一废,你以后再想改透明度你改你都改不了,页面也不给你反馈了,这就是停下来的很暴力,就不像你停的那么温柔是不?各位啊,那来吧,怎么能让它暴力的停下来呢?不清定时器,哎,咱这么写this点倒了符是不是this try呀,是不是销毁?好来看效果啊,看效果来刷新,变着呢哈,看着啊,停止变化了吧,各位我问你,我这一点不要紧,VM是不是被干掉了呀。
12:45
那也就意味着各位你点这啥你也看不见了,你再点这同学都无济于事了,VM没了,没人驱动着页面了,你说对吗?哎,你这就是停的很强制很暴力对吧,说老师,但是我能给你挑个毛病。
13:00
诶,你的定时器没有关,确实啊各位来,我在这给你来个consollo输出,谁呢?这set interval完了你自己观察啊,各位来刷新,你看定时器走着的吗?啵啵啵啵,来看着停止变换,你确实停了,同学,你是把VM干掉了,但是谁傻了吧唧的,他不知道啊,定时器是不是还在这输出呢呀,那这不行啊,哎呀,说老师简单,你这不就套路我吗?你28行的代码一解开不就完事了吗?老师多清晰呀,定时器清掉VM干掉对吧?来看效果刷新走着呢哈停。停了吧,各位是吧,那VM呢,那你看吧,肯定也不在了,说老师这我不就做完了吗?啊,那同学呀,你听我说你这个清除定时器这个动作呀,可以换一个地方做,哎,就是借助谁呢,这个人咱们之前说过的before destroy啥意思,销毁之前来在这儿做,你看效果啊,也是一样的,但是在这呢,我给你验证一下啊,做个输出叫做什么呢?VM即将驾鹤西游了,是吧?啊,要被干掉了,来看着啊,在这变着呢,啵啵啵啵,来停止变换啊走。
14:15
各位VM是不是即将驾鹤西游了,一旦发现VM要被干掉,同学是不是得掉这钩子,这钩子一定不要紧,定时器我问你,你是不是清了呀?啊,也就是说是这么一个流程,各位啊,我点按钮的时候,我是把VM给干掉,VM一旦被干掉就开始走什么流程,销毁流程,销毁流程一旦开始走,各位这个东西必保得掉,你说对不?这个东西一掉里边是不是就清了这个定时器是这逻辑不?哎。我讲到这儿啊,可能有些同学啊,就得发出疑问了,哎呀,说老师你这东西吧,我不能说不行,这么写也行,但是老师我觉得你是为了讲这个东西而讲,说老师你看明明我不需要去记这个钩子,我就默默的把这个清除,定时器啊,我就往这里一放,多好啊,多清晰呀,第一步清定时器,第二步干掉VM,你看以后这个东西别人看着也好看呢,说老师你这感觉不太好。
15:20
哎,那同学啊,是这样的,你听我说,你现在这种编写方式就是属于刚才我开玩笑的说张三是属于自杀的,啥意思呢?各位你是不是明晃晃写了一个按钮,你是不是明晃晃写了一个回调叫stop,然后你把逻辑是不是写在了stop里面,同学你听我说一句,如果现在张三也就这个VM,他不是自杀,是他杀啥意思呢?各位你听我说,我连这按钮我都没有。哎,我连这stop回调我都没有,我都不亲手把它干掉对不对,我都不写这个东西,同学,那我问你啊,如果说粉色框的东西你都不掉了,那就意味着同学它是由于某种其他原因导致咋的它被干掉的,而不是说你亲自点这按钮,那也就意味着同学一句话吧,按钮没有,没有这么明晃晃的这么一个效果,还一点我就停止,同学啊,有这绿色的回调咱还说啥了对不?所以说像这种场景,同学完全可以把停的那个动作写在绿色框里,那我想问的是绿色框要没有呢?
16:24
哎,就开玩笑的说,他要是他杀呢,是吧,不是明明明晃晃的直接在那写呢,那怎么办呀。啊。嗯,你死stop回调都没有了,你怎么把逻辑写在这儿是不?哎,所以说你看这种场景,诶,你看看就比较适合哎这种了,你觉得呢,各位这种效果是啥?我不管你是自己不想活了,还是别人把你给弄了,我不管咋的,只要你要开始走那个销毁流程,我不管你是自己干掉你自己,还是别人干掉你自己啊,只要你销毁我必保走这个,那在这里边我可以做很多善后的工作,对不?哎哎,给大家举一个生活中的例子啊,不说你,我还是说这张三同学,比如说举个例子啊,张三呢,他出国他知道啊,这次出国呀,怎么说呢,这个怎么讲,他自己就想把自己了结了,那我问各位,他明明知道这事儿,那我问你啊,走的时候是不是可以写一个什么什么遗嘱啊,哎,或者是交代一下后事什么的,是不是,哎把这些事儿是不是都料理好了呀,这就是属于啊,你自己把定时器往这儿写,你看就你明知道下一行他得死,所以说你在这儿,我问你是不是清楚定时器呢。
17:30
但是这么一个场景,你在想就是张三这次出去啊,他也不知道自己能不能发生危险,那你说他可以怎么办呢?可以这样做,你找一个团队是不?哎,你比如说张三的秘书啊,或者是什么的,对吧?哎,只要张三产生了人身危险,我不管是张三自己想把自己解决,还是别人把他解决,只要张三被解决了,只要张三被解决了,同学是不是就走这而且你觉不觉得很多的善后工作,你都可以往这写,对吧?哎,你比如说同学举个例子啊。
18:01
你呢,一共开了八个定时器,订阅了十个消息,绑定了20个自定义事件,你也不确定当前这个东西到底是点按钮啊它被干掉啊,还是鼠标划过它被干掉啊,我也不知道它怎么被干掉,反正同学我的要求就是它被干掉的前一刻,该关的东西得关利索,你说最好用谁啊,是不是就用它?哎,OK,所以说这么说不就说明白了吗?啊,虽然咱举的例子吧,有点不好听,哎,但是你能懂就可以好,那最后同学你听我说,我补一句啊,就是我们现在图中所体现的,我问你是几个生命周期钩的几个,是不是八个?哎,那同学我告诉你,图中还有三个钩子没有体现。哎,说老师,那快点吧,这三个你赶紧给我讲一讲啊,同学啊,是这样,图中之所以没有体现出来这三个本质原因是因为这三个得在一个特殊的场景下才能出现,也就是说我们得讲了路由,并且实现了路由的切换,诶,然后你才能去说那三个钩子,OK,所以说同学,现在我们先把这八个给它记住了,那三个等我们讲路由的时候,分分钟就能把它说明白,OK,好了,最后我们来一个总结,我把总结呢写在这儿啊,各位来吧,读一读常用的生命周期钩子呢有两个,一个是mounted,一个是before try mounted里边发请求啊,启动定时器啊,绑定自定义事件啊,订阅消息啊等等初始化的操作,OK,还有一个是谁呢?这个来做收尾的事儿,对吧?清除定时器啊,解绑事件呢,取消订阅呀,来再说这个关于销毁view实例,咱再唠叨最后那么三句,第一个同学。
19:45
销毁后借助VI有的开发者工具,你看不到任何的信息,第二个就是销毁后自定义事件确实会失效,但是原生的盗墓事件依然有效,刚才我是不是给你验证了,再说第三个一般不会在诶这块呢,改个字啊叫在,一般不会在before destroy中操作数据,为什么?因为即便是你操作的数据是不是也不会在触发更新流程了,我们之前是不是也验证过了,对不?各位哎,就是能访问到数据,能调用到方法是不?哎,那我们为什么非得在这个时候去访问数据,去调用方法呢?是吧,就像咱开那玩笑说我这一辈子可以有很多的时刻去把这雪糕吃了,那为什么非得我要选择自己不行的那一刻,对不对?我也尝不出来啥味儿了,我牙也不好使了,我味觉也失灵了,为什么非得在这儿把这个雪糕吃了呢,是不?所以说不要做这种奇奇怪怪的事儿,OK,哎,好同学,那这个呢,就是对生命周期钩子的一个总结,好。
20:45
这小节我们。
我来说两句