00:00
下面我们来学习总结的生命周期。组件的生命周期呢?指的是组件在初始化、渲染或更新或卸载阶段的时候,它会调用的一些特殊的函数。那么我们在这些特殊的函数中就可以完成一些逻辑,从而实现一些功能。那么下面我们一起来看啊,一共有三个阶段,分别是初始化渲染阶段,更新阶段和这个卸载阶段,他们分别会出发这些生命周期函数。那么接下来呢,我们第一个需要演示啊个生命值函数,是不是这样出发的,那么第二个呢,我们要搞清楚这个生命值函数有什么作用。好,下面我们就一起来研究啊,先研究它们触发顺序,我们再来研究它的作用功能。打开我们的这个代码,我们新建一个新的影音M6来测试咱们的生命周期。
01:01
好啊,新的六啊,那么shift。我们这里测试生命周期,主要是测试的是GS功能,所以页面上的功能的话呢,咱们都会尽可能简单的写就好了。好了,那么我们接下来来定义几个生命周期函数啊,生命周期函数的定义呢,它无关顺序,就是你顺序即使定义在下面也没关系啊,它触发还是该怎么触发怎么触发。那么我们出发到这里,通过API点我们来。去弹出啊,提示咱们的这个数据就好了。OK,你说。然后呢,我们再复制两份,还有一个初中学长,有四个啊,Before render。以及。好了,接下来呢,我们就来看它的一个触发的一个顺序是不是这样的啊。
02:04
那么这里用上了API对象的内容,所以我们得来到咱们的真机设备上进行测试,那么就来到con的XL,啊,把这个DEMO4呢改成DEMO6保存,然后呢,我们。同步一下。OK,然后呢,来到真机设备上,我们看效果啊好,一上来呢,我们发现他打印的API ready,难道是第一个触发的就是API ready这个生命周期吗?其实不是的啊,大家注意它的这个弹窗是先触发这个再出,就是先触发这个234,但是弹窗的话呢,是越后触发的,它会越显示在第一层,越先触发的它越在里面,所以说我们看到的第一个打印的它其实是最后一个。所以我们看倒着来,是不是这样的API ready,下一个呢是install。再下一个是before render,再下一个是install,这三四个方法,所以它触发时机没问题,出出发,渲染出发,我们按照顺序写吧。
03:05
实际上我们写的顺序无关紧要啊,它永远都是这个顺序,1234,初始化阶段的四个生命值项数。Or呢,就是在主机安装之前,Before red呢,就在主件渲染之前,Or呢,代表主机已经渲染好了,安装好了,那么API ready就等价于install,只是在install的后面触发,都代表组件已经安装好了,确认好了。那么他们有什么用呢?通常情况下呢,我们能用的只有API ready这个事件,那么在这里我们前面也介绍过。通常用来发送请求。它呢,只会在初始化渲染的时候触发一次,所以我们发请求的逻辑就可以在这发送请求,或者是设置定时器啊,绑定事件等这些异步的一次性任务,那么我们会考虑在API ready里面完成。
04:01
而上面这些呢,当然也可以用啊,但是没必要啊,所以我们统一都在这儿去做啊,统一在这做,那为什么不在上面做呢?因为来到这个生命周期函数啊,才能代表页面已经渲染完成了,此时你才能操作动,对吧,你要把定世界可能要操动,那么在这里才能做到。所以我们呢,通常情况下,如果要使用生命周期,初始化阶段的生命周期,一般就用这个API ready。好,呃,那么接下来我们来看看更新阶段的生命周期啊。更新阶段的有before update。还有这个updated。当然还有一个是for reader,因为前面已经定义过了,所以说我们这里就不需要定义了。那么before re呢?它会触发多次啊,我们待会来验证一下是不是这样的。好,那么更新阶段怎么样才会触发更新呢?大家注意啊,一上来它是并不会触发更新阶段的。
05:02
还是API readyor before render和install这install这个方法,那么避免有触发更新阶段,更新阶段要想触发,必须要当data塔中的数据发生变化时啊才会触发,所以我们要更新得塔中的数据。这个时候我们就可以在这里整一段内容,对吧,整一个。哎,我们整一段文字,文字内部渲染呢,就是渲染我们的这个number数据啊,然后整一个按钮,点击按钮的时候,我们去更新这个对吧,更新这个number的一个值。好了,下面我们来定义啊,首先呢,我们定义这个number,数据初始化呢,我们希望是零点击的时候呢,我们去set number。让这点点number加加。好了,那么这样的话呢,我们就能够看到咱们的整个更新过程了,下面一起来看。
06:06
一上来,那同样呢,它只触发初始化流程API ready installed before render和INSTALLED4个方法。当我点击按钮的时候,它的贝塔数据就会发生变化,一旦变化就会触发更新阶段的生命周期,我们点击,诶,你看这时候就触发了update的。以及before render update对吧,然后呢,他这里反复触发了多次啊,那么这个渲染过程中呢,它会就是不断的触发多次的这个这些生命周期。我们应该是这个数据啊,在加价的时候,它应该读取了,比方说我们把它设置的值就等于一,我们看看效果。我们这时候再看效果。好,前面四个我们快速确定,点击点击按钮,Update before render update before render update,那么在渲染过程中呢,应该是它内部逻辑啊,有有一定的设置,那么会重复触发两次这个update和这个before render这个方法,但是update代表更新结束,它只会触发一次。
07:09
但是这个触发before两次呢,可能也不一不一定啊,可能将来你更新的内容越来越多啊,它会触发更多次,所以要注意啊,这个before和before render可能会触发多次,所以如果你要有些操作的话呢,记得千万不要在这里面做,在这里面做的话呢,可能会这样多次,导致出现一些隐患,那么你要在更新之后要做些事的话呢,建议你使用update体的这个生命周期。好,那么这是更新阶段,卸载阶段呢,也有啊,只是咱们这里呢,卸载阶段啊,在这里呢,我们目前通过这个组件是没法测试的。这是卸载阶段的生命周期,我们目前没法测试,因为咱们这个组件没法去卸载,那怎样才能卸载呢?我们得引入其他组件。来这里呢,有个TEST1测试组件,对吧,我们就引入它,我们可以对它进行卸载。
08:14
好,引入组界之后呢,我们在上面进行使用。那么他此时呢,就会渲染出咱们的这个T组件来看效果。好呃,确定确定确定确定好测试组件就渲染了,对吧?那么接下来怎么去卸载它呢?那么我们可以整一个按钮卸载组件,卸载组件呢,这里就要通过V跟if去控制啊,因为一旦V跟if为false,这个内容就会被干掉,而对于组件来讲,它就会被卸载,所以我们通过V跟if来控制它。来,我们把逻辑先写好,一上来呢,以设为处代表要显示对吧,组件是加载的,然后呢,当我点击按钮的时候去卸载它。
09:00
就是把值改为false。好了,那么这个卸载这段生命周期呢,就不能在我们这定义啊,因为咱们这个DEMO6是并不会卸载的,是这个才会卸载,所以我们要定在这里面I thought,然后呢,我们在这里提示它这个卸载出发了。好,接下来我们来看一下效果。确定确定,确定确定。点击下载组件,诶,这时候它就会触发啊,更新阶段的呢,也会触发,我们来观察一下。他就会应该要触发咱们的这个卸载主机的生命周期,我们看一下是不是。呃,An install这个方法API or alert,它好像没触发,我们再看一下点击。
10:04
点击的话呢,我们需要呃,把这个ISO的值呢,我们再进行取法,这样的话呢,我们可以多测试几次啊。来前面这几个没关系,点击卸载阿倍体的安一说,诶安一其实触发了,刚刚我没有看到啊,其实触发了。我们再看一下啊,显示是不会触发的点击。Update的上一个就是安因斯store,其实触犯了这里我刚才没看到,所以说只要你通过big if去隐藏组件,这个组件就会被卸载。如果是V干瘦的话就不会啊,V干受不会,我们来切换到V干受。来,再次编一下。确定,确定确定,点击下载图片。回去啊。回去回去回去回去回去,那么组件呢,并没有被卸载啊,当然它还在这里显示啊。B干show呢,并不能对组件做这些操作,所以你要卸载组件必须要用不if才行。
11:05
OK啊,那么以上呢,这个就是我们的主机的生命周期了,我们再来看一下。组结的生命周期呢,主要就是三个阶段,初始化、渲染阶段,更新阶段和现在阶段啊,分别触发的一些生命周期,其中的初始化阶段是四个,更阶段是三个,但是before update和before re可能会重复触发,现在阶段呢是一个。通常情况下呢,我们考开发的时候主要用的就是API ready,在这里面呢,我们去发起求设置定时器,把定时线等这些任务呢,我们会考虑在这做,而且每个页面呢,都应该要实现这个在这里面去处理那些业务逻辑,那么什么install这些方法呢,应该不要考虑去使用。好了,以上呢,就是组件的生命周期函数。
我来说两句