00:00
大家好,我是学习园地的特约讲师高沃峰,上节课咱们学习了导航首位,那导航首位呢,主要是用来通过跳转或者取消的方式来首位导航,可以分为前置首位和后置钩子,那在跳转之前和跳转过去之后,那来处理一些事情,那导航首位呢,可又分为什么?又分为全局的,单个路由独享的或者是组件级的第三种,那其实呢,我们学完导航首位呢,那我们的路由也就差不多了,那这节课呢,再给大家补充一个知识点,也就是我们在使用路由的时候,那。经常需要跟这个keep和live来配合,那这个呢,是咱们前面讲过的,咱们前面呢在讲呃组件生命周期的时候说过组件生命周期其中有八个生命周期,但是呢,我们如果使用什么,这两个生命周期加起来是十个,那这个呢,就是keep LA缓存组件,一个是租组件激活时调用,一个是组件停用式调用。对吧,不然的话,我们每切换一个页面,那所有的组件都要重新创建一次,那我们来看一下是不是重新创建一次。
01:04
来,我们打开这个页面,我已经把原来的程序给你备份了一份了,那我们再回来重新写现在的程序,这个打印的东西我就给你复制掉,咱们现在啊,不需要,不然的话,这个页面来回打印的太多,对吧,我们就分不清了,那比如说我们现在是没有配合这种缓存来使用的,那没有配合缓存来使用的话,那我每切换它都会重新创建和销毁,那我就写生命周期里边的创建和销毁这两个,你比如说在呃,关于页面在这里边创建的时候,这块我们这块写一个,比如说。啊被创建,也就是这块写上是ABAA组件创建,当然创建了不一定是挂载对不对,那咱们还有want挂载那些东西,第2RO。嗯,打印一下,然后呢,还有销毁,销毁我们,嗯跟VE2版本是不一样的,那个是用这个呢,是嗯,Want销毁来我们在这块写上。
02:04
Abou。T组件被销毁。教会。链LG打一下,那这个呢是创建和销毁,那么每个组件都会有这样的生命周期,我只写呀,因为它有八个嘛,对不对,那其他的我就不写在这里面了,只要你看见看一下这块。等会我们加上组件被创建,组件被销毁,加上这个钢线给我们区分一下,然后呢,我们在后面组件里边,我们也加上这个。那这块只是我们改成home home home这块我们改成home home组件,Ho。这两个,然后呢,我们还有呃,用户user这块,那我们也在这里边,这个标题呢,我们就不要了,直接复制粘贴吧,然后改成user。这块没改成U。啊,后上吧之后。啊,Home,这里边我们也加上官方线,看到它的一个变化,然后我们再找一些子组件,比如说Y配置,这里边我们也加上这个有计算属性,下边再加上这块是呃,MY配置邮件对充电。
03:16
MY配置一件小,这个是子路由下边的加载的模板,对吧,那我们现在加上这个,你看我们刷新一下。你看组件被创建对吧,那我们离开的时候,你要点首页,那优组件是不是被销毁了,我们home组件被创建了,点关于我们,那么我们home组件被销毁了,这个组件被创建了,然后这个这个个人中心,你看个人中心的时候,User组件被销毁,User组件被创建。对吧,那当我们点击这个组件里边文章配置的时候,我们再点回文中心来,我们看一下,你看MY配组件被创建被销毁,对吧,这些呢,都会触发生命周期,也就是现在要跟大家说的意义,就是我每切换一下,它都会销毁和创建,是这样的过程,那我们配合缓存就可以解决这个事情,就是keep alive,就是keep是保持生,保持alive生命嘛,保持生命这样的,那在V2里边,如果我们家keep alive是这么加的,你看我们在APP里边。
04:14
在一个地方加就行了,这个你看这里边和这个配合的时候,因为所有的组件都会加到这个视图里边,对吧,那如果在嗯,VE2里边呢,我们写法还是比较简单的。A,你看直接把我们这个放到这里边儿就可以了,就可以了。那放到这里边就不会触发创建和修改,但是你现现在你们放进去了,你看组件还是创建还是修改了没有效果,而且给我们一个警告,看到了吗?给我们这么一堆警告,告诉我们不能备用啊,这个东西对不对,已经换成插槽的这样的一个方式了,对吧,换成插槽的方式了。等会。你是?也就是告诉我们这个在VE3里边,我们不能这么用了,VE2的时候这么用,那换成插槽是怎么怎么换的呢?比如说。
05:05
我们找到我们的呃,路由器,我们往下把这滚动条你看从V2迁移到VV3的时候,那它就有提示里边的V2和V3的一个变化,那这里边变化里边其中就有一个你看。这个。这两个都是,这两个都是VIVO的内置组件,这个呢是路由的内置组件,那现在咱们升级了,升级了呢,就得改变,那就把刚才那个代码换成这个代码,也就是我们的。这块这是VE2的一个写法,我们把它去掉,现在呢换成是VE3,换成这种模式了,你看啊,它呢,是把这个写在外层,然后用插槽的方式把这些东西对吧,放进来,把组件放进来是这样的,这有一个转换,然后呢这块keep LA,然后这里边儿这样一个组件。他们觉得在不在那不用理解这个意思,你就记着换掉了就行了,对吧,把这种方式换成这种插槽的方式就可以了,那换成插槽的方式,我们这回再来看一下。
06:00
来,我们返回到这儿。我再回再刷新一下。你就没有。对吧,没有那些东西了,但是组件被创建了,因为第一次访问创建,比如说访问首页有的被创建了,关于我们组件还是被创建,那个人中心组件还是被创建,对吧?那点击这里边某一篇文章,组件还是被创建,但是呢,它有销毁吗?没有销毁了,对吧?只是有这些创建,那我现在再返回其他的,比如关于我们对吧。你看没配置那块效果。你看这些里面有微销毁吗?只有这个被销毁了,对不对,其他的没有被销毁。因为其他的里边你看,假如说麦片没销毁,因为里边是子组件,子组件我们在呃,User这块。呃,是在子组件user里边这块这个位置,我们把这个位置也换成写法。你换一下啊,重新刷新一下。你看user组件被创建,然后呢,里边文章组件被创建,对吧,然后我们再回到这个页面。
07:00
再回来啊,当然有一堆复试,这个没关系,里层其实是不用加的,底层是不用加的一床电,但是呢,我们再点击这个再回来对吧。如果怎么样,下边没有打印什么这个销毁的对吧,只是告诉我这个重复重复使用了,所以这里面这层加不加,加不加都可以。那我们在一层这块。你把这个去掉吧,再回来。不然的话,这一大堆注释。看不出来,你可以在里边加上。那我们现在就在外层的这个地方,把这些都加上了,对吧,换成这个了,那换成这个它就会触发另外两个事件,不会触发销毁了,那我反复调用的时候,你看都没有创建和销毁,都没有创建销毁,个人中心也没有创建和销毁,对不对。那没有创业效果,也就是呃,刷新的时候第一次它会加载对不对,你看我刷新的时候第一次都会被放电。第一次都会对创建啊。都会被破灭,但是呢,你看到有销毁吗?不会有销毁了,对不对,我现在再删掉它就。我有这了,那现在。
08:01
他会处罚什么呢?会处罚另外一个生命周期的一个方法,那我就要再加两个生命方法,比如说在这个里面,呃,关于里边。这些里边我们一个一家他会处罚这个这个方法。也就是激活我们找一下啊,这个打。这个方法直接过来。你看创建和那个没有被触发,但是这两个方法会被触发,它缓存被激活,这个是哪个缓存,我们加上AE,然后加上井井号那个区分。然后这块A。A Bo,景景这好像多了个U啊,这个无所谓,这只是一个提示啊,然后这个里边。当然这个下边没有就不需要逗号了,然后我在后里面我们再做一下。Home里面我们这块再加上两个,我们改把这个改成home ho。我。Home home,然后我们再到还有哪个我们加了用户这里边对不对,User这里边。
09:02
User,这里面我们再加上这两个方法。非常优。这个我们也换成user,好,我们再把这个打开。但这有错误,应该是我们写的时候错误,现在没有错误,你看,然后点首页关于我们,你看再点这个页面,再点这个页面,那我们现在把这个重新删掉一下,那你重新看一下,现在缓存着了,标点首页的时候你看。User的缓存的给激活,那我从后面这边过来的,你看缓存的组件对吧,激活是调用啊关于我们。对吧,现在是调用,这不调用创建那个证明我们组件没销毁,那这个组件激活的时候会调用这个,激活之前会调用这个,对不对,那这个组件停用的时候,到别的地方,这个组件停用的时候才会调用这个。是这样的一个情况。那我们在这个,呃,咱们在前面讲这个keep live的时候呢,Keep live的时候呢,还有两个这个面讲这个呢,使用的值是正在表达式是干嘛呢?这是让什么组件缓存,这个排除什么组件缓存,那假如说我在这个页面里边,我就想这个关于我们我不想给他缓,我就想缓存首页和个人中心对吧,那关于我们我不想给他缓存。
10:10
对吧,或者其他的我们也没有缓存怎么办呢?那我们就可以在这个地方,也就是在。我们的这个地方加上还有include就是白名单对吧,你包含什么样的什么通过,那还有什么黑名单排除排除什么呢?A是组件名称about对吧?只要是遇到这个组件,那我们就不缓存这个组件,那我们在现在来看一下,刷新一下。啊,我们点首页。关于我们个人中心对吧,你清楚现在的重点,比如说点关于我们点击的时候,你看又被创建了,对吧,用户这个是停用了,然后在首页。对吧,这个组件被销毁,它不会调用什么,再点击这个组件的时候,它的组件又被创建,所以它没被缓存,那如果我这里边让用户也不缓存的话,加个逗号。User。就行了,你可以写多个,那我现在假如说就排除这一个,那我就写这一个,如果多个用逗号隔开,逗号后边尽量别和空格啊,因为它是正个匹配的模式,有空格的话,它会认为空格右色什么上不行,所以呢,通过这个可以排除一些组件,这是没问题的,所以因可录呢,就包含就行呀,因为它正好是取反的嘛,那边名单这样的一个形式。
11:16
那我们现在再来看一个例子,什么例子呢?你看既然都缓存了,你看我们首页的时候。关于我们个人中心,再点个人中心的时候,我点击这个文章对吧,个人中心这个文章,那我现在再点首页。我再回到个人中心,你看。不已经被缓存了嘛,对不对,当然这个组件被创建被销毁对吧,咱先不管,这个组件就在user侧这里边,那我们能不能保持原来的状态呢?当然里边你再加了一层就可以了,你看没有回到这个状态,你再点一下,我点的是这个第11篇文章ID11的,再点首页,再到个人中心,你看又回到了默认状态,我想让它保持到这个状态,感觉像缓存一样。怎么保持这个状态?那就是路径的一个问题,对吧,看一下我们怎么怎么去用啊。首先呢,先要确定什么呢?我当我鼠标一离开的时候,也就是从个人中心点击这个地方,对吧,我一离开的时候,当然我是下边这个模板变化对不对,那就得在UC这个里面,那当我一路由一离开的时候,我能不能找到离开这个路由。
12:18
如果能找到离开这个路由就OK了,那我们就能做到,那怎么找到这个离开的路由,因为我们并不是缓存这个模板,是整个这个模板,你给它缓存对不对,那怎么办?我们是不是学过。刚学过什么,我对一下啊对一下,你看咱们学选举首位的时候对吧,导航首位的时候是不是学过这个路由离开对吧,在进入之前和离开的时候这样的一个情况,那我们因为就只处理这个组件,所以呢,刚说它有呃路由独享组那个首位和。呃,全局守卫以及组件内的守卫对不对,那我们就找组件内的守护,组件内的守护,那这里边儿有。咱们想离开这个组件的时候,把它的路径拿到对吧,进入的时候再设置这个路径,不就保持这个状态了吗?所以呢,我们得使用这个离开谁的首位,然后呢,它是一个方法,它不是一回调看到了吗?这里面。
13:11
那我们正好也复习一下上节课的一个知识,我们在user里边这块加上什么呢?加上一个。Before,呃,也是离开,我离开的时候,也就是从这个user,这个导航,我们切换到比如说关于我们或者切换到首页的时候离开这样的一个过程,那离开的时候我们这里边有一个to和一个from,这个上节课说的这时from总写错。它是一个方法对吧,在这里边,那离开的时候,我们就能够获取到离开的这个什么这个路由对吧,我们打印一下,嗯。不见,那你看从to这里边是不是我们能找到一个什么。啊P啊FUL全的路径PH对。那我们是不是就能找到这个全路径。来我们打印一下在这块,当然我们现在写的是小条,就刚才是中间那个。
14:04
保存吗,你看。现在在个人中心对吧,现在点的用户,我们现在点文章一的时候,对吧,现在我从这个路由,我现在又离开,离开的时候是不是就会做这个后置钩子对不对?路由离开的时候会掉这个,那离开的时候掉这个我们。呃,比如点首页。离开了对吧,这里边儿怎么怎么打印。重新点一下个人中心里面。点击这个。然后呢,我们现在离开它。离开他这个是一个。嗯,斜线。之后你打人的时候,我在前面再加几个。这。嗯,大纲线嘛,这样能区分开,不知道不知道在哪打印的对吧,点击这个,然后呢,我现在再离开它。结果离开你看打印的是这个对吧,我们是从根过的,那这块应该是从from离开的时候,FROM过去,它的离开的上一个路径,对吧。
15:08
不是目标的路径。来个人中心点击,然后我们点击首页。你看是不是原来的路径就保存在这了,对吧,就能找到我们原来路径,那我们在记录的时候,你就激活这个组件的时候,激活这user组件的时候,那激活U组件的时候,是不是用这个方法,我们在设置这个路径就行了,所以呢,我们在date里边。这块date里面,嗯,我们这块再加一个,比如说加一个pass PH PH pass,那默认的就是的是USER1进入的时候,是一个user这个组件,然后我们在只要是组件一激活,这个组件一激活的时候,那我在这里边。坚持离开的时候,我先把这个路径把它改掉,那我们改成什么呢?让这次里边的pass等于from里边的FM,里边的什么呢?呃,全。就把这个路径一离开的时候,就会把它付给他,一离开就付给这个路径,那付给这个路径呢,那我们当地组件一激活的时候,是调用这个方法激活的时候,对吧?那如果我们不是从这离开的,重新改变变量的,那激活的时候呢,我们就要使用这次里边的,我们使用路由里边的。
16:19
就是VI里边全局使用路由器RURU,别忘这是路由里边是不是有个push的方法往里加路径呢?加什么路径呢?This pass。对啊,如果我不离开,直接进来的时候,默认将的是什么这个优三的路径对吧,那如果我离开的话,是不是把这个pass付给那个全局的一个变量对吧?付给它,把它就改变成什么,改变成我们负责这个值了,然后这块我再激活的时候就用这个值,这样的话就可以保存状态了,来我们点首页。点一下个人中心。点个人中心,我先点这个文章三,现在就把这个对吧,付给他,当然得我得路由,再点别的地方,离开的时候就把当前这个让我上一个付给,呃,这里边的变量,现在我再点首页。
17:00
你看我再点个人中心。没有被。首再点一下首页,再点一下个人中心,没有拿过来就看这里,边上只要点FUL。Rog打印一下这个,我前边加上一个皮肤。好加好。加一个符号。错误看是不是我刚才没写完,保存错误点击这个。组件被销毁,然后我们看一下。个人中心。我离开他的时候点首页。没有宾语。啊,这是总数。刷新一下,在个人中心里边,我点击文章,然后呢,我现在离开,你看离开他到首页里面。
18:00
这块路径已经保存了,对吧,已经保存到我们的pass命令了,那我们再回到个人中心的时候,再点击个人中心的时候,因为这个已经是被改掉的了,对吧?已经是被改掉的话,那我们激活的时候,这一次里边路由20里边追加我们这个路径应该没问题,它就会跳转到这个地方。点击,嗯,我们试下个人中心,你再回来你看就可以了,刚才不知道为什么不行,你看我再点首页。再点个人中心,你看它就保持这个状态了,我点击文章变成11,我点击首页再回来就会保存这个状态了。看到一直保存这个号。然后再点击个人中心,它又重新回到首页对吧,再点击这个保留这个状态到首页,再回来又回到这个状态,这样的话我们就可以保留这个状态,用到的就是这个K列这样的一个方式,但这种功能看大家需不需要,如果需要的话就可以用这种呃技巧的方式去做,如果不需要的话,那你也不用去太多理解这块用到了什么后置钩子对吧?全局首位的呃,组件内的首位对吧?导航首位中组件内的首位的那个后置钩子,咱们去应用的这个。
19:06
啊,基本上这节课内容就差不多了,那讲到这儿呢,咱们跟路由相关的也就差不多了,嗯,如果后期有一些没讲到的,当然这些在开发里边应该是够你用了,那如果有一些没讲到的,咱们在做项目里边还会用到,那咱们在做项目的时候,我会再给大家补充一下,呃,如果用不到的话,咱就不补充了啊。好,谢谢大家这节课。
我来说两句