13_尚硅谷_Vue_生命周期

来下面我们看下一个啊。下一个叫U的生命周期啊，算命生命啊，这个部分看一下文档是哪个部分啊。实际上是没有实力这一部分。大家应该前面学过生命周期是吧？嗯，它的生命周期有类似的地方，首先大家要知道啊，生命周期它有三个大的阶段。哪三个？嗯，OK，第一个呢叫初始化显示。懂不懂第二个叫什么更新显示对吧。看第三个阶段。死亡呗。大家能看懂吧，啊OK。首先大家得明白这样一个问题啊，三个大的阶段，而每一个阶段都会对应一些生命周期的回调函数。

啊，现在我们只是跟以前的名字不太一样了啊，OK，那生命周期的回调函数呢，还有一种叫法。像这个。啊，叫钩子函数。只是为了交流啊。好，他的这个生命周期的回调函数的整个比那个要复杂一些。嗯，稍微要复杂一些好。这里面有一个图啊，这图呢，对应很多说明，先不要看这个图，我们先来看一下我们最终啊，最终要做的一个例子是什么。我们需要去做一些事情，就是这里有个文本，它每隔一秒钟。就切换一下显示隐藏。这个不懂啊，我上面一个按钮是做另外一个事的，先可以不用管它啊，OK。好，我们先来去做，先做到不能做在为止啊。

好，来。前面有一个按钮，我先写上这个啊这里面，哎，这要有个ID是吧，啊叫test吧，好这个呢叫呃第一是Joy view啊或者叫VM都行啊好，下面有一个P标签是吧，一个P标签不一个文本嘛，啊这个文本呢，可以随便写啊，随便写一个。嗯，是对吧，上V5ID教育啊。It教育。嗯，好，那他要想显时间显示隐藏是不是得有一个什么为数或者V吧。这个能懂吧，这个也能懂啊，那我写一个便利名叫秀。没问题吧，好，那我这里面干嘛去，又一个又传一个配置，写个一写个井号。

写着是吧，再写一个date上来，是显示隐藏的显示的。没问题吧，好，先打开先看着啊，现在肯定显示的，但现在我们要实现的效果什么，每隔一秒钟它就切换一下显示隐藏。我要想让他隐藏，是不是得改变这个值？说白了，就每隔一秒钟，这个值就叫什么改变一下。是这个道理吧，那这个想到用用一个什么技术啊。是不是循环电视剧呀？对吧，好啦。那也就概念我是不是要启动，或者要设置一个循环定时器。关键我把那个启动设置循环定时器的代码写在哪个位置呢。

嗯，在外面，嗯，好，你在外面，我们来写写外面是吧，Set interval。填写的啊，哪一个回调函数对吧，哪一个。时间呗，1000呗，那这个里面我们是不是要通过日来去。是这个值，那现在练习对吗。对不对，这些代码啊，首先得知道啊，大家一上来在初始化的时候，是不是就应该去启动。这个最好是做在什么呢？我们一共不有三个阶段吗？对不，哎，有三个阶段。来这个三个阶段呢，是正划分的。上面呢，都是初始化。下面这中间这个什么呢？更新，最后这一个是什么呢？死亡。懂不懂，而再去初始化的时候啊，一共又对应一啊。

三四个。啊OK，好，我们用的最多的一个啊，用的最多的一个是这个。在这。Mount是什么意思啊？啊，挂载。啊，挂载的意思啊，OK，好。也就是说到此，到这里我们就实现了一个初始化的显示，其实我们先啊用一下啊，再慢慢的去说，我们先直接告诉他，结果我们就在这里面用，说白了我再去写一个配置方法。叫什么呢？就是啊，初始化显示之后。啊，立即调用。啊，OK，好，那此时我干嘛去？

Set。Set是吧，好，指定一秒钟接着干嘛里面。点一数等于。非什么Z时间因素好，这里面其实存在一个问题，这个现在不对，Z是不对。我们瑞是不是希望它是当前的VM呀，但现在呢？Window。对啊，大家记住一件事情就行，只要是回的函数，你就给我写进函数。肯定就不会有问题。啊，OK，一旦你将一个函数作为参数力，你最好直接上来就干一个什么间断函数。因为建的函数就是用来去定义一个匿名函数的对不对，但它的特点就是函数内部有自己的意吗？没有，没有就用什么外部的和外部的this就是VM对象。

注意这个是能看到吧，好来啊，我们来看一看，看看现在啊行不行了。说吧。可不可以可以了。这个能懂吧，嗯，好。来下面啊，我们要去做另外一个事情啊，做另外一个事情，什么事情呢？我这里面有一个按钮。干嘛？销毁随VM，那怎么样销毁呢？我们看这个图啊，看看图呢，能不能给我们一些提示。啊，看图，如果你看图能知道去写一些代码，那就很好啊。那也就是说我是不是要我们当前VM死亡啊，大家看看。是不是当调用什么VM，点多少伏join的时候，那就会进入下面流程呗。

是吧，那我现在来看一下。啊，看一下我在这里面给它加一个什么at connect，等于比如说我直接写个destroy vm可以吧，这个名字其实可以随便啊，那我要去写一个什么messages是吧，再写一个它啊在这个里面干嘛去。啊，OK，干掉看谁是吧。来单挑一下呀。刚刚说的是通过VM点多，那VM我们怎么得到？啊，还是一样，This。能懂吧，点。多乐福翁。

Destroy。能看到吧，好，我们来看一下，看看还会不会啊，我同时在这里面写一个啊。看看那个，诶写在这个地方，这个定时器，看他有没有反复执行是吧。打开控制台。看你这个手来先刷一下。是不是在重复执行没问题，好汽车。干着他。他没有变化了吧，没有变化了，你说这个东西倒没变化，但是呢。定期停了吗？没有啊，这个VM现在其实啊已经不能去管理界面了，但是有问题啊。这个定时器还在跑，这实际上就是一个概念，不知道有没有说过叫内存泄露。

啊，你要知道一旦运行程序是不是要分配内存的，但是这个有意义吗？没有意义。啊，没有意义怎么办？是不是要去干嘛，是不是清除定时器，关键什么时候清除呢？点一下逻辑清楚啊。在这吗？不是得要在他死亡有些生命周期的对不对啊，这个大家学过生命周期就好搞啊，OK。来，他在里面死亡，会掉两个生命周期的回力函数，一个叫什么？Before一个什么destroyed。啊，就是死亡之前和什么死亡之后完全是不是可以在死亡之前掉。可以吧，可以没有任何问题，来，我们去利用一下它的生命周期回调函数，有个叫什么。啊是吧，好没问题。

那我们在这里面干嘛去了啊，叫清除什么定时器对吧，定时器来做一下。可你啊。Inter。是不是得传一个number类型的ID啊？ID在哪登？Set，他因特他的是不有个返回值啊，这个返回值我们就是他的ID吧，可能大家可能喜欢取这个名字，但是我觉得根据寓来说，应该取这个名字更好，是他的标识懂不懂。好，这个地方怎么写啊。也就是说我现在用一个看行吗？不行，我下面看什么看不见，我得存在一个看得见的位置，对不对，对不对，认识点。

是吧，好，下面呢。那我是不是通过认识点应通过ID来找到他呀。能看到不来啊好来下面呢，我们来去看看，看看它啊行不行。来现在呢，在不断的运行是吧，当我去点它的时候。能看到不啊，当大家看到啊，我点的时机不一样，它也不一样，大家看着走里。是不是界面显示不太一样，也就是说说一个什么事，一旦我销毁了这个VM，这个界面，它还能实现什么数据绑定的效果吗？不可能了啊，你的界面不会再变了。这么弄当定时器，它能自动的清理嘛，不可以，你得去干嘛去？是不是调用这样的代码？

好，其实这两个是用的最多的两个生命周期的回调函数。一个叫mounted，一个叫before destroy。这个是什么死亡之前对吧，调用。几次啊？会长几次？一次他就掉一次，那你说我们上面的调几次。随便我初始化显示那一个界面，它能触发两次啊，那不可能嘛，也是一次，你就想我们这个启动定时器，我能启动两次吗。不冷嘛。这个能不懂啊，OK，好。这个是我们用的最多的两个回调函数，当然还有一些别的，这个时候我们就带大家简单看一下。不过大家。

此时此刻应该是不能完全理解，但大概说一下啊，因为我们要把后面的做了啊，我们会讲一个东西叫U的源码。啊，讲这些东西以后呢，大家再看生命周期就应该简单很多了，所以呢，我们先大概的过一下它的整个流程。首先一上来我们要产生这个实力吧，有了这个实力以后，他马上就会调用什么呢。Before GR。啊，这个名字吧，让人容易产生误解。你看翻译。创建之前是创建之前吗。不是啊，都已经创建了对吧？啊OK，好，这里面有一个before create和什么created啊，这个可以说是创建好了，它前面有一些准备工作要做，在准备工作做之前，他先调用before great。准备工作做好以后再调用什么好。这个里面有一个概念叫。

我不知道什么意思。他不见了。先是观察，这个我不知道，本来叫观察的意思，大家知道我们的数据最终是不是要实现一个概念叫数据保密。对吧，这个数据绑定实际上用什么实现呢？给大家说啊，就是给属性添加一个方法叫什么呢？Set set用来干嘛呢。对，先是属性值的变化，你别去设置啊。OK，这是监视属性的变化。后面我们说完源码分析，这个会有一个更好的理解啊，初始化事件做一些准备工作，这个大家可以先暂时不用管。好，下面啊，接着has e不选什么。你有没有E的这个选项配置啊，我们有没有。有有就会进入这个流程，对不对，那没有了，是不是进入这个流程啊，进入这个流程说白了就是有一个自动挂载页面和一个手动挂载页面。

就我们一旦指定了E，是不是指定了我的没有管理那片区域，假设我没有指定了。那你现在我能知道这些为谁而服务吗？不知道，那不知道怎么样指定呢？看到这个了吧，后面手动的去指定啊，管理每片界面，但基本上我们很少这么做，因为我们通过E配置就很舒服嘛。啊，OK，好，那下面啊，下面问你什么。你有这个template这样一个选项配置写了吗。我们写了吗？写这个选项配置了吗？没有没有我们进入哪个流程。进入这个肉是吧，看到。啊，他说comp什么意思，编译也就是解析，解析谁呢？解析我们模板里面的一些语法。

我们是不是这个子密码，还有可能是不是写大括号表达式。这些是不是都要解析的呀？好，那这个宾语实际上就是解析解析EL的这个单词，我觉得应该写错了，应该叫in呢。怎么翻译了？EL不是我配置那个E元素吗？他要编译的是哪个区域？假设我的E是个div div的外面，它编译吗？冰冰，前面一上来我们就看过，外面是不管的，只管我D的什么，是不是内部的这些标记元素。对不对啊，所以这个地方最好应该是一个音了，什么意思？编译的是EL的内部HTM。作为模板是不是去解析。大概能看到吧，好。那这个解析它其实啊是在内存中解析，而没有直接去解析页面。

也就是说他并没有去直接去啊，譬如说举个例子。大家要知道啊，有一个事情，比如说假设我这里有一个P标签啊，我这个地方呢，有一个大话表的是有个一字绣。对吧。如果我直接去解析页面，解析这个P标签的话，那我是不是会把这个整个替换成一个波值。好，假设我有N个，有很多个。那我是不是要更新这一个更新这一个更新下面一个一个更新。这个就有一个问题。什么问题呢？我会反反复复的更新这个里面的界面的部分。其实这样效率特别低啊，这样效率是非常低的，我们应该怎么做呢？它内部是先把这个啊，整个在内存里面。搞起来，搞到内存里面去，在内存里面先做解析替换。

在替换的过程中，界面不变，界面不动。能不能界面呢是没有变化的，也就是在替换每一个的时候，我替换每一个P标签界面签都没有变化，后面我解析好了以后。再给他什么呢？一次性塞进去。这样就有一个概念叫什么呢，批量的。也就是说，假设我这里面用到了100个啊，假设啊，我用到了100个大话表的是。我直接去更新页面，那我需要更新100次。能不能，那如果我先只在内存里面做，我更新一次，更新两次，更新三次，更新100次。界面动吗？不动，接着我一次性把它全部是满。塞进去。这不有批量的吗？OK，这样能够去减少什么呢？更新的次数。

大家能懂吧，啊需要有一个基本的理解，那这个地方大家看到后面就有一个操作叫mount。什么意思，挂载说白了，我先是在内存里面进行了编译好了以后再挂到我整个的什么。页面上去。就塞到页面里面去嘛，那我的页面又显示出来正确的数据。啊，这里有一个挂载的一个概念，那在筛之前它会调用什么？Before mount在筛好之后调用什么呢？Mounted。但到此为止，我们第一个阶段就完了，叫初始化显示。啊，初始化显示，其实我们用的最多的一个是这个。Mounted。要说还用呢，有一个也会用啊，叫created，但一般我们都会选择用它。当然这个生命周期方法很多，不要全部记些啊，就记几个我们常用的就行。

好，第二个阶段我们叫它什么。是不是更新啊更新。当我的数据改变，页面是不是就要发生变化呀？那发生变化之前先标什么？Before update发生变化之后呢？Updated。啊，先有个基本理解，先不要强迫自己背啊。啊，不要强到位啊，背着也没什么用啊，下面一个啊，后面一个呢，更简单了，叫什么死亡，当我去调用VM点多了福第的时候。还要死对吧？啊，有一个before destroy和什么。OK，他这个死亡啊，并跟那个react不太一样，叫移除。把组件给他移除掉，移除掉以后我的组件的显示就没有显示了。但它不一样。页面还显示着。啊，页面现在还显示啊，但是。

没有数据绑定，已经没有交互了。啊，OK。说白了，这个VM就处于一个死亡的状态，他已经不管事了。对吧，OK。好，这个我们也用，叫before destroy。在死亡之前，我们有时候是不是要做一些收尾的工作，比如说清除定时器？对不对，好来啊，现在刚才我们是不是就用了两个呀，那其他的我们也要再测一测，稍微测一下啊，来把那些方法都搞一搞。来啊，先看一下最前面啊，有一个叫be four。是这个吧，啊before啊，还有一个叫啊来把这个给打印输出一下啊，打印输出一下。嗯，打印书架再复制改改。

下面一个叫什么。啊，还记得我们那个组件react组件生命周期。叫什么啊？他要是这个代表是将要对吧，这个叫已经。你还记得吗？有一个经常有两个单词，那个时候一个well，一个什么de。是吧，但它这里面并没有用D的是吧，而是用的是过去时这种表达来表代表D的呀，啊其实是一个概念，只是写的少一点。好，这是说的before啊，Cried和created，下面还一个啊，叫before mount和什么。Mount啊，哪一个before啊，不叫这个了，叫before mount。是不是有啊，有我们稍微的打印一下。这个是吧，好能看到吧，行，那下面呢，有更新是吧？啊这前面几个都写的初始化，下面一个阶段是更新。

嗯，OK，把这个。呃，更新阶段。和我们前面的这一个，前面这一片都是什么初始化阶段。啊初始啊好来更新也有两个跟把这个拿过来。改改。好一个叫before update。对吧，一个叫什么updated找规律啊，一定要适当的找一下规律啊，找一下它哪个它是吧，好下面。下面一个事情就是我们的死亡对吧，第三个阶段叫什么死亡阶段对吧？好，死亡阶段有两个方法。

一个是before destroy啊，来把它写一写。另外一个叫什么交的，把这个拿过来。啊，其实好的方法说实话一般基本上不太用啊。但是还是一句给他演示一下好了吧，好，可以了。来，下面我们来看一下啊，是个什么情况。刷一下。首先before great吧，这是什么？Created吧，Created对不对？接着才是什么？Before mount，以及mounted这个阶段整个称为什么？初始化。这整个阶段只执行几次，一次没问题，下面是什么更新？

对吧，更新，而这个阶段有两个话，一个叫before update，一个叫什么update，它会执行多少次，N次，对吧，这个N可能是零次，可能是一次，也可能是多次。我从来没更新过那些名字。对不对，我要更新一次，那就一次。能懂吧，好，最后有个死亡，现在死亡了吗？没有对吧，还没有了，好啊，一直在去你看。反反复复的更新吧，这个更新是谁导致的？哪条语句导航？多少行？59 59这个。多。不是这个吗？这不更新状更新数据嘛，是吧？啊更新数据好来看一下死亡怎么做呢？很简单，看一下这里点一下什么，他走你。

能看到吧，啊，这个是没问题的，而且我们在这个里面是不是去清除了定时器啊。就这么个事啊，OK。啊，这里面呢，也说了，生命周期一共有这么三个阶段。初始化显示更新状态更新显示啊更新显示，再一个呢，就是什么死亡是吧，销毁V的实力就死亡呗。这个根弦式我们怎么样实现？根是不是日时间叉叉叉的一个新的什么。是新的value来更新数据，是这么个事。常用的方法啊，OK，最常用的是这两个，一个叫mounted，一个叫什么呢？Destroyed，其实crazy现在都挺少用的，基本上用这两个用的比较多。

啊。啊，在这个里面我们会干一些什么事呢？啊，大家看到去做一些异步任务的操作，这个异步任务有可能譬如说启动定时器。是一步操作吧，还有一个我们有可能去发什么，呃，这请求获取数据。听懂吧，好，再一个before说里面干嘛呢？做一些收尾的工作，比如说啊，这个比较常见，清除定时器，后面我们也可能有别的啊，到时候遇到了再说。好，这些生命周期方法先有一个了解重点，要知道我们主要用的两个方法，一个是monkey的，一个什么。Before destroy。啊，就这两个是重点啊，其他的大家看一看就行，记不住也没关系。好啊，你现在。