00:00
好嘞,各位,那在这一小节呢,我们给大家说一下VIEW3里面生命周期的变化,给大家呢,准备好了两幅图,左边呢是VIEW2的生命周期图,右边呢是VIEW3的,这两幅图呢,均摘自view的官网,哎,大家自己打开官网呢,也能找得到左边的这个图啊,大家应该相当熟悉了,我们再去讲,比如二生命周期的时候,这里边的每一个钩子,每一个环节,每一条线,我们都是一点一点翻译,一点一点验证的,是吧?各位,那在这儿呢,我们就把它和它呢形成一个对比,那我调整一下啊,让我这个目录呢隐藏,然后呢,我再放大一点,便于大家观察,首先呢,我们观察一下,就是V2里边的这些钩子,在V3里面有没有换名字,你先不用观察整体的这个流程啊,先关注红色框里的这些钩子,哎,同学,VIEW2里面第一组before c啊和created,那在比三里呢,也是同样的名字,好,再往下看VIEW2里的第二组。
01:00
投子before mount mounted来挂载之前,挂载完毕,那么在VIEW3里面也是同名的,好,再往下看VIEW2里的before update和updated,那么在比三里面也是同名的。重点来了各位,在VIEW20年代呀,我们说before try什么意思呢?就是销毁之前,哎,然后我们还说这个叫做destroyed,啥意思?销毁完毕,再有三各位不提销毁这个概念了啊,那取而代之的是什么呢?叫做卸载。哎,Mont是不是有挂载的意思,那么amount加个UN就有卸载的意思,也就是说VIEW3里面不提销毁,提卸载,Before on mount卸载之前,On mounted卸载完毕。哎,有没有这种感觉,跟react里面那个生命周期钩子有点像了,就是完全让这个概念对立起来了,你这不挂载吗?那不用了,我这就卸载。是吧,已挂载,已卸载,你看原来就有点儿就像对应不上似的,原来叫做挂载完了呢,说销毁,你看有点不是一个对立的概念,那在这儿呢,哎,把这俩换名字了,哎,也就是说同学换名字的只有最后一组,好我们再往下看这个流程啊,你发现VI3的这个生命周期流程吧,更智能了,为啥说呢?来看这儿各位,我原来在给你讲那个VIEW2生命周期的时候啊,我写过这么一种代码,我不知道大家还记不记得了啊,就是我写了一个new,然后一个view,然后不得传入配置对象吗?诶呗呗,我传了很多,然后呢,这个配置对象里啊,我就偏偏不传,谁呢?我就不传这个EL啊,不传EL的结果就是他也会走这钩子,还有这钩子,但是到了这个环节,人家问你,你有EL那个配置项吗?你没有,你就不能走这你就得走no这条路是吧,你走他说问VM.dollar for mount is calleded啥意思?
02:59
当Dollar for mount被调用的时候,你是不是再往下走,那我想问的是,如果在这儿我不走呢,咱之前也验证过,也就是说yes走不下去,No这块呢,我走了,但是我还不掉这个Dollar mount就有一种感觉,同学,这个图啊,就此就停在这个环节了,停是停了,但是这个钩子走没走,走了这个走没走,走了有没有种感觉,你创建出来的东西没有去用,但是我也走了两个钩子,这是不是有点不太好,哎,比如三里就变了,你看人怎么说的啊,说你首先得调这个create APP。
03:35
哎,我刚才是不是调那个create APP了,咱们之前写的时候分析那个比三脚手架的时候,是不是有个create APP完了呢?你得传入配置,哎,那就这一堆东西,其实同学就当于啥呀,你之前的那个new view,哎,也就是说create APP所返回的东西就相当于原来的VM,哎,咱之前是不是聊过这事儿,分析VU3那个脚手架那个结构的时候,然后你再往下看,各位,你光创建出来了这个应用实例对象不行,在这儿啊同学我得给你写一下啊,可别觉得它是V,这APP可比V要清亮太多了是不是?哎,你不是说创建APP之后我就帮你忙了,不行,你还得进一步写代码,你得app.mount然后你再传入EL,你得明确的告诉我你服于哪个容器,你这些东西都准备好了,也就是说同学第一行写完了,APP得出来,APP得干活,然后我的图怎么的才开始走,然后我再走比。
04:36
Create,还有create是不?各位哎,有一种感觉VI3的就是你得万事俱备,哎,我再走这图,但VIEW2有一种感觉,哎呀,反正有了一个VM就走着吧,先是吧,然后在这儿呢,再判断啊,那你看VIEW3就不是了,所以说走在这啊,各位你看少了一个判断环节嘛,原来判断几次两个嘛,那这呢,一个说老师,那这俩判断你仔细看吗?你看看这边的英文has template option啊,你有template这个配置项吗?那这边直接给你翻译成中文了,是否有temp play配置项是不?各位哎,那整个这些都是一样的,你比如说这个绿色框就对应这个呗,啊,咱之前说这个我还给你分析,哎,我说同学这个injection有什么意啊,有注入的意思啊,那在这呢,就是注入响应式,你看都给你写好了,是不是各位好,再往下看,还有就是这,哎说老师这个VIEW2里啊,有这个环节是不?哎关掉什么监视啊,什么卸载这个什么子组件啊,应该叫做销毁子组件,身上的一些什么事件呢,其实同学在这儿也有啊,也有,只不过呢它没有体现。
05:36
分出来,因为人家的想法是,那既然都已经卸载了是不,那就卸载掉了呗,我就不体现那些东西了,反正就后就告诉你已卸载了是不?各位哎,也就是说这个名字我们分析完了,整体的流程呢,我们也过了一遍,几乎没有什么太大的改动,OK,那接下来呢,我们就是用代码去验证这些东西,这个这个这个都给它走一遍呗是不?回到这儿来吧,各位更改一下代码啊,打开这个DEMO吧,里边不能写这么多东西啊,精简点我就留下一个功能啊各位,就是这个求和这个哎,点我加一完,这些东西都不要,都不要,都给删掉啊,Ref定义的数据只留下一个,这个不要,Watch effect也不要,我就做一件事把它交出去就完活是不?各位,嗯,来看一下效果啊,回到这边刷新一点就加啊,回来再改APP,为了能演示出来一会儿那个卸载的效果啊,我在这儿呢,加一个V-if大家都知。
06:36
啊,这个V-if,就是如果这个表达式的值为甲,那是整个这个结构都干掉对不对?但是现在同学你看挺有意思的,我是给谁加的V-if给一个组件,那也就意味着啊V-if所对应的表达式如果为甲,那么会把这个组件直接卸载掉,哎卸载掉好了,那我写一下叫做a show DEMO,哎,就展不展示DEMO这个组件,那由于我目前写的是不是有三别写data还是写set up这个配置项是吧?哎在这呢,不收到这个pro,那在这怎么写let一个A字首DEMO,然后它得是ref类型的对吧?那在这得怎么写呢?是不得写一个布尔值为真呢?那在这你是不是得引入啊import引入从这个view身上啊,引入这个ref啊,走,OK,那别忘了,最关键的一个动作就是把它是不是得交出去,不交出去没法写呀,在上边还得来一个按钮啊,不切换没有效果呀,叫做切换隐藏。
07:36
诶,然后再来一个,这个叫做显示,那么切换就得给一个点击事件,其实我调整的就是A字受DEMO的值,对吧?给它取个反复回去不就得了吗?来看一下效果啊各位目前呢,是显示的,来隐藏啊,再显示,其实我每一次切换各位都伴随着DEMO组件的挂载卸载,挂载卸载是不?哎,我先告诉你这个结论,一会儿呢,我们再去验证呗。啊来吧,开始写在哪写,别在APP里面去研究,要在这个里面去研究,要不刚才你那个切换显示不就白写了吗?啊这呢,调整成一行啊来走着各位setup呢,给它折叠起来,不用往里面写啊同学,我们还没讲到setup里面去写生命周期钩子呢啊同学,你看这来来来来,回到这个图里面,同学,这这个图是啥?VIEW3的生命周期图谁画的,官方,那也就意味着这些配置项能不能用,必须可用啊,哎,那所以说来我写一下呗,各位走着,那么第一个写啥呢?把这。
08:36
Get up放在上边吧,这个顺序是无所谓的啊,放在下边呢,大家好看一点,第一个是before create,那在这里边呢,我就简简单单来一个consolo,然后呢,来一个杠杠杠,谁呢before create,再来一个杠杠杠行吧,那before create之后呢,那就是c re的是不?那同样的呢,是这个东西,但是名字我换一下,那接下来呢,Create完毕了,那就得是before mount对吧,挂载之前复制,然后呢,放在这里面,接下来呢,那就是mount,挂载完毕呗,放在这儿,名字改一下,那接下来写什么呢?写更新的就是before update,嗯,是这个,然后呢,它也是一个函数,把这些东西啊给它复制一份,往这一粘,名字呢,也得给它改一下,好,那这个说完了之后,还有另外一个就是updated是吧,这个那在这呢复制在这呢粘贴,把这个名字给它改一下,缩进给它调一下,OK,还剩下最后一个,各位,如果你要写错了,你就写成这个了。
09:36
叫做before try,其实这个东西同学在这个VIEW3里面,你就算写它也不奏效了啊,不信我们写着一会你瞧一瞧啊,在这儿还有一个叫做destroy的,哎,就是销毁完毕了,好走,把它呢粘贴一下来检查一下啊,Destroyed before destroy,然后是update before update mount before mount,再往这走是created before OK,都写完了,同学来在这我写一个这个注释啊,叫做通过配置的配置项的形式,哎,然后呢,叫做使用生命周期钩子说老师没懂啥叫通过配置项的形式,同学内幕是啥配置项?Setup是啥配置项?这一堆是啥配置项?哎,就是往那个组件的配置对象里面写东西嘛,对不对,一个一个的配置,好了,各位说完了之后呢,回到这刷新一波,一上来什么呢?哎,挂载流程,你看before create。
10:36
Before mount mounted是吧,哎,来我加一个啊加之前清掉来看这走更新之前更新完毕我再加,那就是更新之前更新完毕对吧,各位好,清掉这我不想看了。走是吧,同学,怎么没有效果呀,因为人家已经不叫那个什么before this try了,人家叫的什么呀,叫做before on mount,对不对?那这叫什么来着?On mounted,就这个,这回你看啊,同学这也得改啊,这回你看啊它就好了,来刷新一波,这是挂载流程,更新更新更新清掉,我不想看了,走,你卸载了吧,我又想看了,诶同学,这是我不想看了走的卸载流程,这是我想看的时候走的挂载流程是吧?各位OK,那如果只说到这儿啊,其实也行,各位对不?那你看看吧,官方画的图,官方写的这些钩子一个一个的咱都说了,但是同学你别忘了,VIEW3最大的一个特点就是组合式API,那也就意味着各位,你在这写的这些配置项形式使用的生命周期钩子,都可以通过组合API的形式放入组API表演的舞台。
11:48
That up中,但是放不是随便放,要改名他们每一个人都得改名啊。那我说到这儿,可能有些同学说,说老师,算了吧,我也不想学那个setup里面怎么写生命周期钩子了,我就觉得这么写挺好的对不?各位哎,说老师,你看这名字啥的都跟原来一样,我就把最后两个我记一下不就得了吗?同学,当然可以啊。
12:13
是不?那你看同学,人家官方的图不就是这么画的吗?那同学他不想让你这么用,人家为啥画的图呢?是不?哎,所以说同学我接下来给你讲的用组合式API往setup up里面写这些生命周期钩子的这种写法,不见得你非要用OK啊,那我把这些东西先给它注掉,哎,然后呢,给它折叠起来,又不让折叠了,那就井号来一个region,那在最后来一个井号and region OK,把这个折叠起来,那接下来呢,回到setup里面,我要干嘛呀?各位来写好了,叫做通过组合式API的形式去使用生命周期钩子,哎,所谓的组合API就是你得往这里边写,哎,没发现吗?U3现在做的事是不是?哎,什么东西都想往这里边塞来吧,写写说老师那些名字到底怎么变呢?给大家整理好了,哎,也是。
13:13
这自官网各位,这个我们已经知道了啊,三里边可以继续使用二的生命周期钩子,但有俩更名了,一个是before destroy变成了before mount,一个是destroy的变成了mounted。来看这VIEW3也提供了组合式API形式的生命周期钩子,与VIEW2中的钩子对应关系如下,同学,最重要的是前两个变化啊,我说最重要的变化是前两个,不是说最重要的东西是前两个,也是啥,你知道它变化了啊就得了啊,而这种变化对于我们编码来说没啥大影响,各位来你看一下啊,Before create你甭想往setup里面写了。也就是说同学比原来的这个啊,原来的这个before create是没有一个替代者,说写到setup里的谁就是它的体现呢,Setup也就是说同学before create和create这个VIEW3呢,并没有给我们提供什么组合式的API view3的认为就是setup就相当于你的before create了啊,这个created也相当于这个了,说老师不对,你这把我绕懵了,你之前不是说过这么一个事儿吗?还跟我说的,哎,什么同学们setup执行的时机啊,是在这个before create这个之前的,完了你写了一个这个,写了这个,你这怎么这是这么善变吗?到这又说他俩一样了,各位回来,我之前是这么说的,哥们儿,我说如果你通过配置像这种形式,你写b before,那同学我问你现在我写没写一个生命周期钩子叫b before,写没写,写了我是通过啥写的,我是通过啥写,我是通过配置项写。
14:55
那你这肯定啊,同学你这没跑这100%的,你看一下这儿来走着杠杠杠,Set up,你说谁先执行必须他嘛,然后谁呢,然后他吗,看效果呗,来到这儿刷新一波,你看是不?哎,就是目前这种情况是它是配置项,完它也是一个配置项,他俩是平级的,那接下来我们研究的是把这生命周期钩子通过组合API的形式塞进去,是不是各位完咱说塞的时候你得换名,但是这个东西同学你就甭想着往里塞了,因为你塞不进去的,为啥他没有给你提供一个before create的什么呢?这个组合是API,他认为谁就相当于这个before呢?Setup,哎,能不能明白各位咱说的是组合是API,而不是说在这个里面咱直接写的这个配置项是吧?各位,哎,好了,给它删掉,那我们就简单记before create这个钩子和create这个钩子。VIEW3并没有给我们提供什么组合。
15:55
是API的形式,你也不用尝试着改名,Setup就相当于他们两个了,哎,说的再直白点,他和他想往这里放,你放不进去,也不允许你放,它就相当于他们两个了,OK,这过了啊,那再往下看,哎,这些东西啊,同学你看就得变化了,你原来的before mount这个配置,哎,或者这个生命周期钩子,如果你想用组合式API去写它的名字,前边得加一个on。
16:27
哎,当什么什么时候当什么时候当挂载之前是不来吧,写写各位当before mount是不得拿过来,那既然你想用组合式API在这写这东西,那就意味着咋呢?你得引入,哎,同学体会体会,组合是API,你在这儿可以引入形形色色的东西,然后组合到这里去是不?哎,第一个就是on before mount,好了,我们再验证另外一个,另外一个叫什么名mounted改为on mounted,说老师我发现规律的就是前边加个on呗,你还真说对了啊。来,再往下看,各位before update变成了on before update,来接着写on before update,仔细点啊,别写错,再往下,Updated变为了UN updated,哎哟呵,来,走着on updated同学一再强调啊,不是说你必须要这么写,只是告诉大家一下,人家有这个理念了。
17:27
来,往下走,这叫什么呢?呃,Update,写完没啊,写完了是吧?来,再往下看,这个是B方amount,那就变为了on方amount,来走着两个昂啊,说起来的确有点绕嘴昂,Before amount,好同学,我告诉你啊,最绕嘴的是这个。这怎么读啊,On mounted啊,就意思卸载完了加个UN嘛,Mounted是挂载完毕UN mounteded就是卸载完毕,那同学你看这,哎呦呵,On on mounted,来吧,走着写。
18:00
On,这个on mounted应该是这个是吧,那也就意味着这个这个这个这个还有这个,还有这个都可以在哪写啊?哎,都可以在这个里面写了,走着啊,那他们都是什么数据类型啊,他们都是函数啊,而且可以传递一个回调函数,那么这个回调函数什么时候执行呢?咱就拿它来说,就是这个人所指定的这个绿色的回调函数,是在挂载之前或者是挂载的前一刻去执行,相当于你在外边写配置,写谁before mount就这么回事,好了,把这些东西都给它清掉,来一个consolo,写上杠杠杠,然后呢,叉叉叉,杠杠杠,然后我把叉叉叉都替换成这些东西,走着走着走着在这儿呢,哎呀,走着在这儿呢,再来,在这儿呢,再来,OK是吧,测试一下啊各位,回到这边刷新一波,一上来打头。
19:01
那必须是它是不,随后呢,On before mount,随后呢,On mount,嗯,那接下来呢,我要更新了,走你on before update好on update好把它清掉,那我想切出去不看了,我要卸载掉,走你on before on mount和on mount是不各位哎,OK,这就是用组合式API这种形式呢,去使用生命周期钩子啊,一再强调不见得你非得这么写,那这个时候呢,同学有一个有意思的情况啊,就是说我通过组合式API。我写这一堆东西,然后啊,嘿,与此同时我还想通过这一堆配置的形式一起去写,同学这儿啊,我得强调,一般来说你通过组合式API,你用这生命周期钩子了,那在这边你就不要写这个了,是不是各位,但我就想同时写吗?哎,他们有一个先后顺序的问题,来看一下效果啊各位刷新一波。哎呀,说老师这什么情况,来慢慢分析,同学setup永远是最开始执行的那个人,然后你看啊,Before create,诶完了是不是。
20:10
然后呢,On before mount啊同学这个啊,我说一下这两个是那个配置项所独有的。啥叫配置项所独有的同学我问一下,就是这块儿来走着,咱不是说了吗?这两个人是配置项,你没有办法说改个名往里边塞人没给你提供是不?哎,所以说前三个同学我们就看一下是吧,来setup before,还有然后你再往下看,各位,这就有意思了,On before mount啥意思?挂在之前,Before mount啥意思,挂在之前,哎,UN mounted啥意思,当挂载完毕的时候,Mounted呢,也是挂载完毕的时候,你发现谁的优先级更高一点,好像带on开头的同学,你看他俩是不是都表达的是挂载前,他俩表达的是不是都是挂载完毕,那你发现每一次带on都在前边,包括什么,包括更新的时候,你看on before update,然后是before update啊,On updated完updated是不?你给它切走的时候走,你看啊啊啊,是不是一直在前边,哎,所以说我们发现了一个规律,就是组合式API里面写的生命周期钩子的。
21:17
执行时机要比用配置像写咋的快一点,但是同学这儿呢,我就直接说你这个东西对于真正开发来说挺无聊的,挺无聊的,各位你说谁会这么写代码呢?说我在这个mounted里边呀,我去写逻辑,然后呢,我收尾的事儿啊,我要偏要在这里边写这个on昂,Mountain里边去写逻辑,同学这一般不存在是不那样写也乱呢,要么就都用组合式API,用生命周期钩子,要么就都用配置项去用,好吧,各位,诶那回到这边就把这些呢,整个就都说了一下啊,这个图呢,各位反正我觉得啊,你要把VIEW2能记住,这边呢,你很轻松就记住了是不?各位一再强调各位啊,这是三真正的生命周期图,确实是人家官方画的,对不对,我也不能骗你,你自己能找到那个网站去看,所以说这些东西同学其实依然可以写的行不?哎,组合式API只是有这么一个手段而已,好了各位,那把这个呢给它。
22:17
听一下吧,走名字呢,是11,哎,下划线src叫做生命周期,OK,说白了,这一小节停。
我来说两句