定義：vue的生命周期是指vue實例從初始化創建到實例銷毀的過程。期間會有8個鉤子函數的調用。

?

vue的鉤子函數圖解：

?

vue的鉤子函數使用總結：

1、beforeCreate（創建前）:beforeCreate鉤子函數，這個時候，vue實例的掛載元素$el和數據對象data都為undefined，還未初始化。無法訪問到數據和真實的dom和data中的數據，可以在這里面使用loading

2、created（創建后）:created函數中可以對data對象里面的數據進行使用和更改，不會觸發其他的鉤子函數，一般可以在這里做初始數據的獲取，也可以結束loading; 這里進行dom操作需要使用vue.nextTick()方法

3、beforeMount（掛載前）：beforeMount鉤子函數，vue實例的$el和data都初始化了，但還是虛擬的dom節點，具體的data.filter還未替換。在這里也可以更改數據，不會觸發其他的鉤子函數，一般可以在這里做初始數據的獲取

4、mounted（掛載后）：mounted鉤子函數，此時，組件已經出現在頁面中，數據、真實dom都已經處理好了,事件都已經掛載好了，data.filter成功渲染，可以在這里操作真實dom等事情...

5、beforeUpdate （更新前）：當組件或實例的數據更改之后，會立即執行beforeUpdate，然后vue的虛擬dom機制會重新構建虛擬dom與上一次的虛擬dom樹利用diff算法進行對比之后重新渲染，一般不做什么事兒

6、updated（更新后）：當更新完成后，執行updated，數據已經更改完成，dom也重新render完成，可以操作更新后的虛擬dom

7、beforeDestroy（銷毀前）：當經過某種途徑調用$destroy方法后，立即執行beforeDestroy，一般在這里做一些善后工作，例如清除計時器、清除非指令綁定的事件等等

8、destroyed（銷毀后）：vue實例解除了事件監聽以及和dom的綁定（無響應了），但DOM節點依舊存在。這個時候，執行destroyed，在這里做善后工作也可以

?

vue的鉤子函數代碼驗證：

console打印效果：

demo驗證代碼：

<template><div><h3>{{testMsg}}</h3><p style="color:red;" id="testNum">{{testNum}}</p><div><button @click="changNum()">點擊修改num的數值大小</button></div><p style="color:red;">過濾器處理后的值：{{testNum | add(10,20)}}</p><div><button @click="destroyVue()">銷毀</button></div></div> </template><script> export default {name: 'HelloWorld',// data是數據對象data () { return {testMsg:"原始值",num:2,}},//computed對象包括需要計算的屬性，屬性值依賴于別的數據computed:{testNum:function(){let that =this;return that.num * 3;},},//檢測某一屬性值的變化，屬性值的變化會造成其他dom變化watch:{testNum:function(val){if(val>9){console.log("testNum的值變得大于9了！");}}},//組件內部的方法methods:{changNum:function(){let that =this;that.num=5;},destroyVue:function(){this.$destroy();}},//過濾器對象，filter的第一個參數默認是當前的item值filters:{add:function(val,num1,num2){return val+num1+num2;},},//vue實例創建前beforeCreate:function(){console.group('beforeCreate 創建前狀態===============》'); //console的分組打印console.log("%c%s", "color:red","el : " + this.$el); //輸出undefinedconsole.log("%c%s", "color:red","data : " + this.$data); //輸出undefinedconsole.log("%c%s", "color:red","testMsg: " + this.testMsg);//輸出undefinedconsole.log("%c%s", "color:red","testNum: " + this.testNum);//輸出undefinedconsole.groupEnd(); },//vue實例創建完成，可以進行data對象中數據操作，一般獲取初始化數據created:function(){console.group('created 創建完成狀態===============》');console.log("%c%s", "color:red","el : " + this.$el); //輸出undefinedconsole.log("%c%s", "color:red","data : " + this.$data); //輸出[Object Object] ,初始化成功console.log("%c%s", "color:red","testMsg: " + this.testMsg);//輸出:"原始值",初始化成功console.log("%c%s", "color:red","testNum: " + this.testNum);//輸出：6，可以computed計算console.groupEnd(); },//vue實例掛載前，不能獲取$el元素，生成的虛擬dombeforeMount:function(){console.group('beforeMount 掛載前狀態===============》');console.log("%c%s", "color:red","el : " + this.$el); //undefinedconsole.log("%c%s", "color:red","data : " + this.$data); //初始化成功console.log("%c%s", "color:red","testMsg: " + this.testMsg);//初始化成功console.log("%c%s", "color:red","testNum: " + this.testNum);//初始化成功console.log($("#testNum").text()); //無輸出，dom未生成console.groupEnd(); },//mounted:function(){console.group('mounted 掛載完成的狀態===============》');console.log("%c%s", "color:red","el : " + this.$el); //輸出[object HTMLDivElement],初始化成功console.log("%c%s", "color:red","data : " + this.$data); //初始化成功console.log("%c%s", "color:red","testMsg: " + this.testMsg);//初始化成功console.log("%c%s", "color:red","testNum: " + this.testNum);//初始化成功console.log($("#testNum").text()); //輸出6，初始化成功console.groupEnd(); },//更改data對象中數據后，頁面渲染新數據前的狀態beforeUpdate:function(){console.group('beforeUpdate 更新前的狀態===============》');console.log("%c%s", "color:red","el : " + this.$el); //初始化成功console.log("%c%s", "color:red","data : " + this.$data); //初始化成功console.log("%c%s", "color:red","testMsg: " + this.testMsg);//初始化成功console.log("%c%s", "color:red","testNum: " + this.testNum);//初始化成功console.log($("#testNum").text()); //初始化成功console.groupEnd(); },//數據更改后并重新渲染后，dom也重新更新了updated:function(){console.group('updated 更新完成的狀態==========');console.log("%c%s", "color:red","el : " + this.$el); //初始化成功console.log("%c%s", "color:red","data : " + this.$data); //初始化成功console.log("%c%s", "color:red","testMsg: " + this.testMsg);//初始化成功console.log("%c%s", "color:red","testNum: " + this.testNum);//初始化成功console.log($("#testNum").text()); //初始化成功console.groupEnd(); },//銷毀前beforeDestroy:function(){console.group('beforeDestroy 銷毀前的狀態');console.log("%c%s", "color:red","el : " + this.$el); console.log("%c%s", "color:red","data : " + this.$data); console.log("%c%s", "color:red","testMsg: " + this.testMsg);console.log("%c%s", "color:red","testNum: " + this.testNum);console.log($("#testNum").text()); console.groupEnd(); },//銷毀后修改data數據無效，生成的dom依舊存在destroyed(){console.group('destroyed 銷毀完成的狀態===============》');console.log("%c%s", "color:red","el : " + this.$el); console.log("%c%s", "color:red","data : " + this.$data); console.log("%c%s", "color:red","testMsg: " + this.testMsg);console.log("%c%s", "color:red","testNum: " + this.testNum);console.log($("#testNum").text()); console.groupEnd(); },} </script>

?

?

總結

以上是生活随笔為你收集整理的vue生命周期详解、钩子函数的调用（简单易懂）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。