day03【项目前端相关基础知识一】/18-尚硅谷-谷粒学院-前端技术-vue生命周期

Voe的生命周期呢？跟咱之前说的serve light包括什么B生命周期类似，它都是指这里边的对象从创建到消毁过程，比如说我现在在这里边，咱看页面中。这行代码是不是咱们new那个viewe啊，那这过程中就是创建了V对象，当你的页面执行完成之后，那这对象就销毁，它里边有这么一个执行的过程啊，那我们下面来说一下这过程到底是怎么样的。咱就来啊，看一下里边这张图，因为这张图上呢，就标注了它每个过程分别要使用什么方法。好，那我们来看一下啊。大家看啊，首先呢new个view，然后new完view之后，在这里边呢，它首先执行第一个方法，这个方法叫before create。然后这个方法什么意思呢？给大家强调啊，咱看这个词可rate是不是叫创建，Before是不是之前呀，它就表示啊，在你创建之前执行，也就是我现在啊，说的更简单点啊，咱对象创建，然后创建之，创建之后呢，它里边先用这个方法叫构，然后还有一个方法叫created，可在它之前执行，那这个方法具体什么意思呢？咱说的更通俗点啊。

大家注意，比如我现在。我去访问某个页面，这页面最终是会把数据显示到你的页面中，而它显示数据过程在咱术语中有一种说法叫做数据的渲染。啊，就是渲染过程。写一下啊，数据的渲染，什么叫渲染？说的通俗点就是你的数据在页面中进行了显示，这叫渲染，而这两个方法是在你数据渲染之前执行，先执行before create，在执行叫created，它是在你数据显之前执行，一个叫before create，一个叫created啊，这各位给他知道，在数据券之前执行。

然后这个进行渲染，咱往下看啊，这里边就是有没有内容进行渲染，到它渲染之后，这里边到这个方法叫before mount，还有一个叫mounted，那这是什么意思，给大家强调，当你数据渲染，数据最终是不是要渲染出来啊，在我数据渲染之后，这方会执行，先执行叫before mount，还有一个叫mounted，这在数据渲染之后执行就这个叫mounted。然后这个做到之后，后面还有几个方法，比如说里边这个update，当你数据渲染这种做了修改，会执行这个before update update，然后最后一个方法，这个方法。这应该最好理解。Before，错，还有这个叫错错表示是不是销毁啊，也就是说啊，什么时候销毁，当我这页面均行完成之后，页面数据也渲染完成了，那这个时候它会执行这些方法，然后最后把这个VE对象就会销毁，主要这个过程啊，然后这个过程中呢，刚才我说了多个方法，要求各位呢，重点记两个方法，因为咱后面用的也就是这两方法。

哪两方法？第一个叫create，这个表示在你页面数据渲染之前执行，还有一个方法叫mount，这表示在数据渲染之后执行，也就是说第一个方法数据它没显示它就执行了，第二方法显示之后它会执行，一个叫create，一个叫wanted，这是咱们重点的两个方法啊。各位把它知道啊，我在这个首件事中写一下啊，一个叫C。这是第一个方法，还有一个叫mounted，就是moment啊，Mounted。这两方法是咱们两个重点方法，Create在页面选之前执行，Mount在页面选之后执行啊，两个重要的方法，各位把它要牢牢记住啊，咱们后面用的就这两个，然后其他的有它不同顺序，比如说在create之前有before，这个create在wanted之前有before want，包括最后销毁有before，还有这个。

啊，这是里边的几个方法，这叫voe的生命周期方法，然后这个说完之后给大家啊，来做这么一个最基本的演示啊，咱来演示一下啊，我就不写这个例子，咱们换个例子啊，直接让大家看到效果就可以了。啊，那我来演示一下啊。我把这个关掉，然后在里边呢，比如说我现在再来建个文件，就是咱们的第11个，它叫VO的。生命周期。啊，生命周期DHTML。然后在这里边我们还是先把它那个代码生出来啊，就是VEHTML这个代码先生成，然后我们生成之后啊，然后往下来看啊，就是在这里边我们现在怎么来做呢？因为刚才我提到在voe中呢，有这么多个方法，那怎么做，咱把这方法就可以写到这里边，比如说什么created，什么mounted里边可以写方法，那大家写一下啊，第一个叫created。

啊ED啊，这是一个方法啊，大家可以写到这里边，然后它后面会执行，另外还有一个方法叫那个mounted。Momentd这个叫mounted，这方法它也会执行create的方法的作用就是在页面渲染之前执行，我写一下啊，页面渲染之前执行，然后这个mounted的，它的作用就是在你的页面渲染之后执行，也就是说这个先执行，然后再用这个monkey的，但是它中间肯定还有加方法啊，咱就以这两个为例，然后后面用的也就这两个方法。啊，这个位给他知道啊，一个叫created，一个叫mounted，在里边也写这个方名字，咱们可以做测试。那这个我们要怎么测试呢？给大家来说一下啊，首先这个测试方式就是比如说这里边啊，咱一会儿都做个输出，为了明显啊conso点。

Log就是这个，我就叫。Create，然后下面我也做过输出，这个我们就叫做mount。啊，就这个方法，一个是渲染之前，一个是渲染之后啊，你把这知道，那我们来测试啊，测试怎么做呢？各位要知道啊，咱在Java这个，比如说在idea中还是引力中大一个操作叫debug操作。第八个操作。比如说各位是否用过啊，属于一个最基本操作，就是咱们可以做一个断点调试，比如说我们程序中，假如咱们打个断点，当我一执行到这一行是不是要停掉啊，那我们现在在前端也可以加断点进行调试，就是前端加断点没有后端那么好用，但是它也能做到啊，那我们来说一下前端怎么加啊？

大家知道这个特点啊，它的做法也很简单，你在里边啊，加上一个这么一个关键字，这关键字这个。叫做第八个，它就表示这一行会加上断点，比如说咱这里边加个断点，然后我在mount里边也加个断点啊，这个表示当程序到这一行它就会停止啊，然后它会往下执行，那咱通过断点来看一下它是怎么执行的，这个我要给他会用啊，包括咱后面，比如说我们在调试前端程序的时候，因为它不像后端那么方便，但是它能加断点怎么加，就加一个叫DE8个，然后乘以到这一行停止，咱可以往下执行，再看它的进行结果啊，这是一个断点调试方式，叫第八个加到你的代码的，你要进行断点的位置就可以了。这个啊各位都知道啊，然后这个加上之后咱们来看一个效果啊，但是内容无所谓啊，我随便写个内容啊。

随便写个内容，然后咱们试一下这个结果啊，因为现在我加这个叫八个，然后现在我把程序执行。啊，大家看啊执行。比如说加点那个F12啊。咱先执行。呃，断点啊，你看我刷新大家看啊，我说各位是否能看到啊，目前这个断点已经生效了，然后你看生效的时候，它里边就出现了这个提示。它叫做这个past in，第八个就是现在已经暂停了，然后暂停之后怎么做呢？你看里边啊，有这个操作有两个，第一个操作就是这个。半圆的箭头，它表示你向下执行，要save over，类似于咱们那个就是idea或者live中那个单步执行，然后还有一个是一个箭头，这箭头表示并到下一个方法，就是下一个断点中去，那你看啊，目前第一个断点它首先到的是不是可以替的这行停止掉了，那比如现在我就点这个。

这个箭头点它也可以啊，咱直接到下一个断点，我们一执行，大家看目前到哪里，是不是到这个。第二个叫mount里边去这个第八个到这个位置，所以证明我们这个执行顺序，先执行create，再执行mount啊，就是这么一结果，然后大家给他直接放过去啊，这么一个效果，比如说啊。如果各位没看清楚，咱再试一次啊，比如现在我这里边刷新。现在断点已经生效了，它首先到了我们的create里边，在create的方法中就做了一个断点，就是停止到这个方法中，这个方法咱看到先执行，然后咱往下执行，咱点它是一步步执行点这个是进行到下一个断点，你在下一个断点在wanted中，那我点它，咱看啊一点。你看是不是到了mounted中，大家就表示created，先执行mounted，第二个执行，然后再点它就结束了啊，这是一个我们看到一个效果，所以大家啊，这个要知道怎么去加，因为咱们后面调试程序这应该会用到啊，用它就相当于我们Java中这个代码中加上一个第八个断点。

啊，跟他类似。所以这是我们说的这么一个生命周期啊，通过这个最后重一遍啊，在生命周期中有很多的方法，但是方法不需要各位都记住，咱们重点记两个方法，因为咱后面真正用到的也就是两个方法，第一个方法叫create，它表示在页面渲染之前执行，第二个方法叫wanted，表示面渲之后执行，就一个之前，一个之后，然后顺序肯定是先create，然后带want啊，你把这两方法记住，包括在过程中咱可以加上前端的断点，就是你直接个关键字叫第八个，然后当你访问一刷新，它在这位置会停止掉，然后咱们可以通过断点看到它的过程，帮你点这个下一步还是到下一个断点啊，这个都可以做到。

啊，这是我们说的关于生命周期部分。咱们就给大家做一个说明啊，所以你把这个给他知道啊。就包括比如说以后在面试的时候啊，虽然这问题咱们面试的不是说专业的前端工程师，但是如果说别人面试中，他或多或少也会问到类似问题，别人别人问你说你用过vuee吗？咱肯定说用过，说vuee熟悉吗？比如说熟悉，然后别人问你说那你知道vuee生命周期是怎么样的，那咱可以大概说一下，你可以说我知道VE生命周期中有多个方法，但是我们主要用到是create wanteded create，渲染之前执行，Mounted，渲染之后执行，这么说基本上没有问题啊，因为咱重点肯定是后端，但是前端找到这个程度，咱们这个代码基本上都能写出来。啊，所以这是关于生命周期部分啊，我们就做了这么一个说明啊，大家还是重点两个方法，记住created和这个wanted。