前言
了解Vue的生命周期很重要！
了解Vue的生命周期很重要！
了解Vue的生命周期很重要！
重要的事情说三遍，至于为什么重要？额…
一、生命周期简介
我们都知道，每一个Vue应用都是从我们通过Vue函数去new一个新的vue实例开始的。每一个vue实例就像我们人一样，都会有从出生走向死亡这样这一过程，这个过程就是我们所说的Vue的生命周期，而这个过程中所经历的各个阶段，就是我们所说的钩子函数，我们必须了解到这个生命周期是一个怎么样的过程，我们才能在每个阶段的钩子函数里去做对的事。
正文开始
首先来个官方的图镇文：
先做个简单的说明：
红色白底方块代表着钩子函数；绿色方法代表着所做的事情；
黄色菱形代表着流程判断；红色圆圈代表着生命周期阶段；
接着再来个Vue生命周期的钩子函数说明图，先做个简单的了解：
二、生命周期详解
对于以上这两个这个图，大家或多或少见过，先做个了解。看不看懂都没关系，我们接下来就来对生命周期做个详细的解析。
首先，简单粗暴地把上面这段代码复制到一个新的html文件，运行它并打开控制台
<!DOCTYPE html>
<html>
<head>
<title>生命周期</title>
<meta charset="UTF-8"/>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
</head>
<body>
<div id="app">
<p @click="updateMessage">{{ message }}</p>
</div>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data: {
message : "生命周期"
},
methods:{
updateMessage(){
this.message="message更新了"
}
},
beforeCreate: function () {
console.group('beforeCreate 创建前===============》');
console.log("%c%s", "color:red" , "el : " + this.$el); //undefined
console.log("%c%s", "color:red","data : " + this.$data); //undefined
console.log("%c%s", "color:red","methods: " + this.updateMessage)
},
created: function () {
console.group('created 创建完成===============》');
console.log("%c%s", "color:red","el : " + this.$el); //undefined
console.log("%c%s", "color:red","data : " + this.$data); //已被初始化
console.log("%c%s", "color:red","methods: " + this.updateMessage); //已被初始化
},
beforeMount: function () {
console.group('beforeMount 挂载前===============》');
console.log("%c%s", "color:red","el : " + (this.$el)); //已被初始化
console.log(this.$el);
console.log("%c%s", "color:red","data : " + this.$data); //已被初始化
console.log("%c%s", "color:red","methods: " + this.updateMessage); //已被初始化
},
mounted: function () {
console.group('mounted 挂载完成===============》');
console.log("%c%s", "color:red","el : " + this.$el); //已被初始化
console.log(this.$el);
console.log("%c%s", "color:red","data : " + this.$data); //已被初始化
console.log("%c%s", "color:red","methods: " + this.updateMessage); //已被初始化
},
beforeUpdate: function () {
console.group('beforeUpdate 更新前===============》');
console.log("%c%s", "color:red","el : " + this.$el);
console.log(this.$el);
console.log("%c%s", "color:red","data : " + this.message);
//debugger;
},
updated: function () {
console.group('updated 更新完成===============》');
console.log("%c%s", "color:red","el : " + this.$el);
console.log(this.$el);
console.log("%c%s", "color:red","data : " + this.message);
},
beforeDestroy: function () {
console.group('beforeDestroy 销毁前===============》');
console.log("%c%s", "color:red","el : " + this.$el);
console.log(this.$el);
console.log("%c%s", "color:red","data : " + this.$data);
console.log("%c%s", "color:red","methods: " + this.updateMessage);
},
destroyed: function () {
console.group('destroyed 销毁完成===============》');
console.log("%c%s", "color:red","el : " + this.$el);
console.log(this.$el);
console.log("%c%s", "color:red","data : " + this.$data);
console.log("%c%s", "color:red","methods: " + this.updateMessage)
}
})
</script>
</body>
</html>
不出意外的话，应该可以看到下图的内容：
上面的运行结果，从上到下就是Vue生命周期的流程。我们就着这个运行结果来逐个解析：
创建阶段：
- 在beforeCreated() 创建前阶段，我们可以看到，el、data、methods都是undefined，也就是说，在这个阶段，其实Vue只是简单地帮我们new出一个实例，但实际上什么事情都没做。
- 在created() 创建完成阶段，我们可以看到，data、methods已经发生了变化，简单地来说，在这个阶段，Vue为我们初始化了data和methods。但注意此时el依然为undefined，所以直到created() 阶段为止，Vue所做的都只是初始化，没做挂载。
挂载(渲染)阶段：
- 我们再来看挂载阶段，先看beforeMount() 挂载前阶段，我们可以看到此时el已经不再undefined了，在这个阶段，可以简单地理解为Vue已经为我们找到了我们要挂载的DOM节点了。但是，大家可以看到，我们绑定的数据是{{message}}，还没有渲染出来。
- 接着再来看mounted() 挂载完成阶段，这个时候我们可以看到，我们绑定的数据不再是{{message}}了，而且已经显示出来“生命周期”了，也就是说，在这个阶段，Vue已经帮我们将数据渲染到我们的DOM节点了。至此，前期的创建和渲染阶段已经完成了。
此时，大家可以回过头重新再看vue官方的生命周期流程图，大家可以看到，在创建和挂载阶段中间，多了以下这一块内容，这是为什么呢？
其实原因很简单，说白了，template和el其实都只是一个我们去挂载的模板，也就是容器，只不过el是根节点，template最终也是被塞进el里面的。所以Vue在挂载前会去判断template存不存在，如果存在，那就先挂载到template这个模板里，如果不存在，就直接挂载到el绑定的DOM节点里。
更新阶段
说完了创建和挂载阶段，我们再来看一下更新阶段。首先要记住一点，如果我们的data没有变化，那是不会走进更新阶段的，所以我们点击下页面“生命周期”的文字，修改data，更新下我们的message，来走进更新阶段。
我们可以看到此时已完成了更新，但咋一看beforeUpdate() 更新前和 updated() 更新完成这两个阶段好像没什么区别，但其实是有的。
回到那一大串代码，在beforeUpdat() 里面的所注释掉的//debugger，将他取消注释，我们打个断点，然后重新执行我们的代码，重新点击修改，这时候我们可以看到：
在beforeUpdate() 更新前这个阶段，其实我们的data已经进行了更新，但是我们节点上绑定的数据还没更新，也就是说，在这个阶段，我们只是更新了data，但还没重新渲染DOM。
接着我们继续执行
我们可以看到在updated() 更新完成这个阶段后，我们的data和DOM都已经更新了。
总结一下更新阶段，在beforeUpdate() 阶段，Vue只是帮我们完成了data 的更新，但DOM还没重新渲染。当我们完成updated() 阶段后，我们的DOM才完成重新渲染。
销毁阶段
最后就是销毁阶段了，这个阶段其实没什么好说的，我们可以在控制台执行下app.$destory()这行代码，就可以看到：
在这之后，我们可以看到el，data，methods其实都还存在，但我们去对他们进行操作的话，是不起作用的。我们可以在控制台输入我们的vue实例app，可以看到：
这时的vnode是undefined。简单来说，销毁阶段销毁的是我们的虚拟DOM，以及移除了事件监听和数据绑定。el，data，methods其实都还是存在的，只是与Vue无关了。
如果非要说beforeDestroy() 销毁前阶段和 destroyed() 销毁完成阶段的区别的话，那就是beforeDestroy() 是问Vue确定要销毁吗，而destroyed() 是已经销毁了。
到这里为止，生命周期的详解也解析得差不多了，这里放一张做了注解的官方生命周期图，如果对生命周期还不太清晰的话，可以结合以上内容看看下面这张图，或者觉得了解得差不多了，可以回过头看一开始那张官方的生命周期图，看看现在对这张图有没有变得不再陌生。
：
三、生命周期总结
这里是我对各阶段钩子函数做的一个大概的总结。然后也写一下我自己平时会怎么去用这些钩子函数，毕竟学完后不会用也是挺尴尬的。经验有效，写得不全，望大佬补充哈哈哈。
| 生命周期各阶段 | 钩子函数写法 | 作用 | 其他说明 |
|---|---|---|---|
| 创建前 | beforeCreate() | 在这个阶段什么都没做，这是new一个vue实例而已 | 我们可以在这里加一下loading |
| 创建完成 | created() | 在这个阶段对data和methdos进行初始化 | 我们可以在这个阶段进行我们的ajax请求，获取数据，或者对某些数据进行初始化 |
| 挂载前 | beforeMount() | 初始化el,确定挂载节点 | |
| 挂载完成 | mounted() | 将data和methods等虚拟DOM挂载到DOM | 我们也可以在这个阶段进行ajax请求，拿数据 |
| 更新前 | beforeUpdate() | data数据修改，但还没更新视图 | 这个阶段如果不进行数据修改，是不会进入的 |
| 更新完成 | updated() | 将修改好的data数据重新渲染到DOM | |
| 销毁前 | beforeDestory() | ||
| 销毁完成 | destory() | 移除事件监听和数据绑定，销毁虚拟DOM | 销毁后的数据还在，只是不再和vue有关联 |
| 激活时 | activated() | keep-alive组件被激活时调用 | |
| 停止时 | deactivated() | keep-alive组件停止时调用 |
至于表格里提到的activeted() 和 deactived() 这两个钩子函数，是跟vue的动态组件相关的，表格里只是做了个简单的说明，具体的内容Vue官方文档里写得挺清楚的，这里就不多说了。
最后的最后，这是我第一次写博客，本文仅是自己对Vue生命周期的理解，初来乍到，经验不全，有错误的或者有补充的，望各位大佬指正和补充！！！
参考文献
https://segmentfault.com/a/1190000008010666?utm_source=tag-newest
https://blog.csdn.net/yy493004893/article/details/78644795
306
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
