摘要：Vue为生命周期中的每个状态都设置了钩子函数(监听函数) 。每当Vue实例处于不同的生命周期时，对应的函数就会被触发调用。
本文分享自华为云社区《一文带你弄懂Vue八大生命周期钩子函数》，原文作者：北极光之夜。。
一.速识概念：
咱们把一个对象从生成（new）到被销毁（destory）的过程，称为生命周期。而生命周期函数，就是在某个时刻会主动执行的函数。
依照官网的原话，就是每个 Vue 实例在被创立时都要通过一系列的初始化过程——例如，须要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变动时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段增加本人的代码的机会。
简略来说就是每个Vue实例在被创立时都要通过一系列的初始化过程：创立实例，装载模板，渲染模板等。Vue为生命周期中的每个状态都设置了钩子函数(监听函数) 。每当Vue实例处于不同的生命周期时，对应的函数就会被触发调用。
二.八大生命周期钩子函数：
上面是官网文档里的生命周期图，英语好的同学能够看看： 在这里插入图片形容
三.联合代码理解：
先看案例根本代码如下，前面通过如下代码步骤演示一个对象从生成到被销毁的过程各阶段执行的生命周期函数。留神show函数的作用。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
{{information}}
</div>
<script type="text/javascript">
//创立vue实例
var vm = new Vue({
el: '#app',
data: {
information: '北极光之夜。'
}
})
// 各个生命周期函数通过调用上面这个函数理解其所处的生命阶段
function show(inf,obj){
console.log(inf);
console.log("------------------------------------------");
console.log('获取vue实例data里的数据:');
console.log(obj.information);
console.log("------------------------------------------");
console.log('挂载的对象，就是DOM：');
console.log(obj.$el);
console.log("------------------------------------------");
console.log('页面上曾经挂载的DOM：');
console.log(document.getElementById('app').innerHTML);
}
</script>1. beforeCreate：
这个阶段vue实例刚刚在内存中创立，此时data和methods这些都没初始化好。在案例中增加beforeCreate钩子函数：
var vm = new Vue({
el: '#app',
data: {
information: '北极光之夜。'
},
beforeCreate: function(){
// 传入该阶段简介与this，this就是该阶段的vue实例
show('vue实例初始化之前',this);
}
})看运行后果：
能够看到，此时vue实例刚刚在内存中创立，其它什么都undefined。
2.created：
这个阶段vue实例在内存中曾经创立好了，data和methods也可能获取到了，然而模板还没编译。在案例中增加created钩子函数：
var vm = new Vue({
el: '#app',
data: {
information: '北极光之夜。'
},
created: function(){
show('vue实例初始化之后',this);
}
})看后果：
看到没，曾经晓得data里的数据了。其它的话都没。
3.beforeMount：
这个阶段实现了模板的编译，然而还没挂载到页面上。在案例中增加钩子函数：
var vm = new Vue({
el: '#app',
data: {
information: '北极光之夜。'
},
beforeMount: function(){
show('挂载之前',this);
}
})看后果：
看到没，要挂载的对象都编译好了，然而页面的DOM树还没挂上去，这个阶段页面还没能显示进去。
4.mounted：
这个阶段，模板编译好了，也挂载到页面中了，页面也能够显示了。在案例中增加钩子函数：
var vm = new Vue({
el: '#app',
data: {
information: '北极光之夜。'
},
mounted: function(){
show('挂载之后',this);
}
})看后果：
5.beforeUpdate:
转态更新之前执行此函数，此时data中数据的状态值曾经更新为最新的，然而页面上显示的数据还是最原始的，还没有从新开始渲染DOM树。
先扭转data里数据：
vm.information = '南极光之夜';
在案例中增加钩子函数：
var vm = new Vue({
el: '#app',
data: {
information: '北极光之夜。'
},
beforeUpdate: function(){
show('更新之前',this);
}
})看后果：
看到没，vue实例里的数据曾经变成了南极光之夜。然而此阶段页面DOM节点上显示的还是初始的数据北极光之夜。
6.updated：
这个阶段是转态更新实现后执行此函数，此时data中数据的状态值是最新的，而且页面上显示的数据也是最新的，DOM节点曾经被从新渲染了。在案例中增加钩子函数：
var vm = new Vue({
el: '#app',
data: {
information: '北极光之夜。'
},
updated: function(){
show('更新之后',this);
}
})看运行后果：
更新了，全都更新了~
7.beforeDestroy：
beforeDestroy阶段处于vue实例被销毁之前，当然，这个阶段vue实例还能用。
销毁Vue实例：
vm.$destroy();
在案例中增加钩子函数：
var vm = new Vue({
el: '#app',
data: {
information: '北极光之夜。'
},
beforeDestroy: function() {
show('销毁之前',this);
}
})看成果：
8.destroyed：
这个阶段在vue实例销毁后调用，此时所有实例批示的所有货色都会解除绑定，事件监听器也都移除，子实例也被销毁。
在案例中增加钩子函数：
var vm = new Vue({
el: '#app',
data: {
information: '北极光之夜。'
},
destroyed: function() {
show('销毁之后',this);
}
})看后果：
点击关注，第一工夫理解华为云陈腐技术~
发表回复