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

1、圖解Vue的生命周期

2、鉤子函數(shù)

【解釋】：

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

【作用】：

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

【分類】：

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

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

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

【圖示】：

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

【el選項(xiàng)掛載點(diǎn)圖解】：

【代碼演示】：

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

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

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

【圖解掛載階段】：

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

【代碼演示】：

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

【控制臺(tái)效果】：

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

【更新圖解】：

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

【代碼演示】：

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

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

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

【代碼演示】

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