版权声明：本文为博主原创文章，可以转载，但请说明文章的原始出处： https://blog.csdn.net/liyunkun888/article/details/83146243
vue的生命周期详解
不多BB先上图
可以看到在vue一整个的生命周期中会有很多钩子函数提供给我们在vue生命周期不同的时刻进行操作,，那么先列出所有的钩子函数，然后我们再进行详解：
- beforeCreate——创建前
- created——创建后
- beforeMount——挂载前
- mounted——挂载后
- beforeUpdate——数据发生改变前
- updated——数据发生改变后
- beforeDestroy——实例销毁前
- destroyed——实例销毁后
1、beforeCreate 和 created
在这个生命周期之间，进行初始化事件，进行数据的观测，根据图可以看到在 created 的时候数据已经和 data
属性进行绑定（放在 data 中的属性当值发生改变的同时，视图也会改变）
2、beforeMount 和 mounted
在这个阶段首先会判断对象是否有 el 选项。如果有的话就继续向下编译，如果没有el选项，则停止编译，也就意味着停止了生命周期，直到在该vue实例上调用vm.$mount(el)
3、beforeUpdate 和 updated
在 beforeUpdate 时可以监听到 data 的变化但是 view
层没有被重新渲染，view层的数据没有变化。等到 updated 的时候 view 层才被重新渲染，数据更新。
4、beforeDestroy 和 destroyed
beforeDestroy 钩子函数在实例销毁之前调用。在这一步，实例仍然完全可用。
destroyed 钩子函数在 vue 实例销毁后调用。调用后， vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。
附：vue生命周期演示代码（请用浏览器打开并查看控制台）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>vue的生命周期</title>
<script src="https://cdn.bootcss.com/vue/2.4.2/vue.js"></script>
</head>
<body>
<div id="app">
<h1>{{message}}</h1>
<button @click="btnClick">改变数据</button>
</div>
</body>
<script>
var vue = new Vue({
el: '#app',
data: {
message: '初始数据'
},
methods: {
btnClick(){
this.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", "message: " + this.message)
},
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", "message: " + this.message); //已被初始化
},
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", "message: " + this.message); //已被初始化
},
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", "message: " + this.message); //已被初始化
},
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.$data);
console.log("%c%s", "color:red", "message: " + this.message);
},
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.$data);
console.log("%c%s", "color:red", "message: " + 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", "message: " + this.message);
},
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", "message: " + this.message)
}
})
</script>
</html>