00:00
大家好,我是学习园地的特约讲师高若峰,上节课我们了解了一下插槽float,那插槽呢,可以实现组件的扩展性,是非常好用的。比如说如果你设计两个组件,这两个组件中有50%以上,当然这比例你可以自己看啊,有相似的或者有共同点,那我们就提取这个共性。保留它的不同,那使用插槽就可以了,你不用设计多个组件,而使用插槽呢,可以设计一个组件,也可以让它有不同的组件的功能,这就是我们插槽的作用。那这节课我们再来看一个跟组件相关的也比较重要的一个概念。V3中的组件的生命周期函数,那为什么说V3呢?因为它跟V2还是有一点点区别的,其实区别不大,就是换了两个函数名,个人认为啊,就是换了两个函数名而已啊。那什么生命周期,如果你接触过一些其他的语言,好多语言框架里边其实都带生命周期的,你比如说呃,JAVA1对吧,这里边呢,都会带生命周期方法的,那方法和函数呢是一回事,咱这个就不纠结了,有的叫生命周期函数,也叫生命周期方法。
01:03
那什么意思呢?就是在。一个对象或者一个实例,在它从开始创建到最终销毁整个生命中,会自动根据不同的情况会自动调用的一些方法就是生命周期方法,或者叫做生命周期函数。你比如说我们对象中的构造方法,是创建完对象之后,第一个自动调用的方法,那比如说西过方法,那是对象销毁之前。最后一个自动调用的方法对吧?那你说了,在生命周期里边有好多自动调用方法,比如说在我们组件中,那组件它也是一个有生命周期的,那对组件的生命周期当中,它有十个函数需要会自动调用,但十个函数你根据情况去使用,不一定会十个函数你每次都写上去,对吧?用到在生命的不不同的时期,用到哪个函数,我们再写哪个函数,是这样的,大家得知道都在什么时候调用。就可以了。那生命周期都是自动调用,都是在某一个情况下来帮我们完成自动调用,它在里边咱们写一些逻辑,让系统自动帮我们完成的是这样的一个功能。
02:09
那我们看一下为有生命周期中有这么多,那比如说我们的一个实例,比如说APP,对吧,你可以把它呃看作是一个组件,就是某一个组件,那这个组件我们在APP创建,然后挂载的时候,那相当于我们这个组件就开始生成了初始化了,对不对?那组件在创建之前会调用before create这个方法。然后创建这个实例,这个组件实例,创建完组件实例呢,就会调用这个实例,创建完成就会调自动调用create这个方法。然后开始初始化我们组件中的模板,对不对,那模板最后在挂载编译完之前,注册之前。那我们就用一个before。这样的,呃,一个方法,然后在模板初始化完之后,会教一个want的一个方法,这个方法是我们经常用到的一个,你比如说模板都编译完了之后,在页面相当于已经渲染了模板了,那但是模板中的数据我们用差值的方式或者是规范报的方式绑定的是一个变量,那这个变量的数据呢,是我们得通过访问请求接口,网络请求接口把数据给我们返回来,你想想我们。
03:14
这个时候需要在哪做呢?那肯定是模板都已经编译完成了,对吧,我们再通过want方法在这里边自动,比如说请求服务器,把服务器的数据拿过来,对吧。然后我们在mount里边把这个数据放到我们data里边,那就相当于形成了一个小模式,那模板里边数据就变了,我们页面里边显示的数据就是服务器中数据库中的数据,所以呢,在网络请求的时候用的非常的多,那有可能生命中心函数里边其他的你可以不知道,但这个不能不知道。不再有。在模板中,在模板中还有一个什么呢?就是在我们这个组件中,组件的模板里边如果有改变,模板有改变,你哪怕是对的数据的改变,或者是TM内容的改变,只要有改变就会叫什么before update。那改变完了之后,会自动调用update。
04:01
然后在卸载之前,卸载之前也就是这个实例,卸载之前会叫before you want,那都卸载掉之后会叫什么?这个帽。那这么多八个12345678,当然还有有结合keep的六这个缓存使用的,一共加起来有十个生命周期方法。那我们来看一下这十个收集方法,一点一点给大家演示一下。你可以在我们的,在我们的,我还是拿这个例子举例吧,我写了这么多模板,每一个模板就是这么多组件,每一个组件里边都可以加十个这样的方法,当然了,这十个方法你可以选择性的去往里加,跟顺序也没有关系。明白吧,那我这里边就尽量呃写一下这个顺序,按照咱们它执行的顺序去写,那跟顺序没有关系,跟写在哪个模板里没有关系,你看那我就先比如说呃,APP这个是根据点,我就不在这里边了,比如我在这里边去写,每一个里边都可以写十个这样的方法都可以去写一下。当然你写一个写两个不写都没关系,都是可选性的,它和我们的date,和我们计算属性,和我们的处理方法这些组件它们是平级的,因为生命周期函数得定义在我们谬实例里边的,谬实例里边这个option option这个参数里边,那我们现在写组件的这个里边,这个对象我们导出去的对吧,就是这个参数,所以要需要写在这里边,所以跟A它们都是平级的,跟写的位置也没关系,因为它是阶层对象的格式,对吧,只要用逗号分格就行了,你比如说。
05:30
我把这个拿过来。啊。诶,我们就可以看到这几个句型啊,有这么几个,一个是before。Before for before在创建之前调的一个这个。你比如说创建实例之前。Long table创建实例之前。自动调用。这个自动吧,自动调用,然后调用哪个方法呢?B for调用哪个方法。
06:07
呃,我再用个ID区分一下,这样能看的出来一当然和我们这个序号没关系啊,我只是用ID区分,不然都是文字,有可能你会看串行,所以呢,我们加这个区分一下。然后我们实例创建完之后会自动调,为什么呢?你看假如说我现在就写这一个,那我们现在运行一下,刷新一下,你看。实力创建之前不是之间啊。之前自动调用。你看实力,创业之前自动就有,然后我们再写C这个。后边不要加搞哈,我们阶层格式得给它区分开。我们再写一个加个二。实力创建。完成。完成自动调用,我就不写自动调用了,它都是自动调用的,那就是CTED调用这个方法。你看。
07:00
当然这块是换行啊,实例创建完成也就从上往下,我们指的是这个实例,我现在当题写的这个创建完成自动调用对不对,那自动调用之后,我们下一步是呃,挂载B缝,因为我们每个页面是不是创建完实例,是不是只是创建完实例,是不是实例里边我们还有这个模板呢,对吧,这个模板编译之前。就是模板都处理完了,渲染完了,但是呢,有个编译的过程。所以李缝模板编译之前for,呃。通过这个模板编译之前,Rog拿一下,这里边我们也用句号三吧来区分一下。模仿。编译之前要用be for moment,我们调用这个方法。然后还有一个模板编译之后,这个我们说最常用的对吧。也就是这个模板我们都编译完了之后,对吧,相当于都放到我们实例里边去了,也就模载都挂在上了,那这个时候我们就用这个模载都挂载完了,你想在这里边我们请求网络数据,把数据更新data,然后想是页面模板变化是不是这样的一个流程就可以了,所以这个方法用的是最多的。
08:16
模板。编译。完成要用的mountain这个方法,等会标要带逗号,不让它出错。你看模板编译完成这几个都会自动封建,那再有是数据更新之前只要是模板上面有更新。FF。Be啊,不对,更新rog方法,名字是固定的,你不能随便起名啊,因为它必须只有这个名字对对应上了,他得找在生命周期的时候找到对应的名字才会去执行,那这块我们来一个也是用一个句号来区分。五区分。这块是模板更新之前。
09:05
更新之前,然后我们还有一个啊直接啊。Up。你看这个名称。啊。还没有提示我。2.t。D。哦,这个符号写错了。啊。我们后边都加上这个逗号,然后。内容就是模板内容更新。完成要用的正好加一个六。后边我这方网名就不给你写了,那什么叫模板更新完成,你比如说我们在这里边刷新一下,现在刷新的时候呢,这个生命周期不会调用,因为我们模板现在是没有更新,对不对?你比如说我更新里边的date数据,你看点击这个就是更新,你看下边五六被调用对吧,更新,那假如说。
10:08
现在删掉,假如说模板我们这里边有变化了。我这会回撤,他这个是不是变化,这个不是变化。你看模板变更新对吧,有变化了,显示两个标题变更新了对不对。这是被更新的时候会自动掉这个。那还有更新完之后,如果按照咱们这图写的话,还有销毁对吧,Before。用want进来之前,你看在V2里边用这个第词这个呢,现在不用了,给我们画这个下了,对不对,在V3里边使用这个。so.g。这里面我们写上嗯,七。模板,嗯,就是这个实例,应该是整个实例了,不光是实例中的模板了,实例在呃,销毁之前调用。
11:00
然后还有一个逗号。还有一个UN want加这个这块不用加逗号,这八个原生的。这块我们再看一下实力销毁。完成调用。这里边我们现在写在这个组件里边,写在这个组件,也就是呃,这个区域的外层组件里边,在这个组件里边呢,我们没法演示这个销毁,没法演示销毁对吧?比如说我们把这个组件会销毁中,中间的一个组件销毁,那哪个组件销毁了,哪个组件会掉这个对不对,所以把这个复制一份,因为哪个组件比较危险嘛,对吧?那比如说我写到这个组件里边,教会我这块变成。啊,七井井井九对不对,八井九跟刚才那两个组件我有一个区区分。区分,那什么是销毁呢?比如说我们在这个里边。
12:01
我把它做成一个。咱就拿这个组件为例,对不对?我们用IF2有个V-show v-show它不是销毁,记住它不是销毁,它是用样式display了对不对,它没有销毁掉,那we-if这话正好能也能说一下它的区别,那这里边我们it show,你比如说这个值是真值假值,那它就会销毁,那这话show的话,那我们在这个里边贝里边我们就得加一个。Is受默认我们要的是真值,默认是真值,然后呢,我们加一个按钮,这个下边我们再加一个按钮吧。B,然后b to,比如说我们销毁。销毁谁呢?这个组件我们叫做con销毁它,然后我们这块来一个click加个事件,让我们这里边A数怎么着取反。取反。叹号aso,这样就可以了,来,你看一下,我们刷新一下。
13:03
这里边都没有实力在做,对,你看这多了一个按钮,我先点销毁。是不是隐藏了一个,你看七八是带井号,这个也就是在这个里边的,你看在这个里边的这两个执行了,因为这个带井号对不对,那现在我再让他重新再创建,再点下销毁就创建回来了,对不对,然后你看在创建是不是这个属于模板又更新了,又要更新对吧,又要更新,但是呢,这个模板销毁,但不是实力就整个这个底层的一个模板销毁了,对不对,所以这块。会走这个,当然我这里边没写创建,如果写创建的话,这里面还会有创建的那些东西,对不对。你如果我这会改成V杠瘦就行了。这个位置如果改成微观数。你看V杠受这个指令。一样,我们可以达到隐藏和销毁的这个隐藏和显示的效果。对吧,但是用的是display,你看下边就没有什么,就没有把我们真正的销毁,只是数据更新,所以呢,我们只有用V杠,什么V-if它才是把这个模板去去掉,你可以查看元素销毁的时候,你会看不到这个元素。
14:09
看不到这个元素,那我就点击的显示就出来了,是这样的一个过程。那我说不还多两个呢吗?多两个有一个叫做缓存的一个功能,什么叫缓存的功能呢?比如说。这两个我们用keep live,这个是缓存组件,缓存激活式调用,什么叫缓存,比如说我的组件已经销毁了,这组件已经销毁了,它会什么样的一个效果呢?你看啊,我现在再改回V-E才可以啊,啊现在是V-if。我们刷新一下点击。计划点击销毁。看一下。再点击出来没变化,那如果我让这个数据加加。你看这是七,这是七对不对,我现在销毁来创建,是不是相当于新创建的一个组件放到这来的,是不是这样的感觉,所以里边的数据是不是相当于都清空了。没有缓存对不对,你看。
15:02
是不是?那如果它有缓存的话,相当于这个组件给我们缓存上只是不显示对吧,那比如说就跟微康寿一样。这个呢,它不是销毁组件,所以数据它会保存,这块不是重新建。你看我们点击这个,你们点击这个组看不见这个数据在大嘛,你看我销毁再回来,你看数据还是三没有变化对吧,而用微杠意思违章意。这样消费的时候呢。啊。过来大家看。教会。啊,它是有变化的,有这样的一个区别啊。那加的时候每个组件有不同的数据,虽然这两个组件很像,对不对,是一样的组件加载了两次,但是呢,这个每个组件里边有自己的数据,它是变化的。当我们改成微杠一的时候,它的变化,那我们如果把它加上缓存,加上缓存就好了,比如说。你看我还是微观衣服,现在我我再让你看下效果啊,我现在这个组件我在添加的时候。你看再加数据的时候,我现在销毁它是销毁了再显示它会变成零,没有缓存,那如果我在这块加上这个,把这块加上一个KEP-a live加上这个标签,把它放到这个里面去。
16:14
放到这里面去,那我们现在刷新一下。你看刷新一下。我先把这个数据加回来,你看我现在销毁带回来是不是还是三相当于从缓存里边又拿过来的,这就是缓存组件,也就是KEEP6这个缓存组件我们经常用的不光是在我们页面里边,比如说呃,Table切换呐,对吧,那个选项卡呀,缓灯片呐,这些东西我们都需要缓存那。我们通路由的时候,多个页面之间,我们也会经常用这个,接着它有缓存的作用,不是给你销毁了再重建,而是相当于缓存起来,所以呢能提高我们的效率,那有了这两个,它会自动调用我们这两个方法。用那个。那我们把这两个写上,你看写在哪呢?因为我们缓存的是哪个,是这个组件,所以呢,得在这个组件里写啊,不是外层组件里写,在这个组件写,你看啊,叫做激活AC,还有这个。
17:10
那。通过K-AV。缓存之前。要用。有用。Rog。然后还有一个。这个。下边加上。缓存数据归附。调用。L。这块我们前面也加上景顶角,嗯,加上几个艾福吧,让你看到这个变化。啊,如果我不加这个的时候。
18:00
哪块有错吗?嗯,没写错呀。你看这块是不是我们这块写错了。对,没错。为什么下边有错误发啊,没有了你看。我们现在销毁。啊,我的数据恢复要这个。对吧。那调用了这个,它就不会调用谁啊,因为有缓存,有缓存就相当于组件被销毁,所以相当于组件被销毁,那这两个就不会调用。看到了吗?这两个就不会自动调用。如果不加这个。你看啊,那就是销毁了对不对,就没缓存,没缓存的话就会调用什么组件被销毁的那两个方法。你看带井号的,看下边带井号的对不对,销毁之前。所以这边要知道这样的一个。嗯,区别。不是回复。恢复这我们来把这个标签加上,嗯。
19:03
这样的话,你看我们销毁。就会调用这个,你看在这个符号的对吧,恢复调用,否则之前调用这两个方法。在恢复缓存。这会啊,这俩我是不是写反了,缓存组件激活时调用激活时就就有了,停止组件的时候调用这俩我写反了,那说明我写反了,你这个你再看能用这个就行。那现在我们还有一个知识点,也是跟生命周期相关的,生命命周期,一共这十个方法,在任何组件里边都可以写,对吧,跟顺序没关系,你如果其他记不住,你记住这一个对吧,也够你用了,还有一个这个。这四点到T这个是干嘛的呢?这个也是我们经常用的。你比如说它呢,是将回调延迟到下次盗墓更新循环之前执行。这个方法可以用在任何我们的options这个方法里边,也就是在我们这里边在。
20:00
这些方法里边。任意的方法里边去使用也可以,在这些方法里使用都可以,如果你不好理解它是干嘛的,你就记着相当于一个它是盗墓,你看延迟到下次盗墓更新之前执行,在修改数据之后立即执行化,对吧。也就是相当于一个延迟执行,但是这个延迟呢,不像我们说你自己如果用set timeout1秒设置一秒钟,那是有固定时间的,它呢也是延迟执行,但是等这个数据都更新完了再执行,没有这个时间的。也是一个延迟,当然有时候他也跟set time time呃,Out可以配合使用,你比如说我们这里边呃。假如说我在这里边儿用上。嗯。这样吧,我在这里边加一个表单。加一个表单。嗯。在这个里边,我看哪家比较好。把这个也发过来,这有个显示数据零。在最下边。循环。
21:01
加加加加后边吧,就在这吧,加一个,比如说input加一个表单。那加这个表单,你看我们在加表单的时候,不管是销毁还是出来订单,假如说这是个用户名,那我们一般呢,是不是让他有一个。默认的一个焦点呢,做登录退出的时候对不对,通常我们这个让它显示默认焦点的时候,我们去通常这个方法模板都加载完了之后,然后放上一个焦点,那我怎么在程序里面找到它呢?我们用I if,咱前面也说过对不对,用户内那你可以I可以代表这个元素,访问到这个元素的任何东西。那我们前面在前面的例子中也用过这个if,比如说组件之间传值的时候用过这个。通过它去全值,它其实还能。当我们在程序里边操作的盗墓元素。那么现在你比如说我切换回来,那组件在激活的时候。这俩方法走计划,你看组件激活时调用,停用时调用对不对,我是不是得在激活时在这里边调用啊,在激活时候,那我在这里边,当然我可以直接写啊,直接去。
22:02
嗯,直接比如说我们用这点高refs.username是不是找到我们那个表达了激活时,然后在这里边我们fos用倒的方式给它加上这个节点。这样的话,我们在刷新的时候。你看这有了,那我们现在点别的现在没有。然后销毁掉再回来,你看因为我是在激活的时候用到它,是不是,比如说这是一个血卡切换,切换回来将它有焦点对吧,切换回来就它有焦点是这样的,但是有的时候呢,我们比如说网速啊,或者数据到改变数据比较慢,没等加载完呢,如果你就直接获取焦点了,有可能把原来的数据清除掉,对不对,所以呢,咱们想延迟执行一下。延迟执行一下,你假如这里面数据有变化,咱现在不太好模拟,因为咱都是本机的操作速度比较快,那有的时候呢,数据从网络请求啊之类的,对吧,一些盗墓的一些发生改变,那动策的在改变之后再去执行它,最后执行它。所以跟写的位置没关系,比如这里边我们有盗墓操作改变十个地方对不对,那都改变完了会执行,它是这意思啊。
23:04
执行什么呢?就是这一次里边有一个高福。ST,然后里边有一个回调方法,里边有一个回调法。这块。也就是这个回调方法。就是延迟执行。相当于。经常用到的你会自动调用,但是直行到这会调用,但调用的时候它会根据你的盗墓的嗯,编译完成情况去调用。这三边不错,都不错误,来,现在我们看青蛙回来。你看是一样可以的,有交点对不对。这就模拟一下后期,你记住只要是模板里边有一些延迟更新的东西,对吧,延迟处理东西都写在这里边,那我通常用到的一般的获取这个焦点。对吧,用户名登录的时候经常会使用这这种方式去完成啊,但有兴趣可以了解的,它还是挺复杂的,但是嗯,也挺难理解的,所以呢,你就记着一个,就是把它当成一个对吧,将这里边的回调方法延迟到下次到更新循环之后执行,就相当于一个延迟执行就OK了。
24:07
好,谢谢大家,这节课我们就讲到这里边。那生命周期函数呢,也是比较重要的,希望大家能理解,因为在不同阶段我们有一些就得通过。
我来说两句