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

1、圖解Vue的生命周期

2、鉤子函數(shù)

【解釋】：

鉤子函數(shù)是Vue框架中內(nèi)置的一些函數(shù)，隨著Vue的生命周期階段，自動執(zhí)行

【作用】：

特定的時間，執(zhí)行特定的操作

【分類】：

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

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

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

【圖示】：

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

【el選項掛載點圖解】：

【代碼演示】：

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

【控制臺結(jié)果】：

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

【圖解掛載階段】：

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

【代碼演示】：

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

【控制臺效果】：

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

【更新圖解】：

• 當(dāng)data里數(shù)據(jù)改變, 更新DOM之前，beforeUpdate – 生命周期鉤子函數(shù)被執(zhí)行此時獲取不到更新的真實dom
• Virtual DOM：虛擬DOM重新渲染, 打補丁到真實DOM
• updated – 生命周期鉤子函數(shù)被執(zhí)行
• 當(dāng)有data數(shù)據(jù)改變 – 重復(fù)這個循環(huán)

【代碼演示】：

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

【效果展示】：

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

【圖解銷毀】：

當(dāng)$destroy()被調(diào)用：比如組件DOM被移除(例v-if)

beforeDestroy：生命周期鉤子函數(shù)被執(zhí)行

拆卸數(shù)據(jù)監(jiān)視器、子組件和事件偵聽器

實例銷毀后, 最后觸發(fā)一個鉤子函數(shù)

destroyed： 生命周期鉤子函數(shù)被執(zhí)行

【代碼演示】

<template><div><h1>1、生命周期</h1><p>控制臺打印結(jié)果：</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 {// 數(shù)據(jù)對象data() {return {msg: "你好世界！！",arr: [1, 2, 3],timer: "",};},// new Vue()之后執(zhí)行 vue內(nèi)部給實例添加了一些屬性和方法// data和methods之前執(zhí)行beforeCreate() {console.log("beforeCreate函數(shù)執(zhí)行了");// 此時獲取不到data中的變量值console.log(this.msg);},methods: {add() {this.arr.push(Math.floor(Math.random() * 10));},},// data和methods之后執(zhí)行created() {console.log("create函數(shù)執(zhí)行了");// 此時可以獲取到data中的變量值console.log(this.msg);this.timer = setInterval(() => {console.log("哈哈哈哈！");}, 1000);},/*** 2、掛載*///真實DOM掛載之前// 使用場景：預(yù)處理data，不會觸發(fā)update鉤子函數(shù)beforeMount() {console.log("beforeMount函數(shù)執(zhí)行了----此時獲取不到真實DOM");console.log(document.getElementById("myMsg"));// 重新改變data中的值this.msg = "hello,world";},//真實DOM掛載之后// 此處可以獲取到真實的DOMmounted() {console.log("beforeMount函數(shù)執(zhí)行了----此時可以獲取到真實DOM");console.log(document.getElementById("myMsg"));},/*** 3、更新*///更新之前beforeUpdate() {console.log("beforeUpdate函數(shù)執(zhí)行了-----此時獲取不到更新的真實DOM");console.log(document.querySelectorAll("#myArr>li"));},// 更新之后// 場景：獲取更新真實DOM之后updated() {console.log("update函數(shù)執(zhí)行了-----此時可以獲取到更新的真實DOM");console.log(document.querySelectorAll("#myArr>li"));},/*** 4、銷毀*/beforeDestroy() {console.log("beforeDestroy函數(shù)執(zhí)行了");clearInterval(this.timer)},destroyed() {console.log("destroyed函數(shù)執(zhí)行了");}, }; </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>

【效果演示】：

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。