00:00
好嘞,各位,那从这小节开始呢,咱们来学一个view里面特别重要的知识,叫生命周期,哎,同学一看,诶,老师,View还有生命呢,这周期又是指谁呀?现在呢,我们不去关注这个概念,一会儿通过一个例子,分分钟就把这个概念说明白了,我们现在呢,先去实现一个效果,各位啊,回到课件里面。页面上呢,有段文字叫欢迎学习view,它一上来呢,透明度是一,然后一点一点减小,直到它变为零,变为零的时候我们就看不见了,对吧,然后呢,它瞬间再把自己变成一,再一点一点减小到零,就这么一个循环变化的效果,OK。好,回到代码中呢,咱写写走,先准备好这段文字,HR欢迎学习。VIEW1上来透明度是一,我就直接拿这个style写了,因为我们也没有别的样式,这么写比较简单好一不能写死,是不是得变,变化的东西是不是交给view。对吧,然后我们把数据维护好以后,这个东西呢,就自动更新了啊,起个名吧,给那透明度,老师就叫N呗,一上来是一也没啥不行的,对吧,但是你写的好一点啊,最好还是叫OB啊,这里呢,同学有一个有意思的事啊,之前呢,讲课的时候同学告诉我老师用这个TMD,然后我就说不行啊,你得注意文明啊,说老师你想多了吧,我这个TMD的意思是透明度,哎呦呵,你要这么说呀,是我年轻了没理解好是吧,回来各位咱还用这个啊。
01:26
说老师那这一呀,就得改一改,那可不不能再写一了呀,老师明白,把它拿过来OB,你这就犯错了呀,动态绑定样式得有冒号里边的这些一组一组的,你得写成啥对象是这意思不?各位哎,这两个OB各有各的含义,这个是指那CSS的属性,这是指你数据的名,对不,但是巧就巧在它俩是不是重名,重名就是对象的简写形式。哎呀,说老师你这一波操作怎么没看懂呢?同学,我问你红色框里边啊,写的是什么呀?GS表达式吧,既然是GS表达式,是不是就得应用GS的那套语法规则,那我再问你,你这表达式的值是啥呀?是不是个对象,那凭什么不能用对象的简写形式呢?哎,这个点一定要知道啊,好了,来打开看一下效果啊,走一上来呢,肯定是一是吧,打开,嗯,在这儿呢,借助view的开发者工具呢,我去改一下,把这一呀给它改成0.5,好按回车。
02:21
半透明,好了,回来吧,咱们继续写,接下来怎么办?你就干一件事就得了,就是每隔一段时间让这透明度再减小那么一丢丢是不?那你看在GS的世界里,每隔一段时间,行了,我不说了,是不是循环定时器啊啊,同学说老师走了,Set inter,你这么写就错了,你琢磨一下,同学你看这。绿色框里的东西不是函数体啊,是一个对象里的内容,你怎么能直接写这set interval呢?里边不得是KY6KY6吗?哎,朱老师能明白,我这么写分号删掉,我这写一个A冒号,老师,A就是K,这就是Y6,嗯,是你写了A这个配置项根本不看。
03:00
因为view不认识这个A呀,是不啊,那怎么办?同学,你要是实在没办法就把它甩在外边去,你觉得呢,里边不让写,咱就写在外边嘛,反正开个定时器就可以嘛,是不是?哎,接下来啊,你得注意一个点,就是定时器的频率和每一次透明度到底减小多少,你得琢磨好,得配合好,配合不好页面的效果就特别丑,我跟你说一个极端的例子啊,就是定时器的时间啊,我给一秒完了,每一次呢,我让那个透明度啊减一,你说这么写的后果就是一上来一秒钟之内页面没有没没有任何反应,哎,然后等了一秒钟,那透明度啊,由一减个1H就变成零了,一点过度都没有。啊说老师那怎么配合好呢,其实你下角可以随便玩,我这写一个相对来说大家能看起来舒服一点的啊,我给16毫秒。说老师你这频率可是有点快呀,这16毫秒没事儿,我每次减少的也小啊,每次减少0.01啊,那谁减少啊,是不是OB,那我这就得写它减等0.01,但这么写代码还是有问题,因为我触碰不到这个OB,你说对不?那怎么办?没办法的办法,你就收到一个VM呗,随后这怎么写呀,VM点是不是就可以了,但你这么写呀,还是不太完善,你这么写同学那东西呀,就一路的一直减小,不会再有切回一的过程了,是吧?那你还得诶写一个兜底的东西,就是VM.ob它不能一直减小下去啊,说老师我这么写吧,如果有一天它变成零,那我就把这个透明度啊。
04:32
重新的呢,给它变成一,你这么写很危险各位,因为我们知道GS吧,它不擅长去玩小数,0.1加0.2,在GS的世界里,它是不等于0.3的,所以说你这么写容易产生一个尴尬的情况,就是上一秒钟它是正数,诶变化了一次,直接奔着负数去了,越过了中间那个零,所以说啊,你要想写的完善一点,最好这么的,哎,小于等于零是不好了,回来看一下效果啊,你看循环变化,而且还很柔和啊,借助开发者工具你看啊,透明度啵啵啵在变是吧,哎说老师那你这功能就实现了呀,实现了是实现了,但是各位写的不完美。
05:11
你看看啊,绿色框里的东西是不是view实例,那你红色框是不是一个具体的逻辑,而且最主要的是这个逻辑啊,还在操作里边的数据,就有一种感觉,从功能上来讲,这个绿色的和这个红色的是扭在一起的,但是从你的代码层面上来说呢,它俩是割裂开的,我们追求的一个目标啊,是这样的,就是把这个view实例啊一折叠起来,所有你用到的数据呀,方法呀等等一些东西就都带走了,不至于说还得往外边甩逻辑是不?那有有同学就说说老师你这话说的你打脸不?你看那24行,老师你看看他干嘛呢,是不是写代码呢?同学,你听我说啊,我不是说你view这个东西外边不能再写代码了,能写分你写啥,你写这些东西就没什么毛病,那毕竟是一个全局的配置嘛,我不写这我写哪吗?我得先准备好,我再去new嘛,但是你像你这儿吧,同学,这就不太合适,是不是最好写在里面,OK,你像咱们讲那个自定义指令的时候,你看各位,我把这VM要整体折叠起来,那你说外边有没有代码也有,但是我这个代码都是服务别人的代码,你看我view.directive是不是带定义指令的,哎,你这些东西是可以写的啊,OK,也就是说呀,这定时器啊,写在外边不太好。
06:23
啊,还有一个地方啊,也不太好,各位就是你觉不觉得这个VM,其实你收到它的意义不大。就是要对V实例进行一些处理,尽可能在内部就消化了,如果想对V进行一个全局的操作,那你就v.V点就可以了,所以说这个VM呢,同学在真正开发的时候很少我们去收到这个东西,一般讲课的时候咱说哎,收个VM完了,控制台上VM点这个那个的,对吧,你真正开发很少有收到这个VM的,你非得弄一个中转变量VM在这VM点同学那不占用内存吗?哎,所以说同学终极的目标是VM,我不去收到,然后我把这定时器怎么着给它放里边,但是这定时器啊,我先不删,我给你写一注释啊,在这写一行走,叫做通过外部的定时器呢实现,哎,再写一个括号叫做不推荐,那能实现,那不太好,来吧,定时器复制放里边。
07:16
那咱刚才聊了,放里边不能直接写它报错呀,那怎么办呀,各位你记不记得我们学过这么一个配置项,叫做MYS,哎,里边是不是配置各种方法的呀?啊说老师那拿过来吧,你别激动啊,各位你不得起个方法名嘛,是吧,你比如说叫做change或者叫做Switch切换都行,对吧?然后你再把逻辑咋的写在里边呗,哎,给它粘过来,然后你再把这个缩进呢,给它调一下,而且这里边儿不需要再用这个VM了,用谁呢?This。哎,老师为啥你敢用this呢?我代码写的给力啊,定时器我很标准是吧,用的箭头函数,因为它不是唯物管理的,那唯管理的这个我很标准,写的是非箭头函数或者说普通函数,这样的话this指向不就没问题吗?好说老师这回也能切换,嗯,那你看看吗?
08:03
变不了了,为啥呀,各位。同学,你想一下啊,你的change方法有被调用吗?哎哟,可不嘛,说老师没调啊,那明白了,老师我写一按钮啊,叫做点我开始变换,同学,你违背了我的需求,我的意思是一上来它就开始变换,而不是我还得点一按钮,我知道你在写什么,艾福click啊怎么的?同学,我不要这按钮,明白不,一上来就让他开始切换,那咋办?哎,你就琢磨是我在讲生命周期,同学,我想让我讲的东西有意义,你明白不?咱得有思考的过程,说老师要不这样,嗯,你忍一忍,我还是收到这个VM完了呢,我原生GS啊,学过这个叫做window点啊onload就是页面加载完,诶,然后老师啊,我就这么写VM点儿,我亲自调一下不就得了吗?啊,很简单啊,你看功能也实现了,老师,对吗?嗯,同学,你写着写着是不是就写回去了?哎,这删掉吧,各位不能这么写呀,这也不能这么收啊,那怎么办呢?同学你想想啊,你觉不觉得啊,MYS里面你配置的这个change。
09:07
你要么把它作为什么呢,事件的毁掉,比如说点击了去掉它,鼠标划过了去掉它,要么你还一种办法去用这个change,什么办法呢?来也是之前在线下讲的时候同学想到的,说老师我教你一招,你这么玩啊,写个差值语法。把它拿过来加个小括号写完,老师非常好,说老师你看我给你分析分析啊,唯有一上来就得解析模板,一解析模板呢,就遇到了第20行,哎,发现这个程序员啊,要把change方法调用的返回值呈现到页面上,于是乎就帮我调了粉色的change方法,Change一旦调用就开启了一个绿色的定时器,OK,老师这不就完成了吗?而且老师还特别给力,我粉色的这个change是没有返回值的,也就说程序员没写返回值,既然程序员没写返回值,那么它的返回值就是andde find,那既然是andde fund,就是要把andde fund展示到这儿,老师之前你还告诉过我,Andde fund是不呈现在页面上的,那你看我20行多完美啊。
10:08
哎,我触发了change的调用,而且还不影响页面的结构,因为andde是不呈现的,说老师这多好啊,同学,你没发现一个细节吗?我都不敢点保存。因为你这段代码是有严重问题的。老师,我不信,你看我给你演示一下定时器呢,我给你注掉,然后在这呢,我用一句话去代表定时器啊,这么写叫做开启了一个定时器完你自己看看啊,它能不能有什么问题,来回到这儿打开控制台说老师你看多完美,一上来嘣开启一个定时器,哎,然后呢,页面结构还没影响,老师你看HR下边没东西了,对吧,行。看着我把定时器解开了啊。然后呢,回到这儿啊,我开到这控制台都准备好回来,哎,我点保存了啊各位走你回来,哎呀,同学看一下啊,页面呢,产生了一个鬼畜的效果,哎,同学可能说老师挺好的,要不就这样吧,不行啊各位,这离咱们的需求太远了,而且你看那个变化多诡异啊,而且同学你注意看控制台,就咱们谈笑间啊,这东西就奔着6000多次去了,同学你说输出一次开启了一个定时器,是不是就代表他真开了一个定时器啊,你现在这种状况非常恐怖,同学你开了8000多个定时器呀,而且呀,哥们儿全都是循环定时器,赶紧关了吧,啊,我这电脑温度马上就上来了,烫手了,来关掉,哎哟。
11:25
啊,有的时候关可能就还慢一点啊,来回来分析一下咋回事啊各位,其实啊,你刚才分析的都对,就是少了一个环节,来我们快速的分析view的确得解析模板,的确找到了20行代码,的确掉了这个change,也就是说一个定时器咋的呢开起来了,但是同学我问你定时器里边你做什么了呀,绿色的代码瞄着看绿色的代码你是不是在修改OB view当时给了你一个承诺,说只要你敢改data里的数据,我就帮你重新解析模板,那一重新解析模板我问你各位这个change是不是又得调用了,那又得调用,我问你一个粉色的定时器是不是就又开启了呀?啊,那你看周而复始的同学是不是一个一直一直一直在循环这么一个效果呀,而且同学很可怕的是,你每隔16毫秒都得动一下OB,每次动OB最终影响的就是再开一个定时器,从数学的角度来说,你这是一个指数大爆炸的增长。
12:25
对不?各位,所以说同学这么写是写不下去的,那么综上所述,各位你绝不觉得只要你把这个change给它写在methods里面,你只有两种选择,一把它作为事件的回调去使用,但是不允许这样做,为什么?因为我们的东西不是说点了按钮开始变的,不是鼠标划过再开变的,你说对吗?那么第二个就是还有一种选择,你就把这个change啊,作为模板里面的这个差值语法你亲自去掉,那你看这种方式是不是也不能实现,所以说各位,这个change写在methods里面,目前没办法实现我们的功能,对不?所以说怎么办呀,删了去吧,啊,那methods呢,在这留着,一会儿呢,我要演示一个问题,好同学这么说啊,举个例子你说。
13:10
如果这个view啊是我们的朋友,是我们的哥们,这事儿就好办了,你比如说举个例子,View要是我朋友,我就跟他谈一下,我说朋友啊,我想求你件事儿啊,这20行我先删掉啊,我说我想求你件事儿,求你什么事儿呢?说朋友一会儿你得忙,一会儿呢,你得拿到19行得解析变成虚拟盗墓,再变成真实盗墓,然后最后呢,还再放到页面,我说朋友啊,咱们能不能商量一个事儿,就是你把最后一个工作完成的时候,哪个工作呢?就是把这个模板最终变成真实盗墓,放到页面的时候,你告诉我一声,你说哥们儿啊,我把那HR啊都弄好了,一个真实的盗墓元素啊,放到页面了,你能不能告诉我一声,他说行,好同学,你说这个事儿一旦要是达成了,他说我一会儿把这东西放进去,我就告诉你一声,同学,那你说是不是他什么时候告诉我,他把这活儿干完了,那我什么时候再开一个定时器,是不是就可以了。
14:03
是不啊说老师,那你这实现不了啊,他不是你朋友啊同学,View给我们提供了这么一个渠道,在view把最后一件事干完的时候啊,它会掉一个函数,在这个函数里边,你就可以去写你的逻辑了,那这个函数呢,很特殊。特殊在哪呢?首先,这个函数压根不写在methods里。老师那写哪跟MYS评级,也就是意味着往这儿写,哎,这是第一个特殊的地方,这个函数啊,还有一个特殊的地方就是它的名字也很特殊,它的名字呢,叫这个mon TED mounted,哎,我都说它是一个函数了,那我就直接写了。哎,同学你得琢磨一下这词什么含义,先读读这个mount mont mount这个词呢,同学你搜一下它本身呀,就有诶挂载的意思,那问题是什么叫挂载啊,说一个生活中的挂载吧,说你下班了一进屋啊,把你的外套挂在了衣服挂上,这就叫做挂载啊,那mountain的是啥意思呢?就是挂载完了,就是挂载完毕,是不说老师那生活中是挂衣服,那我的代码里,同学所谓的挂载啊,就是这么回事儿,View找到了这段模板,开始解析,变成虚拟盗墓啊,然后呢,就往真实盗墓上去转,然后就把这个真实的盗墓元素放入页面,我刚才说了一个词儿,就把真实盗墓放入页面,那这个放入啊,如果你说的再官方一点就叫挂载,OK,所以说同学你猜也能猜出来了,这个mon的函数什么时候被调用呢?啊,我直接跟大家说。
15:44
叫做view,完成模板的解析,诶,解析并把真实的DOM元素放入页面后,然后呢,调用mounted,嗯,琢磨琢磨,完成模板的解析,并把真实盗墓元素啊都放入页面了,再调用这个mounted,那把真实的盗墓元素放入页面后,我们管这个时间点同学就叫做mounted,翻译成中文就是挂载完毕,或者叫做完成挂载。
16:20
OK,哎,那我们叫做挂载什么呢,完毕。哎,所以说同学你觉不觉得整个mounted啊,在VM的工作过程当中,其实它只掉几次呢,只掉一次,说的要是再精准一点,就得这么说,并把这个初始初始的真实道啊,并把初始的真实道放页面,什么叫初始的,就是一上来第一次解析的放进去,好,我们验证一下啊,看看它能不能被调用来走回到页面啊,打开一下,刚才那不关了吗?刷新一下,看mounted活干完了,诶再刷新mounted,那在这个里边,同学你就大大方方的开启你的定时器吧,来把这个缩进调一下,所有的VM都变成Z,这回你再瞧一刷新。
17:11
开始周而复始的变化对吧?各位,也不用我把东西再甩在外边了,也不用我在整个按钮里点击了,也不用我自己得写个差值语法再去调用了,对不?各位,哎,值得你注意的是什么呢?各位,这个东西是把初始的真实道目放入页面后啊,它再去调用的,你就比如说啊,各位这块呢,我再写一个H2啊,叫做你好啊,然后我想让它条件渲染,同学呢,我得写一个V-if,比如说读取这个A,那这A呢,我就可以给它写一个波尔值,比如说是false,那false的意思就是不显示它,对吗?各位,那一上来啊,肯定是没有这个你好,RGHR了,甚至连这个结构都没有,对不来回到这儿,同学右键检查,你看一下只有这个是不?然后我去调整一下啊,各位来到这个里面,我把那A呀给它勾上看着走是不是展示了,那同学你说他肯定也得经历了一次解析模板吧,肯定也得弄出来这么一个新的H2的盗墓元素放入页面吧,但是你发现同学。
18:11
的,不会再被调用了。mount的指的是什么呢?一定是初始的真实盗墓,放入页面后明不明白?哎,同学,啥叫挂载?就是你第一次把东西放入页面那叫挂载,以后那叫更新了,你说是这意思不?哎,所以说同学你琢磨琢磨,所谓的生命周期是啥意思呀?就是指这些特殊的函数。同学你觉不觉得啊,Mounted它就是一个普普通通的函数,只不过这个函数呢,是view在一个关键性的时刻帮我们调用的,你体会体会是这意思不?View什么时候把这些活干完了,他再帮你去调关键性的时刻,调关键性的函数,对不?如果你要写错了,同学谁也救不了你了,你再来个ED,你看它不会报任何的错误。因为你把名字写错了,又找不见啊,他就把这段代码了当成一个没有用的代码了,OK,舒老师,那明白了,不就这一个mon的吗?能记住各位,你听我说VM,也就是咱们这个view实例在干活的时候是分为很多步骤的啊,在调这个mount之前呀,你听我说各位,它还调了几个函数,我就暂且呢称为A函数啊,再来一个叫做B函数,他们真正的名字不叫A,不叫B,我在这儿只是做一个演示,在调完这个mount之后啊,各位,它其实还掉了一个C函数啊,以后呢,还有可能掉一个D函数,那同学你听我说,我们就管这个AB函数,CD函数,再加上这个最重要的mount的函数,管这么一堆函数,起了一个名字啊,叫做生命周期函数,为什么它叫生命周期函数啊,那是因为在整个VM干活的过程当中,特殊的时间点,人家去帮你调的,哎,OK不好啊,那我们把这个呢给它删掉。
19:58
这个C和D呢也删掉,还有就是一个细节上的问题,各位你发没发现啊,我直接写this,它的指向就是VM,为什么呀?首先这我写的是箭头函数,它得往外找,往外找各位是不是就找到了mount里的this,那么很给力的是view在帮你调mount的这个函数的时候,This的指向已经帮你维护好了,你瞧就是谁VM是不?哎,不用你再操心了,好,各位那说老师啊,我还是没明白啥叫生命周期,我呢给你想这么一个例子来,各位说人的生命周期啊,就是人的一生。
20:37
你人的一生肯定有很多关键的时间点,你琢磨琢磨,各位,比如说哎,我们咕咕坠地了,来调一下画笔啊,咕咕坠地了就你出生了呗,那你同学你说你出生这个时间点还不重要吗?那是你的生日啊,然后怎么办呀,你得检查一下各种诶身体的指标,你看关键的时间点,做关键的事儿,那以后可能你学会说话了,学会走路了,对吧?朱老师,那学会说话了,那可能得让你背古诗了啊,学会走路了,那可能给你买一双特别好的鞋呀,对吧?哎,那同学VM的生命周期就是比如实力的生命周期,指的就是VM的一生,他确实刚才在挂载完毕了,去帮你调这个的函数,那在真正挂载之前呢,他还调了点别的是吧,那是别的函数,那之后呢,还得调点别的。
21:20
人的一生就是关键的时间点,做点关键的事儿,View的生命周期就是关键的时间点,View帮你调一堆函数,这一堆函数统称为生命周期函数。OK,回到代码里,我们总结一波各位,打开这个我们所说的生命周期啊,其实是一个简称生命周期,又名生命周期回调函数。你琢磨琢磨生命周期回调函数,你说这的,我问各位是不是回调必须是。因为你看你写的mount,你定义的吧,你调用了吗?没有最终执行了吗?执行了这不就可以了吗?来再读也叫做生命周期函数,就把回调两个字给省略了,有的时候呢,也叫这个名叫生命周期钩子,这是程序员之间在沟通的时候说的最多的一个叫生命周期钩子。
22:07
老师,这钩子咋理解呢?你觉不觉得你只需要在这儿准备好mount的,再准备好A函数,在准备好B函数,一堆函数准备好在这儿,然后view呢,会在合适的时候把这个函数,诶,用一个勾子给它勾出来,执行一下啊,然后又到了一个特殊的时刻,那就再把这个红色的勾出来,再执行一下,体会一下钩子的感觉对不对?哎,就有点像你出去吃那个烤鸭对吧?炉子里挂了一堆,你看哪个好了,咔,勾出来OK,再读第二句是什么?所谓的生命周期函数,就是view在关键时刻帮我们调用的一些特殊名称的函数。OK,再读第三句,生命周期函数的名字是不可更改的,人家定好的,但函数里的具体内容啊,是程序员根据需求编写的,那说白了,Mon的名字不能变,但是为什么要写定时器啊,那是我自己的一个需求。好,再读第四句,各位,生命周期函数中的this指向是VM或者是谁?组件实例对象,虽然我们没有讲组件的,但我这话呀,得说完整,对不?目前我们能观察出来的的的确确是谁呀?VM同学,你觉不觉得如果这个this不是VM,我们写起来那可就复杂了对不?好嘞,各位,这只是引出了一下生命周期这个概念,这一小节我们听。
我来说两句