Vue 实例从创建到销毁的过程，就是生命周期。也就是从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、卸载等一系列过程，我们称这是 Vue 的生命周期
1、 页面渲染期
beforeCreate() created() 页面创建之前 / 完成
beforeMount() mounted(） 页面挂载之前 / 完成
2、页面更新期
beforeUpdate() updated() 页面更新之前 / 完成
3、页面销毁
beforeDestroy() destroyed() 页面销毁之前 / 完成
动态演示图
注意：当你销毁vue实例后，再去挂载，你会发现，页面更新期钩子函数失效了
实例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- <script src="../node_modules/vue/dist/vue.js"></script> -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<input type="text" v-model="msg">
<p>{{ msg }}</p>
</div>
<button class="destroy">销毁</button>
<button class="mount">挂载</button>
<script>
let vm = new Vue({
el:'#app',
data:{
msg:"vue生命周期"
},
// 1执行顺序和声明顺序无关
//页面渲染期
beforeCreate(){
console.log('--------beforeCreate 创建之前--------');
console.log('$el:',this.$el);//undefined
console.log('$data:',this.$data);//undefined
console.log('this.msg:',this.msg);//undefined
},
created(){
console.log('--------created 创建完成--------');
console.log('$el:',this.$el);//undefined
console.log('$data:',this.$data);//Object
console.log('this.msg:',this.msg);//vue生命周期
},
beforeMount(){
console.log('--------beforeMount 挂载之前--------');
console.log('$el:',this.$el);//<div id="app">.值还没有解析.</div>
console.log('$data:',this.$data);//Object
console.log('this.msg:',this.msg);//vue生命周期
},
mounted(){
console.log('--------mounted 挂载完成--------');
console.log('$el:',this.$el);//<div id="app">.已经解析成data中对应值.</div>
console.log('$data:',this.$data);//Object
console.log('this.msg:',this.msg);//vue生命周期
},
// 2页面更新期
beforeUpdate(){
console.log('--------beforeUpdate 更新之前--------');
console.log('$el:',this.$el);//<div id="app">.已经更新成data中对应值.</div>
console.log('$data:',this.$data);//Object
console.log('this.msg:',this.msg);//vue生命周期更新了
},
updated(){
console.log('--------updated 更新完成--------');
console.log('$el:',this.$el);//<div id="app">.已经更新成data中对应值.</div>
console.log('$data:',this.$data);//Object
console.log('this.msg:',this.msg);//vue生命周期更新了
},
// 3页面销毁
beforeDestroy(){
console.log('--------beforeDestroy 销毁之前--------');
console.log('$el:',this.$el);//<div id="app">.data中对应值.</div>
console.log('$data:',this.$data);//Object
console.log('this.msg:',this.msg);//vue生命周期
},
destroyed(){
console.log('--------destroyed 销毁完成--------');
console.log('$el:',this.$el);//<div id="app">.data中对应值.</div>
console.log('$data:',this.$data);//Object
console.log('this.msg:',this.msg);//vue生命周期
}
});
// console.log(vm);
const desBtn = document.querySelector(".destroy");
const mouBtn = document.querySelector(".mount");
desBtn.onclick = function(){
vm.$destroy();//销毁vue实例
}
mouBtn.onclick = function(){
vm.$mount();//挂载vue实例 但 更新周期 不会执行了
}
</script>
</body>
</html>