首先，我們了解一下"生命周期"這個詞。通俗的來說，生命周期就是一個事務從出生到消失的過程。例如，一個人從出生到去世。在vue中，vue的生命周期是指，從創建vue對象到銷毀vue對象的過程。

1、圖解Vue的生命周期

2、鉤子函數

【解釋】：

鉤子函數是Vue框架中內置的一些函數，隨著Vue的生命周期階段，自動執行

【作用】：

特定的時間，執行特定的操作

【分類】：

四大階段，八大方法 階段方法名方法名

初始化	beforeCreate	created
掛載	beforeMount	mounted
更新	beforeUpdate	updated
銷毀	beforeDestroy	destroyed

4、Vue生命周期之初始化階段

【圖示】：

• new Vue()： Vue實例化對象(組件也是一個的vue實例化對象)
• Init Events & Lifecycle：初始化事件和生命周期函數
• beforeCreate：生命周期函數被執行此時不能訪問data和menthods等中的東西
• Init injections&reactivity：vue內部添加data和methods等
• created：生命周期鉤子函數被執行，實例創建此時能訪問data和menthods等中的東西
• 接下來開始編譯模板：開始分析
• Has el option? ：是否有el選項 – 檢查要掛到哪里
• 沒有. 調用$mount()方法
• 有, 繼續檢查template選項

【el選項掛載點圖解】：

【代碼演示】：

<template><div><h1>1、生命周期——初始化階段</h1><p>控制臺打印結果：</p><p>{{ msg }}</p></div> </template><script> export default {// 數據對象data() {return {msg: "你好世界！！",};},// new Vue()之后執行 vue內部給實例添加了一些屬性和方法// data和methods之前執行beforeCreate() {console.log("beforeCreate函數執行了");// 此時獲取不到data中的變量值console.log(this.msg);},// data和methods之后執行created() {console.log("create函數執行了");// 此時可以獲取到data中的變量值console.log(this.msg);},}; </script><style> </style>

【控制臺結果】：

5、Vue生命周期之掛載階段

【圖解掛載階段】：

• template選項檢查:
• 有：編譯template返回render渲染函數
• 無：編譯el選項對應標簽作為template(要渲染的模板）vue工程項目不支持
• 虛擬DOM掛載成真實DOM之前:
• beforeMount ：生命周期鉤子函數被執行
• Create： 把虛擬DOM和渲染的數據一并掛到真實DOM上
• 掛載完畢，mounted：生命周期鉤子函數被執行

【代碼演示】：

<template><div><h1>1、生命周期</h1><p>控制臺打印結果：</p><p id="myMsg">{{ msg }}</p></div> </template><script> export default {// 數據對象data() {return {msg: "你好世界！！",};},// new Vue()之后執行 vue內部給實例添加了一些屬性和方法// data和methods之前執行beforeCreate() {console.log("beforeCreate函數執行了");// 此時獲取不到data中的變量值console.log(this.msg);},// data和methods之后執行created() {console.log("create函數執行了");// 此時可以獲取到data中的變量值console.log(this.msg);},/*** 2、掛載*///真實DOM掛載之前// 使用場景：預處理data，不會觸發update鉤子函數beforeMount() {console.log("beforeMount函數執行了----此時獲取不到真實DOM");console.log(document.getElementById("myMsg"));// 重新改變data中的值this.msg = "hello,world";},//真實DOM掛載之后// 此處可以獲取到真實的DOMmounted() {console.log("beforeMount函數執行了----此時可以獲取到真實DOM");console.log(document.getElementById("myMsg"));}, }; </script><style> </style>

【控制臺效果】：

6、Vue生命周期之更新階段

【更新圖解】：

• 當data里數據改變, 更新DOM之前，beforeUpdate – 生命周期鉤子函數被執行此時獲取不到更新的真實dom
• Virtual DOM：虛擬DOM重新渲染, 打補丁到真實DOM
• updated – 生命周期鉤子函數被執行
• 當有data數據改變 – 重復這個循環

【代碼演示】：

<template><div><h1>1、生命周期</h1><p>控制臺打印結果：</p><p id="myMsg">{{ msg }}</p><ul id="myArr"><li v-for="(item, index) in arr" :key="index">{{ item }}</li></ul><button @click="add">末尾加值</button></div> </template><script> export default {// 數據對象data() {return {msg: "你好世界！！",arr: [1, 2, 3],};},// new Vue()之后執行 vue內部給實例添加了一些屬性和方法// data和methods之前執行beforeCreate() {console.log("beforeCreate函數執行了");// 此時獲取不到data中的變量值console.log(this.msg);},methods: {add() {this.arr.push(Math.floor(Math.random() * 10));},},// data和methods之后執行created() {console.log("create函數執行了");// 此時可以獲取到data中的變量值console.log(this.msg);},/*** 2、掛載*///真實DOM掛載之前// 使用場景：預處理data，不會觸發update鉤子函數beforeMount() {console.log("beforeMount函數執行了----此時獲取不到真實DOM");console.log(document.getElementById("myMsg"));// 重新改變data中的值this.msg = "hello,world";},//真實DOM掛載之后// 此處可以獲取到真實的DOMmounted() {console.log("beforeMount函數執行了----此時可以獲取到真實DOM");console.log(document.getElementById("myMsg"));},/*** 3、更新*///更新之前beforeUpdate() {console.log("beforeUpdate函數執行了-----此時獲取不到更新的真實DOM");console.log(document.querySelectorAll("#myArr>li"));},// 更新之后// 場景：獲取更新真實DOM之后updated() {console.log("update函數執行了-----此時可以獲取到更新的真實DOM");console.log(document.querySelectorAll("#myArr>li"));}, }; </script><style> </style>

【效果展示】：

7、Vue生命周期之銷毀階段

【圖解銷毀】：

當$destroy()被調用：比如組件DOM被移除(例v-if)

beforeDestroy：生命周期鉤子函數被執行

拆卸數據監視器、子組件和事件偵聽器

實例銷毀后, 最后觸發一個鉤子函數

destroyed： 生命周期鉤子函數被執行

【代碼演示】

<template><div><h1>1、生命周期</h1><p>控制臺打印結果：</p><p id="myMsg">{{ msg }}</p><ul id="myArr"><li v-for="(item, index) in arr" :key="index">{{ item }}</li></ul><button @click="add">末尾加值</button></div> </template><script> export default {// 數據對象data() {return {msg: "你好世界！！",arr: [1, 2, 3],timer: "",};},// new Vue()之后執行 vue內部給實例添加了一些屬性和方法// data和methods之前執行beforeCreate() {console.log("beforeCreate函數執行了");// 此時獲取不到data中的變量值console.log(this.msg);},methods: {add() {this.arr.push(Math.floor(Math.random() * 10));},},// data和methods之后執行created() {console.log("create函數執行了");// 此時可以獲取到data中的變量值console.log(this.msg);this.timer = setInterval(() => {console.log("哈哈哈哈！");}, 1000);},/*** 2、掛載*///真實DOM掛載之前// 使用場景：預處理data，不會觸發update鉤子函數beforeMount() {console.log("beforeMount函數執行了----此時獲取不到真實DOM");console.log(document.getElementById("myMsg"));// 重新改變data中的值this.msg = "hello,world";},//真實DOM掛載之后// 此處可以獲取到真實的DOMmounted() {console.log("beforeMount函數執行了----此時可以獲取到真實DOM");console.log(document.getElementById("myMsg"));},/*** 3、更新*///更新之前beforeUpdate() {console.log("beforeUpdate函數執行了-----此時獲取不到更新的真實DOM");console.log(document.querySelectorAll("#myArr>li"));},// 更新之后// 場景：獲取更新真實DOM之后updated() {console.log("update函數執行了-----此時可以獲取到更新的真實DOM");console.log(document.querySelectorAll("#myArr>li"));},/*** 4、銷毀*/beforeDestroy() {console.log("beforeDestroy函數執行了");clearInterval(this.timer)},destroyed() {console.log("destroyed函數執行了");}, }; </script><style> </style>-------App.vue----------------- <template><div><Life v-if="isShow"></Life><button @click="isShow = false">銷毀組件</button></div> </template><script> import Life from "@/components/Life"; export default {data() {return {isShow: true,};},components: {Life,}, }; </script><style> </style>

【效果演示】：

總結

以上是生活随笔為你收集整理的11、Vue的生命周期的全部內容，希望文章能夠幫你解決所遇到的問題。

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