00:00
好嘞,各位,那在上一小节呢,我们把生命周期里边这个挂载流程啊给大家说了一下,画个圈儿啊,红色圈里的都是我们看过的,这叫挂载流程,挂载流程是所有流程当中最长的一个,步骤最多的一个,你要说把挂载流程你都分析完了,那别的流程对于你来说就非常简单了,同学觉不觉得图里边将近一半的东西我们都看完了,好往下看一下这儿啊,蓝色框里的是我们这一小节啊要关注的一个流程。这什么流程呢?这叫更新流程,在真正讲这更新之前啊,各位回到上一小节写的代码当中,我说两个大家自己下去练习,可能会产生疑问的地方啊,第一个地方呢,就在这儿说我容器里边什么也不写,不配模板,我通过template呢去配模板,哎,那各位也知道,必须得有一个前提,就是得有一个根元素是吧,那没办法,我就包了个div,你敢不包,诶保存他就敢报错,对不告诉你的非常明白一个根元素,所以说回头这个东西啊,不得不包,那有些同学啊,可能因为刚才我带你看了这儿,哎,就有点想法了,诶老师啊,我这么做行不行呢?你看表面上啊,我写了一个根元素template的,但是真正渲染的时候呀,是没有那个template的,哎,只渲染里边那三个HR说,老师,我这么的呗,Template拿过来,我骗view一下,你不说让我写根元素吗?写了template,但是最终这东西不参与编译,出现到页面。
01:31
A,还是HR和巴老师,你看我完美的欺骗了他,能欺骗的了吗?看一下啊,保存回来。很明显不行是吧,读一读同学,他说什么?不能够使用temple的这个标签作为,诶同学这个词啊,说一下啊,有组件的意思,很可惜我们还没有给大家讲这个组件这个概念呢,对吧,也没告诉大家如何去定义一个组件呢,说老师那咋办,这报错我怎么看呀,同学就没这词儿啊,都不耽误你看这报错来读,不能够使用temply这个标签作为根元素,因为里边有可能包含着多个节点。
02:10
同学说的就是你这情况,哎,说的就是你这种坏人对吧,你用了template的,但是你知我知同学这个东西仅仅是作为一个结构上的包裹,最终它是不出现的,出现的还是这两个,那还是这两个,那不就还是两个根元素吗?肯定是不行的,哎说老师明白了,这摊的呀,这标签啊,就不让我用,同学你听明白啊,不是不让你用,可以用,但是不能把它作为根元素,也就是说你这写div,你这写div。然后你有三个H2都要实现一个动态的那个条件渲染,那同学你可以这样写呀,走走,然后把那三个H2啊放里边,你可以在最外边这个地方写一个V-if,比如说我写一个false,那就是三个都不展示呗,回来瞧是不也没报错,OK啊,不是不让你用,是不能作为根标签或者说根元素去使用,来删掉留一个,那有些同学啊,可能就较真了,诶老师不行,那我总觉得这块不爽,我总觉得这个div啊,我包的太被动了,那咋办呢?同学在VIEW2里边这个事儿呢,就只能这样,但是在VIEW3里边,他提出了一个新的特性叫fgment,专门解决这个问题的啊,也就说白了,同学template不是不让你用吗?他弄出来一个别的让你用,哎说老师那快讲讲,同学讲VIEW2就是VIEW2,不掺和VIEW3里的东西,OK,我就先告诉你,V3有这么一个新特性可以解决就得了。其实呢,他模仿了react,因为。
03:39
里边有一个同名的人,也叫fgment,也是为了解决这个问题的,OK,好了,在这呢,咱先不提啊,各位还是把它主掉,然后呢,还是用正常的这个写啊,好,还有一个地方可能大家有疑问,就是关于VM身上这个Dollar服EL是吧?哎,舒老师你看啊,把虚拟do转成真实道啊,然后在什么对比算法呢,最终更新页面不就得了吗?他为啥非得留一下这个Dollar EL这玩意有什么用呢?各位你想想啊,V呢,在进行这个新的虚拟盗墓和旧的虚拟倒墓比较的时候,万一有的元素有的节点可以复用,那同学是不是它得有之前的这个元素,有之前这个节点它才能去复用啊,所以说同学人家往这里边存一下真实的盗墓节点也无可厚非,人家自己自己怎么办,手里得拿一个东西嘛,对不对,所以说从这种角度来看呀,各位这VM呀,他真挺累的,你觉得呢。
04:33
你看看啊,你传的那个数据啊,还有你写的那个methods那些东西是不是都在这里边存着呢呀,哎,OK,说老师,那我想看看它到底是不是那个真实盗目呀,可以来到这儿找到这来一个this.this不就是那VM啊,到符EL来看一下呗,回到这儿,你看同学这啥,这是不是一个真实的do,哎,说老师是真实do墓吗?哎,肯定是啊,同学你可以这样做来判断一下instance of HTML element,就看看它到底是不是一个真正的盗墓元素,你瞧吧,一定是为真的对不?各位OK,诶,那把这个呢,就是跟大家说了一下啊,来删掉,就是看一下嘛,是吧,好嘞,接下来说这个更新的流程,更新的流程极其简单,同学想更新吗?那就得诶,走这儿。
05:18
读一下when data changes什么意思?当数据改变的时候,也就是说你只要敢改那个data对象里边的数据,View就会发现,哎呀,你改东西了,只要你一改东西,View马上帮你调了一个生命周期函数,叫before update啥意思?更新之前,哎,好了,我们测试一下,回到这儿写一个嗯,Before up在这儿,然后呢,做一个consolo,明呢拿过来好看一下效果啊,回到这儿刷新一波。你看一上来,Before create created before mount mounted对不对,这没什么说的,来清掉同学,我点这干嘛呢,是不是让那N加加N加加,我问你date是不是changes了,刚才图里边说的走,你看update,然后你注意一下啊,在这呢,有这么一个特殊的情况,就是在这个钩子里面数据是新的,但页面我告诉你还是旧的。
06:11
也就说数据已经更新了,但是页面呢,没来得及更新,咋验证呢?特别简单,各位再来一行lo,这回我输出谁呢?我就输出z.N哎,就是VM所保存着的那个N,随后呢,我再来一个第八格,对吧,咱刚才说过的这分号其实不写也行,咱说过的啊同学分析到哪里代码就停到哪里,好回头瞧效果啊,刷新一波清掉开始点了啊走。看控制台啊,各位,你发现那N呢,它已经变成几了二,但是你觉不觉得页面还没来得及去把那个二放进去呢?哎,这块是值得你注意的,有的时候面试官可能问你在哪个生命周期钩子中,页面和数据尚未保持同步啊,就是这个update啊,好,再往下看,各位读读这个绿色框里的东西吧。
07:02
Visual DOM什么意思?虚拟do render有渲染的意思,Render是啥意思?就是重新渲染对不对?哎,然后and patch,这个patch是啥意思呀?各位,其实就是新的虚拟do和旧的虚拟do进行的一个比较,各位你觉不觉得在挂载流程的时候是不涉及到新旧盗墓数比较的,因为挂载流程你压根没有旧的盗墓数,但是更新就不一样了,同学你说呢,你是手里边有一个新的盗墓数,还有一个旧的盗墓数,那随后怎么办呀?进行一个比较,所以说你看我说的啊,根据新数据生成新的虚拟do,随后与旧的虚拟DOM进行比较,最终完成页面的更新,G完成了model到view的更新,说老师这啥意思呀,啥玩意?模型到视图同学还记得MVVM吗?来打开这个走,各位这是什么呢?模型,所谓的模型就是数据,这什么呢?视图就是页面。同学,其实你完成了这条红色的箭头。
08:02
这个红色的箭头吧,其实同学你在挂载的时候就已经走一次了,只不过那个时候是初次渲染,现在叫啥呀,叫更新,好,顺着这个图我们再往下看啊,就来到这儿了啊说老师这名叫update,错,叫updated。Update后边还有个D呢,对不对啊,Updated这个钩子里边同学读读吧,数据新的,页面也是新的,也就是说各位怎么着了,这个页面和数据啊,诶保持同步了,来我们再验证一下啊,把这个干掉干掉,在下边再来一个啊叫做updated,嗯,然后这里面呢,再来一个consolo,输出这个updated,再来一个this.n随后呢,断点给它卡进去在这儿OK,回来看一下效果啊,先让它放行走下去,刷新一波清掉,各位看好了,走,你数据是几啊,最新的二,那页面的呈现呢,也是最新的二,对不?各位OK,走下去,诶,那我们就把这个更新的流程啊就说完了,我知道大家现在呢,肯定有个疑问,哎,说老师啊,我分析了这么多的钩子环节有啥用呢?好像我不知道这些流程也不耽误我写代码啊,也不耽误我实现功能啊,为啥我还非得分析他们呢?同学就是对整个工作流程啊,有。
09:18
一个了解,最终这些东西都分析完了,你发现常用的同学就那两三个,我们会有总结的,好这一小节呢,我们先听。
我来说两句