00:00
好嘞,各位,那在这一小节呢,我们会把生命周期里边最后一个流程啊给大家说一下,就是红色圈里的这个销毁流程,从图上的体现呢,是这样的啊,你想走这个销毁流程就必须啊得先经历这那这干什么了呀,我们读一下说当VM身上的Dollar for destroy方法呀被调用的时候,诶,我就开始走销毁流程,同学你听听这词啊,Destroy本身是不是就有销毁摧毁的含义,哎,简单点说呀,就是这么回事儿,当有一天我不需要这VM了,哎,就简单点说,我的页面啊,也不希望你去帮我维护了,我也不想要这种感觉了,说我一改数据页面就变,那这样吧,你就把这VM销毁掉,对,就这么无情,就这么暴力,用你的时候,我好好用,那不用你了,不需要了,那我就把你销毁,哎,完了,他呢,是这么设计的,就只要你掉了VM.dollar福this try好,VM就开始进行自我毁灭,哎,就把自己给销毁了啊。
01:00
来,咱测试一下各位,咱先调一下这个this choice看看能有什么影响,回到代码里啊,我这样先把这个呢给它删掉啊,这断点呢,咱也不卡了,来划到上方,在这儿呢,我再添一个按钮啊各位,这按钮叫什么名呢?叫做点我销毁VM,嗯,给他一个点击事件click这个名字,这名字呢,我这么设计的,叫做BY,哎,就再见了,拜拜了是吧?好,在这儿呢,配着一个BY里边干什么呢?去调那个this.dollar福,This try,一定要注意各位名字千万别写错啊,不是this,而是TRY对吧,是RO,很多同学把这写错啊,来,那这样我再加一个输出,哎,意思就是啊,我真掉这个BY了。好,回到页面里面,我们试一下各位,这没什么说的啊,一上来四个准备性工作对不对?好,我先正常更新一下啊各位来加个一,你看哎,更新之前更新完毕,我再加一个走更新之前更新完毕,对吧,接下来就不再演示更新过程了。
02:00
瞧着我要销毁那VM了,321走,你同学这个BY确实调用了,只要这个BY1调用,我问你各位是不是VM就销毁了呀?还说老师不对呀,那VM销毁了,页面上咋还有东西呢?同学,这会儿啊,我得跟你说明白,VM啊,确实销毁了,但是销毁VM之前,也就是说的再直白点,VM临死之前的工作成果还在,明白不就整个红色框里的这些盗,我问各位,之前是不是都是你改数据完了VM去帮你操作的呀,现在只不过是什么呢?VM没了,但是他的工作成果还在,这会儿你可得一定要想好啊,各位可不是说VM1销毁他就气急败坏,来吧,这个盗我都给你删掉,不是的,只不过没有人帮你去管理了,这会儿是第一个点,OK,好,同学销毁了,那接下来呢,你看着我再点加一是不是不好用了?而且最主要的是你借助VU的开发者工具,同学,你啥也看不见了,曾经这会儿吧,还有个VM呢,那现在这儿呢,你啥也看不见了,但是这儿呢,还有一个细节上的问题,各位咱之前聊过,就是关于你是先看的还是后看它的问题,啥意思呢?你看着各位为它关掉,回到这儿我再打开。
03:14
走控制台呢切好同学我销毁了吗?没有呢,我才上来对不对,你看这加啥的都好用呢,然后你看着啊,我看一下同学,你说现在能不能看到VM,必须能啊,你看这不在这呢吗?一点开是吧,然后你看着啊各位来我销毁了,走你同学我是不是销毁了,那我问你这些东西呢,是不是还在这呢呀,哎,其实这是一个残留,各位你再点同学四也不会再变五了,就有点感觉它动在这个位置了,它冻结了是不?哎,但是如果说你一次都没看,你比如说来到这儿,我打开这页面,我一次都没看啊,然后在这儿呢,来到控制台我加加加加啊一次都没看,销毁了,那这个时候你再看同学,那肯定线加载的时候,他发现,哎呀VM没了,明白不?哎,这这说老师那不就讲完了吗?VM销毁了啊,点这东西也没有作用了,对不开发的工具也看不见了,这不就完事了吗?各位这里边还有一些细节上的问题啊,那咱们这样各位查阅一下官网,看看官网是怎么描述这个destroy的,来搜一下到了福TRY不是下边这俩啊,下边那俩是钩子,一个是销毁前,一个是销毁完毕,咱要的是这。
04:14
这个啊,走,你看官网咋说的,同学你读,只要你掉了,它就会完全销毁一个实例,那实例是谁呀?View实例简称谁呀?VM,再读后半句。读这清理它与其他实例的连接,哎,就这话一读,有些同学可能就说了,诶,老师啊,这句话我一读,我发现你之前说的一个东西不对,之前你跟我说一个应用啊,一个网页有一个VM就够了,那我怎么听人家这官网的潜台词说与其他实例的连接,说老师,我咋觉得是这么回事儿呢?就是还有一个蓝色的VM,哎,还有一个粉色的VM,哎,完了他们之间呢,还有连接,然后当我销毁了红色的这个VM之后,啊,这条线断了,这条线也断了,说老师,你看我觉得官网是这意思呀,人家提到一个东西叫其他实例啊,那你之前跟我说那话就不对了吧,还什么只有一个VM,哎,那这儿呢,我说一下各位是这样啊,这个view啊,无论是你写错了代码,人家报错,还是说你翻阅人家这个官方文档,他始终站在一个组件化编码的思维方式,去给你提示,去给你报错,说老师这啥意思,就是他所有的东西是。
05:26
站在组件化编码这个思维的基础上的,他所说这个蓝色框是啥意思呢?各位,我跟你说一下,他所描述的这个蓝色框,粉色框其实叫组件实例对象。哎,你体会体会,同学,一个应用啊,确实只有一个VM,但是一个VM会管理着一堆一堆的组件实例对象,你这蓝色的,你这粉色的,那就叫啥呀,就叫组建实例对象,OK,由于组建实例对象和那个VM特别特别的像,所以说有的时候我们也说组建实例对象就这蓝的和这粉的是一个V型的VM,啥叫V型的VM,就是跟VM比吧,它还差点意思,哎,但是他身上很多的方法呀,配置啊,还跟VM还都差不多,哎,那有的时候我们管它也叫实例,明白不?所以说同学就简单说啊,以后你看到整个网页的结构啊,它都是这样子的,你看一刷新为什么叫root呀,同学为什么叫这名啊,咱之前聊过,那就是意味着同学只有几个就够了,一个就够了,诶,然后他身下,哎,有一群为他卖命的兄弟们对不对,诶就都在这儿呢,那这些东西都叫啥呀,都叫组建,诶说老师啊,啥时候讲组建呀,讲完生。
06:38
定周期,咱就开始讲组建,OK好了,所以说这句话同学就不要太纠结了,OK,诶,等咱们讲到组建呀,这会儿你就能理解了。来读这完全销毁一个实例,就是VM在读这儿的同学解绑他,他是谁?他就是那VM,解绑VM上的全部指令以及所有的事件监听器,听他的意思就是VM如果说被销毁了,那么曾经他所用的指令全都废废了,曾经他身上的事件监听器也都废废了,对吗?那我们验证一下到底废不废呢?回到代码里,同学在这儿啊,我多加一行也展示N的值,但是我不这么展示,怎么展示呢?我用这个东西去展示,来一个V-test啊,直接写VT啊,然后在这呢写N,那页面呢,就是这个效果,各位回头看一眼,一上来有个一,然后当前值是一对不对,好看着各位我销毁这VM,哎,刷新一下来到控制台刷新一下加几个,哎销毁走销毁了吧,各位等你再加一的。
07:38
时候,嗯,这会儿是不是不变了,那也就意味着同学这个指令是不是不再奏效了呀,对吧,你看就像官网所说的,咋的解绑了全部的指令,指令不再为他服务了,OK,这不磨叽,再说这个同学叫做事件监听器,这会儿呢,有点意思,你看着各位我呢,在这个I的方法的第一句啊,输出I的,哎,在这个BY方法第一句呢,我输出这个BY。
08:02
啊,那也就意味着同学只要我一点按钮,它就发现我点了,诶,然后就帮我调这个爱的是不是就有这个输出了呀,好瞧着各位啊,回到页面上刷新一上来,这四个不多说了,清掉啊加加加两下,你看这个顺序啊,先掉的爱的爱的里边你加加了,哎,你加加人发现数据变了,那就开始更新之前,然后更新完毕,对不好了,把这些清掉,注意了各位,我要销毁它了,走。销毁了吧,那同学按照他这个说法说事件监听器好像也没了,那是不是就意味着我疯狂的点这按钮,他也不会给我做那个对应的事件回调的调用了吧?那你看一下事实是呵,哎,同学VM已经销毁了,但是我问你同学这个事件的回调能不能响应可以,那你是不是有一瞬间就觉得好像跟官网的描述有点冲突,官网不是说解绑了所有的事件监听器吗?那这玩意儿怎么他还在呢?哎,那这儿呢,多说一下各位,他描述的呢,不够仔细这块儿啊,是这么回事,它所谓的移除了所有的事件监听器,这个事件指的是自定义事件,我们还没有去讲呢,指的是自定义事件,而不是原生的盗墓事件。
09:16
也就是说各位你在这儿是不是写了一个艾特弗click这个东西,同学是给button呢绑定了一个点击事件,我问你最终最终view是不是也得用正常的盗墓事件去给这个button进行一个绑定,一旦绑定上了,各位以后就撤不下去了,他也不会去给你撤的,明白不?哎,所以说同学这个盗墓事件就是属于你绑完了就是绑完了,VM被你杀死1万回,这个点击事件它也在,因为它属于原生的盗墓事件,但是哪些事件就不见了呢?各位就是自定义事件,哎,这是一个细节上的点,所以说同学我在这儿呢,给你埋下一个伏笔,你等到后续的课程我讲到自定义事件的时候,我一定回来带着你验证这个事儿,就是我把VM给销毁了,你看看那个自定义事件还在不在,有一个算一个,全都不在了,OK啊,这会儿你要注意,还有就是有一个地方各位你也得注意,来看图说话吧,我刚才是不是销毁了VM。
10:09
那么他先走的就是before destroy,哎,销毁之前完了是什么呢?销毁完毕,那看一下各位,这个before destroy啥意思呢?就是销毁之前,我问你同学销毁了吗?没有销毁之前的各位之前是啥意思,还没销毁呢,所以说你看我这么写的,说此时VM中所有的data methods啊,指令啊等等都处于什么状态,都处于可用状态,哎,就有点啥感觉,同学人在林不能这么说不好听是吧,人在驾鹤西游之前还没吸游呢,对吧?所以说同学咋的?哎,一切的这个身体指标虽说差点,但是咋的依然是有的,马上要执行销毁过程了,那一般在这个阶段我们干嘛呀?关闭定时器啊,取消订阅消息啊,解绑自定义事件呢?你看看,哎,我说的是自定义事件等收尾操作,就有点感觉什么呢?哎,不说你说我就有点感觉是我快不行那一条对吧?啊快不行的前一刻,那是不是得交代点后事啊,哎都在这儿完成,哎所以说我们验证一。
11:10
啊,是不是走到这儿啊,叫before destroy,然后我们再往下看一步吧,然后一会儿一起去验证啊,这同学destroyed啥意思?那就是刚才我举的例子,这是我将要不行了,这呢,哼,这就是我凉了就彻底完了,凉了是吧?没了是吧?哎,看中间它干嘛了?同学,有这么一个词叫做turn down,这啥意思?移除废掉,废掉什么呢?Watchers,就是所有的监视,还有什么呢?同学,Child components叫子组件。也就是同学你看人这会儿说的就明白了,VM如果有一天不在了,那么之前呀,所有他带着的弟弟们也都会从他身上消失,因为本身VM就没了嘛,对吧?再往后看,And and啥,Even listener啥意思?事件监听器这个词叫移除,也就是说白了,同学所谓的销毁VM,就是他身上的监视不在了,所有之前他带着玩的弟弟们那些子组件也都给他移除掉了,就是从他身上移除掉了,对吧,不能再接受他的去管理了,他不能再带领着那些组件一起去玩了啊再看这儿就是移除所有的什么呢?事件监听器,但是你要注意,这个事件指的是自定义事件啊,还有个东西我没验证谁呢?就是watchs,来我们试试啊。回到这,各位,我想监视N的变化,我得咋写,是不是得写一个watch,诶,然后里边呢,我是不是可以配置说我要监视谁呀,简写方式大家还记得吗?直接写个N走你对吧?啊,只要一变就是consolo n咋的变了,我也就不再接到那个什么old value new value。
12:39
咱就是验证一下好了,回到页面刷新看效果,一上来四个什么都不说清掉,接下来加个一走,你看掉了艾的,然后呢,哎,就发现N变了,然后呢,更新之前,然后呢,更新完毕,各位看好了,销毁VM,这个时候当你在点的时候,同学就留下了一个原生的事件回调,剩下的那些东西都没了,生命周期钩子这俩before update updated是不是没了啊,Watcher是不是也没了?哎,都给他干掉了,OK,好,这里边还有一个细节上的问题,各位你听我说啊,按照图里的说法吧,说VM中啊,在这阶段啊,不是在别的阶段,在这阶段说VM身上所有的data和methods都处于可用状态,那我用一用呗,哎,来,你看着啊,这个事就有点意思了,那咱们这样给他验证一下前两个这个before this try和这个啊,看它执不执行,来写一下吧,啊叫做before destroy,然后呢,再来一个叫做destroyed,嗯,然后在这儿呢,分别给它做输出啊走这。
13:39
然后呢,走这个,然后呢走这个先看一下走不走啊,肯定会走的,来验证一下这行空行删掉回到这儿,诶这块调一下啊TRY,这是before try好了开始啊清掉销毁,你看BY,然后呢,销毁之前销毁完毕,好各位看一下啊,在这我能不能访问到数据呢?
14:00
他不是说了吗?在这个环节对吧?Data中的这个数据methods不都能用吗?那首先我验证一下在这我还能不能输出this身上那N了,这不数据里边不是有1N吗?看还能不能输出了啊在这N看一下啊,这是什么呀?这是销毁之前来看一下啊,清掉走能不能拿到能哎,那能不能调用到这个方法呢?这个by I呢,其实也是可以的,来我们验证各位走着啊,不输出了,这回呀,这么做this.add加哎,调用看看行不行啊,回到页面里面刷新清掉销毁同学你看BY,然后呢,Before this try,然后呢,掉了ADD,然后呢,This try the是不?同学没发现个事儿吗?我爱的的确执行了,但是我想问的是页面啊,它变吗?哎,它不变,各位,这是最重要的一个点,你看你不可否认这个I的被调用了,它都输出了,它还没被调用啊,但是按照常理来说,各位来你刷新啊,这一上来是一吧,那你看我销毁VM,既然你掉了I的,那我问一下这是不是得变成二啊,但是事实是。
15:09
他没变,说老师这是为什么呀?来我给你捋一捋啊,各位你看啊,刚才你是不是点了这个按钮叫销毁VM,那你说一上来它是不是得先走这儿啊,对吧,Before try,当然我们把这个环节就给省略了,说是得先调这儿是吧,然后掉这个TRY,哎,然后就销毁了,一销毁是不是走这将要销毁啊,那然后我问你各位在这掉没掉艾特掉了,你刚才还看到什么了呢?看到输出了呢?于是乎这个是不是输出了,说老师那46行走没走啊,同学很负责任的告诉你46行走了,但是同学由于你所处的这个时间点很尴尬,各位你是不是在他已经进入了销毁流程的时候,里边的这个销毁之前去调的这个艾D呀,那同学你听我说,你在这里边对数据进行的所有操作都不会再触发更新了,就什么意思呢,正常得是这个流程,哎呀我要销毁之前,哎呀你掉了I的,那我就帮你去调这个I的,I的一执行,哎是输出,然后46行N加加。
16:09
一加加view就发现了,哎哟,你动数据了呀,好嘞,兄弟,那我给你进入哪呢?叫做before update,然后进入哪呢?Update,然后是不是完事了呀?啊,那你再往下走吧,你再销毁吧,好像应该是这样的,但是事实是这样的,各位只要到了这个阶段,一句话吧,你能访问到数据,你也能调用到方法,但是所有对数据的修改不会再触发更新了,你就比如说各位我写个list.n等于99,你看看它起不起效果就得了,啊来到这儿我销毁。同学,销毁了吧,我问一下,这会变成99了吗?然而并没有,对不?各位,哎,说老师,那你这放到别的地方,同学你看我放到别的地方它就行,只要你别放在销毁这俩钩子里边,你就比如说同学我放在这,放在这啥意思?Updated是不是更新完毕了?那那就比如说同学看着我现在想处罚这个updated,那怎么办?回到页面是不是点加一啊,如果没有这句话,各位,那很简单一点,由一再加个一,是不是变二,但是如果你写了这个,同学看图说话吧,Updated updated是不是在这呢?
17:16
是不是什么数据是新的,页面也是新的了呀,但是很奇怪,我就在这个里面,我又去操作数据了,我咋操作的呀,那等于99,那你看最终的结果啊,一定是奏效的,你看着啊,各位走是不是99,而且你注意观察整个过程啊,我给你清掉,你再看一眼啊清掉你看着我只点一下这个点我N加一啊,我只点一下。同学你看整个流程,首先艾,哎,完了发现N变了,完了before update完了updated,同学就是在这updated的时候,你是不是又改了数据,那N就又变了,就又开始执行更新之前又开始执行,哎,更新完毕,对不?你看是两套,是这意思不?各位哎,所以说同学你看就这个东西放在哪个钩子里面它都行,唯独放在这俩钩子里边,他不会再触发更新了,同学就有点什么感觉呢?就这么说,我想吃根雪糕,那同学你说我这辈子什么时候吃雪糕不行啊,我出生那天对吧,我上初中那天,我上高中那天啊,大学毕业那天,我哪天吃不行啊,但是你说恶心就恶心的,我非得在我临咽气之前我吃这雪糕,同学这就不太合理,你说对不?嘿,所以说同学你说啊,既然都走到这儿了是不?既然都决定要销毁了,那怎么办?就别在这再操作数据了,就别在这儿再调什么方法了,说老师那我干嘛呀,那你看图,你说你干嘛呀,说的多明白,在此阶段,同学你就做点收尾的事儿,哎,就料理一下后事咱就得了,你说对不啊,能访问也能调用。
18:37
但是别访问了,也别调用了,也别修改数据了,直接就关个定时器啊,取消订阅消息啥的就得了,对不对?各位诶,那这个钩子呢,我再说一下,叫做destroy同学,这样的话是在react里边啊,没这钩子,React里边所有的钩子到这就结束了。啊,就是react压根没设计这个东西,就是销毁完毕,呃,React只有什么呢?只有将要销毁啊,当然react里边比较销毁啊,叫卸载它没有这个了,对吧?同学,所以说你看啊,这个东西有了咱们就够用了,一般在这个里面我们其实什么也不干啊,这个钩子呢,可以这样说,是被忽略最严重的一个人是吧?啊没什么营养,哎,在这你就知道有这么一个东西就可以了,OK,各位好,那我们就把整个流程啊就都说完了是不?各位好,那这小节呢,我们听。
我来说两句