37-尚硅谷-尚医通-前端知识点-Vue-生命周期

各位同学大家好，欢迎继续收看上硅谷视频课程，刚才内容中呢，给大家演示了VE中常用的指令，那我们下面给各位进一步来演示，我们来说一下VE这个生命周期到底是怎么样的，那这个什么意思呢？给各位详细解释一下，首先我们先看一个词，叫做生命周期。那我问各位同学，大家说什么是生命周期？生命周期是什么意思？或者说什么叫生命周期？这个词我觉得应该不难理解，如果说一个人是不是从他出生到死亡的过程叫生命周期，而在我们的vuee中，那就是你vuee从你创建对象到结束，这过程是不是叫做生周期，所以下面给各位就来说一下voe的生命周期到底是怎么样的，然后咱看一下在我课件中有张图，这张图中就标注出来的voe的生命周期是怎么样的，而每部分分别会调哪些方法，那我们来看一下，首先咱们new这个viewuee，就是new对象，然后new完对象之后，它首先调的方法叫before created，然后再调这个叫，然后这个方法给大家强调，也是我们说的一个重要的方法叫的方法，那我写一下。

这个方法，然后这个方法什么意思呢？它就表示在你的页面渲染之前会执行这个方法就是先执行before create的，然后在执行create方法，什么叫渲之前？也就是说你的数据在页面还没有显示，正在显示的时候，这个时候先执行create，然后create执行之后在进行显示，所以这个叫在页面选之前执行。比如说我们一般来讲都是在你显示数据之前，咱是不要调我们的接口，把数据得到页面中做显示，所以这是第一个方法。

然后除了它之外，下面就是做各种判断，然后这里边我们后面做的肯定是因为渲染，在渲染之后，下面还有两个方法，一个叫before mount，一个叫wanted wanted的方法也是一个重要方法，那给各位来写一下，这个方法叫wanted。然后mount的方法什么意思呢？它表示在液面。渲染之后执行，也就是说你数据在页面中已经显示出来了，那这个时候会执行这个mount的方法。所以这两个方法是咱们的重要方法，一个created，在页面渲染之前执行，一个叫mounted，在页面渲之后执行。当然过程中，比如我们要改内容，它会执行这个update，当你最终销毁，会执行这个地址错意方法，这是关于voe生命周期一个基本介绍。然后这个方法也是有一个对行顺序，就是先执行before create，再进行create，然后进行一面渲染，然后执行before wanted wanted，包括错等等这些方法。所以这是关于生命周期的一个基本介绍。

然后介绍之后呢，下面呢，给各位把这效果咱们做一个基本的演示，那我在里边写下。比如现在我再建个文件，这个文件我们叫零期voe的生命周期。我这里边解掉。DHTL，然后创建之后，我们把相关的代码给它生成出来，生成之后在里边我们写下具体代码，比如现在我在date中的定义一个变量的值，我们叫MSG，然后它的值我就叫这个哈，然后把这值在里边，咱们可以用差值表达式，是不是能取到是咱今天说到的，然后这个选完之后，大家注意我现在在这个date的下面可以加上一个方法，这一方法我们不叫create。

这些方法刚才说过，它有什么特点？各位应该记得啊，是不在我们的页面渲染之前，是不是会用这个方法，这个方法就叫create，然后除了这个方法之外，下面还一个方法叫这个wanted。蒙T的方法表示在你的页面渲染之后，这个方法会知晓，所以这是我们说的两个重要的方法，然后这两个方法，比如说咱们写完之后，在里边呢，我做一个输出console.logo第一个方法我们就输出这个。把这个做输出，然后第二个方法，我们就直接输出这个叫monkey的这个做输出，所以这是关于我们写的一段技术代码，然后这个代码为了一会儿更加明显，我在这方法里边啊，咱们加上一个关键字，我写这关键字啊，这关键字叫做第八个。

第八个什么意思，是不是调试啊？给各位强调，如果说咱们在Java代码中，咱在程序中什么能加上断点，要用第八个方式进行这个断点调试，而我们在前端项目中也可以加d bug，它就表示在里边加上断点，然后咱们再往下进行执行，所以这是关于生命周期的一段基本代码。然后这个代码取完之后，咱下面来做一个测试，我们看一下效果是什么样的，那我们来测试。比如现在我把F12打开，然后这里边我重新做个刷新，大家看目前断点就到了我们这个位置，你看啊，这里边有个断点在这里第八个，你看现在页面中没有数据吧，是view表达式，因为咱们先进create的，然后到这里边我们点下一步。

你看页面数据是不是有了哈，它到了我们这个wanted的方法，然后最终我们再结束在控制台中输出了created，还有这个wanted，所以这样的话我们就演示出来了VO生命周期中两个重要方法，一个叫created，一个叫wanted，并且咱们看到created是在页面渲染之前执行，然后mounted是在面渲染之后执行。所以这是关于VE中的生命周期的这么一个演示。