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>