56_尚硅谷_Vue3-生命周期对比

呃，这个问题咱们说的是V2和V3的生命周期回到的一个对比啊。但是我这边这两个图啊，挂掉了啊，这没关系，嗯，咱们可以去找一下啊，首先呢，我在这边，嗯，直接去找到V2它的文档。好，起步之后呢，我们去找到这个view的实例，里边有个生命周期视图。这个图呢，我把它图片另作为鼠标邮件给他改个名啊，那这个就是VIVO2的生命周期呗。然后呢，我们再去找一下V3的啊，嗯，VI3的应该在这个里边。生命周期图示。这个图呢，我们现在也把它存一下。啊，那改个名，这个就是三。然后呢，组合API这边呢，我们也去找一下生命周期勾函数啊，来到这儿之后，现在啊，我们现在把这两个图呢打开对比一下，VIVO2的生命周期和V3的生命周期不太一样。

览一下啊。靠在右边。再把这个也预览一下，靠在左边。左边的是二点叉的生命周期图，右边的呢是三的生命周期图，我们可以做一个对比啊，大家先来看一下这两个。这块有一个before create create这个VIEW3当中呢，也有一个before和create，说明这是一样的啊，然后呢，下边。Mounted。和我VIEW3当中的before mount mount是一样的，哎，然后再往后这两个before update updated和VIEW3里面的before update和updated也是一样的，再看后边这两个。二点差当中这个位置是before destroy和destroyed，那么到了三里边是before mount和。UN mounted，哎，那也就是说这个位置是不一样的啊，左边的是二点差的。

右边的这两个是三的啊，一个是卸载前，然后还有是卸载完毕，这个也是卸载前卸载完毕啊，那现在这可以看得出来说V2当中的生命周期回调在V3当中啊，只有哪不一样呢？只有在卸载和卸载完毕之后的这两个生命周期是不一样的，其他的都是一样的，同时我也跟大家去说啊。VIEW2里边的所有的生命周期回调函数在VIEW3当中都可以正常使用是没有问题的，但是到了VIEW3当中稍微不一样的是哪呢？VIEW2当中的这些生命周期回调都是属于option，就是选项配置选项啊，然后呢，到了VIEW3当中，它用的都是什么呢？用的都是组合API，嗯，那这一点呢，我先把它关掉啊，这一点呢，咱们可以通过呃，下边的这个来看一下，说与二点叉版本生命周期相对应的组合API啥意思呢？在VIVO2当中，哎，你可以用before create，还有一个是create代表的是数据初始化之前和初始化完毕。

然后呢，到了VIEW3当中，我完全可以使用组合API setup来代替before create和好，这是一对啊。还有二点叉版本的生命周期回调这几个。啊，这几个他们在V2当中，或者说二点叉当中都是生命周期回调对吧，都是属于option选项。然后呢，右侧的这些是V3的，他们现在都变成了组合API。并且在VIVO3里边也新增了两个钩子函数。On re和这个on re trigger trigger的这两个主要是用来做调试的，咱们现在暂且不用。然后呢，我们还是通过代码的方式来对比一下啊，就是什么呢？我在VIEW3里边把V2的生命周期钩子都写一下，大家看一下它是能够执行的，然后呢，到了VIVO3当中，我们呢，再使用一下这些组合的API，再试一下，它也都可以正常去呃使用，然后最终呢，他们俩做一个对比啊，这块没什么特殊的啊，就是对比一下。

那我们现在就把之前的代码都给它做一个保存啊，来一个新的目录，这个是零八。杠wa ch和CH啊eff的。ECT啊。看一下啊，是不是给我写错了单词。Fe，嗯，OK，没有问题，那我就把这个APP呢，直接放到了这个目录当中，好搞定了。然后src.view当中这些代码呢，我们就都不要了啊。都删掉微微。三好，搞定啊，同时呢，我在这个位置加上一个标题啊，H2APP负极组件，为了给大家演示这些生命周期的回调啊，或者说这些组合AP，我呢在这个位置创建两个组件，一个是负极组件，一个是子集组件。

Src里边我再来一个目录啊，Cos component里边我再来一个文件叫child child.v来一个子集组件VV。啊三这个位置也是，我也给它加个标题，二标签里边是hi子集组件。当然啦，这个位置的话，我要改名child啊。啊，格式化一下。那我现在这些都关掉啊。那我在负极组件里边要用到子集组件，第一步就是引入，那我在上边引入吧，引入子集组件谁呢？Childpoint child，然后from点杠，Components下边的点view。

引入完之后，下一步做的事情是注册啊。好，再来一个cos component里边写上一个child，哎，注册完了之后呢，那我上边就可以用了呗，我这边写个HR吧。Child。好，再加上一个斜线啊，保存一下。之后我们打开这个界面啊，刷新一下。现在可以看到上面有一个APP负极组件，还有一个差的子集组件啊，那我APP的负极组件当中，我写上一个button。哎，这个button的目的无非就是切换显示吧，哎，它的作用是什么呢？设置我当前这个子集组件显示或者是隐藏，哎，那我应该给他来一个点击事件，等于来一个is show吧。嗯。或者说就叫A受XSO等于什么呢？Aso等于取个反吧，A什么呢？受啊好，那当前它我写上一个V-if吧，那我用到了什么呢？Is show。

这个表达式，那我现在上边要用到表达式，下边我是不是应该把它给定义出来吧，好怎么办呢？嗯，在这啊。Setup，括号括号return，来一个对象，对象里边放的就是这个什么呢？Is show啊，当然我现在需要这个a show啊，来一个a show等于ref吧啊。括号里边我就给他一个什么呢，默认是一个处吧。现在我们来看一下啊，能不能实现这个切换的效果。刷新。我点一下隐藏了，再点一下显示了是吧？哎，可以实现啊，为什么要非要写说点个按钮让这个子集组件显示或隐藏的，因为子集组件显示或隐藏就有可能会导致这个子集组件它干嘛呢？被卸载了，那卸载的时候有可能会触发它里边对应的生命周期啊，所以说我才把这个代码这样写的啊，那好，那差的组件里边的话，接下来我们就应该写一些生命周期了啊首先。

这个位置啊，Will。点差钟的生命周期钩子。先把那个二点叉当中的生命周期钩子呢放在这儿，咱们来看一下，然后呢，我在这个setup里边，再把它对应的呃，VIEW3当中的一些组合API的生命周期构则放在这儿啊，咱们来看一看啊，首先这个位置有一个什么呢？Before create。哎，括号括号。来看一下can.log括号，我这边写个二点叉中的什么呢啊before。点点点，哎，搞定保存一下啊。我们现在可以看一下，它应该是存在的，OK，没有问题吧，好，然后呢再来。还有一个什么呢？C。

括号括号。can.log这个也是二点叉中的，怎么呢？Created。现在都是三当中的啊，好同样的啊，我也是把它保存一下，这样呢，咱们可以看一下这个效果，二点叉中的create啊。刷新。没有问题是吧，那接下来呢，我就不再去写一个演演演示一个了啊，我就一起把这些都写出来啊，后边还有什么呢？Before mount。还有什么呢？还有什么呢？Before，有一个update。还有一个updated。那还有什么呢？还有一个before。还有一个什么呢，TED。OK啊。那这些都是属于二点叉当中的啊，那我一个一个写O。

回一下。直接复制吧。拿进来，嗯，拿进来。拉进来。这个也是。我把它复制一下啊，这个是before mount。这个是mounted。Before update。还有一个什么呢，Updated。再来有一个before destroy。还一个disoted。好搞定格式化一下啊，我们先保存一下。诶，这边有一个他啊，这里边到了VIEW3当中，它用的是什么呢？用的是这个before a mount这两个已经改了啊。这个。是。呃，VIEW2点叉中的谁呢？Before？

和什么呢，ED？这两个生命周期回调已经在WILL3中改名了啊，改名了改名了啊，所以逗号啊，不能再什么呢使用了啊啊，那我们就给它改名，改名的话，那这一个应该叫的是什么呢？Before a mount。然后这个应该叫的是什么呢？Ununed。好，我们保存一下啊。这个位置。还有这个位置。OK，保存现在呢，我们打开这个界面啊，刷新一下，我们来看一下啊，二的叉中的before create create before mount mounted，嗯，然后呢，我去点一下，我们可以看一下二点当中的before mount，二点当中的mounted，这说明这是没有问题的是吧？好，但是这个位置呢，我们另外的两个生命周期看不到，嗯。

怎么办呢？也好办，呃，我在这个位置啊，写上一个setup括号括号，然后呢，再来一个return。返回一个对象吧，我简单点直接返回一个MSG，然后呢，我在这个里边来一个com的MSG，等于ref吧，好，里边我就随便写上点东西吧，叫ABC。之后呢，再来一个的update。给他来这么一个。回调函数里边，我让MSG它的Y6加等于来个等等等，好格式化一下，这样呢。我在上边再来一个什么呢？再来一个这个HH4里边我写个MSG括号，括号，然后里边是MSG，同时我再来一个按钮啊。按钮的话，那就是更新数据，我就直接让他来一个click，等于然后这块是up啊，不要忘了上面我写的这个函数在这需要暴露出来啊。

啊，加个注释，这个是什么呢？这个是点击按钮按钮点击事件的回调，那这一个呢，是一个响应式的数据啊OK。好，那现在呢，我们去把它保存一下啊，重新再来看一下刷新。刷新完了之后，现在我们可以看到正常是出现了四个生命周期的回调的调用，然后呢，当我去更新数据的时候，诶，有一个二点叉当中的before update，还有一个update。嗯，Update的这块我应该是没有改名是吧，嗯，这块应该是二点叉。这个为了二点叉中啊，为了完美啊，我还是重新再来一遍。刷新一下。好，我点一下，我们可以看一下啊，前面有四个，然后呢，这块有两个，因为我更新数据了嘛，数据一更新之后，界面就发生了变化，对不对，界面发生了变化就会重新渲染，重新渲染呢，那这两个生命周期就会滞销，然后我再去点上面这个按钮，当前这个组件就没有了，没有了之后呢，就会呃执行另外的两个生命周期，就是卸载之前呢，还有卸载之后啊，这个都是VIVO2点。

差当中的一些生命周期回调，但是到了VIVO呃，3.0当中，诶就改了啊，怎么改的呢？改成这样了啊，再给大家去看一下。首先呢，在view叉，呃，View的3.0当中，这个位置它的一些生命周期都变成了什么呢？都变成了对应的组合API了，比如说before mount，现在变成了什么呢？On before mount，还有mounted是on mounted都加了一个on，所以说在这个位置我们写上一个on before。On before mount。哎，还有一个什么呢？On，哎，这是两个，然后另外的是什么呢？还有这个before on before update，还有一个on updated。

再加上一个多少on before。Update。还有一个on什么呢？Updated，哎，这就是几个了，四个了是吧，哎，还有。这边还有两个，有一个什么呢？呃，叫做什么呢？On before mount，还有一个on mounted。逗号，On before。I mount，还有一个on mounted。那另外的那个错误的这个什么呢？生命周期回调咱们就不用了啊，咱们主要演示这几个重点的，那这是123456，为什么说只有六个呀，那VIVO2点叉当中有八个呀，是吧？其实二点叉当中生命周期回调一共有11个啊，去掉有两个关于这个缓存组件当中用到的还有一个错误的，所以说有八个常见的，那到了3.3.0当中怎么就剩下六了呢？因为在这里边有这么一个问题，就是之前的这个before c和现在用的是setup就可以进行代替了啊。

好，所以说呢，现在啊，我在setup当中也写上一个。Canl.log，这个是3.0中的什么呢？Setup，好，把另外几个啊拿过来，有一个叫什么呢？On before，这个是什么呢？On before，诶，哪一个从哪开始，从这开始啊，On before。从这个开始，On。注意啊，它是一个函数啊，它是一个函数，是一个组合API，那这里边呢，我们直接写回调就可以了，can.log框，那我这边写个3.0。中的on before mount。然后算了，还是一个一个写吧，然后下边的这个是UN mounted。A mounted，它也是一个函数啊，在这里边写上的也是一个回调can.log，然后是3.0中的on。

Wanted。还有啊，这几个我就都拿过来了啊。还有这四个。直接放到这个下边来。加上一个什么呢，回车。逗号就都不要了。直接把它们都变成函数啊。函数的调用。啊，里边放的都是回调。把这个直接复制就是为了节省时间啊。所以说我就都这么做了，那往里边加内容吧，can.log括号，这是3.0中的啊。我要把它复制一下。这一个是on before update，还有一个on。

Updated。On before I mount。On mount啊，然后保存一下。好，我们现在再来看一下啊。看，这里边有不一样的地方，发现了吗？3.0中的setup说明它是最开始执行的，而且是在before之前。是吧，然后created之后，然后这块有个3.0的on before want。之后呢，还有二点叉当中的before mount，还有3.0当中的on mount在什么呢？Wanted之前。那我现在要是更新一下数据，我们再来看3.0中的on before update，要比这个before update啊，要比这个before update快，那on。Updated要比这个。要比这个update updated快是吧，那我要是卸载呢，我们再来看，还是3.0当中的on before mount要比这个before mount快。还有这个on UN mounted要比这个an mounted快，那也就是说啊，在3.0当中的生命周期这些组，这些都变成了组合A片，同时3.0里边的这些生命周期的钩子。

要比什么呢？二点叉当中的生命周期都快了啊，那这一点咱们可以充分的可以看得到，比如说我现在去掉啊，咱们就来说更新，我一更新发没发现3.0当中的要比二点叉当中的快，3.0的要比二点叉当中快啊，那以上呢，给大家演示的是3.0当中的生命周期啊，这些他们都是属于组合API了啊，不像二者X当中的啊，这个是需要注意的。好，剩下的呢，呃，就没有什么了啊，这个主要是要知道3.0当中的生命周期钩子不一样，这些都是组合变，而且呢，什么时候用谁呢。那像在这里边啊，我们在二点叉当中最后一个问题，二点叉当中有的时候我们经常会呃，做一些异步操作，发送请求，调用接口啊，那有的时候我们就会在哪呢？在这个mount当中去写，当然在其他的里边写也可以啊，那现在如果说要是到了view3.0当中啊，和wanted一样的是谁呢？

那我们可以看一下，就是当前的这个什么呢？I。Mount啊，在这里边去发送异步请求就可以了啊好了，那这块呢，咱们就先说到这里。