00:00
接下来呢,我们说一下维U里边的生命周期和钩子函数,我们首先呢来说一下生命周期,我们说生命周期指的就是一个对象从创建到销毁的整个完整过程,那我们每一个维U实例呢,就是我们以前来拗一个维U对象,它呢整个创建到销毁都有非常复杂的各种环节,那么我们VU呢,为了简化开发,它在我们生命周期的各个环节都设置了我们相应的钩子函数,这样呢,每当我们唯有实力啊处于某一个生命周期状态期间,那我们这个钩子函数就会被触发调用,我们就可以通过钩子函数来实时的感知我们当前5U实例的状态,以做出相应的操作,那5U实例生命周期的详细文档呢,都在我们这个官方文档里边,这有5U实例的生命周期图示,而且呢,这个生命周期我们现在不需要立即把所有的东西都明白,我们以后呢慢慢再来深入,我们现在先来大概的过一下。首先呢,我们。
01:01
这NEW5U就是要创建一个5U实例,它呢首先要经历初始化过程,而初始化过程在这个环节注入,也就是将我们这个值注入到我们这个data里边的时候,它呢会触发两个钩子函数,一个叫before create和create,那before create呢,就是在我们这个注入值之前啊,我们创建之前,Create呢就是在注入值之后,我们就要创建之后,那创建好我们这个实例以后呢,我们接下来我you需要根据我们是否指定了EL或者temp这两个选项,诶这个temp呢,还在组建的时候用过来决定我们要渲染哪个页面模板,那么这个决定好要渲染哪个页面模板以后呢,接下来就会将我们这个VI实例和我们这个模板进行挂载,那这个挂载呢,它还会触发挂载之前before mount和挂载完成叫mounted,那一旦挂载完成了,相当于我们这个页面的这个数据啊,就能显。
02:01
显示了,那这个数据呢,由于是跟我们五六实例里边的数据模型进行绑定的,那么这个数据模型只要一变,页面都要变,那在变化期间呢,当我们这个数据修改的时候,我们页面还没展示出来,就会触发我们这个b update,相当于我们在修改之前,那修改之前触发了以后呢,我们接下来页面修改重新渲染,把所有的数据呢,渲染完成了,我们页面显示出效果了,又会触发叫updated,叫完成更新。那以后呢,只要我们页面有数据变化,那么都会触发update和变化完了以后呢,触发updated,页面更新完成,那我们5U呢,实力销毁,那就会触发before destroy,那我们销毁之前以及destroyed完全销毁。那在这些关键环节的钩子函数呢,我们在这有一个实例给大家体会一下,我们这写了一个div,这里边有一个SPA span呢,要展示这个number数量,我们每点一个这个button按钮,Number就加加,包括呢,我们HR也来展示,我们哪一个人得了几个点赞,我们这个人名呢叫张三,这个点赞数量呢,默认是100,因为我们说生命周期每一个关键环节都有相应的钩子函数,所以在我们这个5U对象里边,我们可以将所有的钩子函数都来写在我们这里边,那么在合适的时候呢,这些钩子函数就会被触发,我们可以测试一下open位置live server,我们来F12打开控制台,我们发现呢,生命周期各个环节呢都已经被打印了,我们来看一下它的顺序,首先呢是北create,那就是呢,创建之前,创建之前呢,它有几大特点,首先呢,我们这个数据模型未加载,也就是说我们此时想要获取我们实例里边的name number,我们来看一下控制台的。
03:48
打印这一块呢,打印的是两个unDeFi,包括呢我们这些方法也是没加载的,我们想要调show,或者呢要调and,我们来看一下,我们说这块呢,Show不是一个方法等等等等,这是我们创建之前,包括呢还有一个叫创建完成,当等一会儿呢,我们5U实例创建完成了,它就会回调我们这个钩子函数,那我们这一块呢,在控制台打印呢,有这么几个特点,此时呢我们数据模型已加载,我们想要获取张三,100已经能获取到了,我们这个this name以及number在这一块呢都能获取到,而且呢,方法也是加载了,我们调用this show会直接返回我们这个张三的值,我们发现呢,这一块也打印的是张三,包括呢我们HTML页面模板,也就是说这一块,那我们来看一下这个页面模板呢,我们直接来获取当前这个元素,这个页面模板呢,也是来加载到的,我们能获取到这个当前元素,但是呢,我们这个模板没有渲染。
04:48
什么叫没有渲染,那么这一块的这个数字啊,它要动态的显示成这个number,而我们这个created呢,此时number能获取到,但是呢,我们获取到这个元素span,它里边的文本内容的时候呢,我们发现呢,它还是这个差值表达式,相当于呢,这个表达式还没解析,这是我们说的created,我们这个数据呢,还没渲染,接下来呢,就是before mount,我们挂载之前,这个挂载之前呢,最大特点呢,就是我们这个模板呢,还没有渲染,模板直接来获取我们这个元素里边的内容,它还是我们这个差值表达式,但是呢,等我们过一阵以后呢,我又将它渲染完,我们就会调用mount,我们叫挂载完成,这个挂载完成呢,我们再要获取number里边的内容,哎,我们这个number元素idv number的元素里边,它就不是差值表达式了,在mounted这个钩子函数里边,它此时打印的这个数据。
05:48
已经是渲染后的100,这是我们说的这几个钩子函数,接下来我们再来看这个before update和updated,那这就是在更新之前和已经更新,那什么时候会更新呢?我们来在这儿测试一下,我点一个赞,我每点一次赞相当于呢,我们这个。
06:08
Number就会变化,那NUMBER1变化呢,们这个数据就变了,那数据变呢,我们再看控制台打印,首先呢,会before updated的,我们这个数据模型已经变成101了,但是此时呢,你想要获取这个页面number里边的这个文本内容,它呢还是旧的100,我们给页面呢,还没渲染过去,所以呢,这是北方updated,那等一会呢,我们给页面把这个101也放上了,它就会触发updated,此时呢,我们这个数据模型,诶其实早早都更新了,但是我们主要来看我们页面模板里边的这个数据也更新了,我们想要在这来获取页面里边的内容也已经是最新的了,那么之后只要呢,以后每点一次赞都会触发before update updated,有时候呢,更新之前拿到新数据和更新之后页面更新的新数据,那生命周期呢,大家就先大概这么理解一下,那么项目用到呢,再来进行细化。
我来说两句