??博???????主：初映CY的前說(shuō)(前端領(lǐng)域)
??個(gè)人信條：想要變成得到，中間還有做到！
??本文核心：vue生命周期的介紹、vue生命周期鉤子函數(shù)詳解，vue生命周期的執(zhí)行順序
目錄
一、生命周期介紹
二、生命周期的構(gòu)成
1. 生命周期的四個(gè)階段 :
2.八大鉤子作用：
1.beforeCreate()：
2.created()
3.beforeMont()
4.monted()
5.beforeUpdata()
6.updated()
7.beforeDestroy()
8.destroyed()
三、執(zhí)行順序
一、生命周期介紹
概念：
即一個(gè)組件從創(chuàng)建到銷(xiāo)毀的一個(gè)完整的過(guò)程
二、生命周期的構(gòu)成
鉤子概念：?vue從創(chuàng)建到銷(xiāo)毀過(guò)程中，會(huì)執(zhí)行的一些回調(diào)函數(shù)
1. 生命周期的四個(gè)階段 :
- ?初始化階段: ?beforeCreate、 created
- ?掛載階段 : beforeMount、mounted
- ?更新階段 : beforeUpdate、updated
- ?銷(xiāo)毀階段: ?beforeDestroy、destroyed
| 執(zhí)行順序 | 鉤子函數(shù) | 執(zhí)行時(shí)機(jī) |
| 1 | beforeCreate(){} | vue實(shí)例創(chuàng)建了，但是el和data還沒(méi)有創(chuàng)建 （準(zhǔn)備創(chuàng)建data） 底層（初始化vue實(shí)例，初始化鉤子函數(shù)，初始化一些事件和偵聽(tīng)器配置項(xiàng)） |
| 2 | created() {} | data數(shù)據(jù)創(chuàng)建了，但是el掛載點(diǎn)還沒(méi)有創(chuàng)建 (準(zhǔn)備創(chuàng)建el) 底層：初始化data中的數(shù)據(jù)和methods中的方法 |
| 3 | beforeMount() {} | el掛載點(diǎn)創(chuàng)建了，但是data數(shù)據(jù)還沒(méi)有渲染（準(zhǔn)備渲染中） 底層：創(chuàng)建el掛載點(diǎn)，并且生成虛擬DOM |
| 4 | mounted() {} | data數(shù)據(jù) 第一次 渲染完畢 (完成初始渲染) 底層：將虛擬dom渲染成真實(shí)DOM |
| 5 | beforeUpdate() {} | 檢測(cè)到data數(shù)據(jù)變化，但是還沒(méi)有開(kāi)始重新渲染 (data變了，準(zhǔn)備重新渲染中) 會(huì)執(zhí)行多次
|
| 6 | updated() {} | 變化后的data數(shù)據(jù) ，完成渲染到頁(yè)面 （完成重新渲染，會(huì)重復(fù)執(zhí)行 |
| 7 | beforeDestroy() {} | vue實(shí)例銷(xiāo)毀即將銷(xiāo)毀(解除data與el的關(guān)聯(lián)),之后修改data，頁(yè)面不會(huì)被渲染 底層 ： 解除 事件綁定、偵聽(tīng)器、組件 |
| 8 | destroyed() {} | vue實(shí)例已經(jīng)銷(xiāo)毀 |
2.八大鉤子作用：
[前置準(zhǔn)備]先創(chuàng)建一個(gè)空的vue文件，寫(xiě)入我們需要的素材
<template>
<div>
<button @click=" name='李四' ">點(diǎn)我改名字</button>
<button @click="$destroy()">點(diǎn)我銷(xiāo)毀</button>
<p>{{ name }}</p>
<p>{{ age }}</p>
</div>
</template>
<script>
export default {
data() {
return {
name: "張三",
age: 20
};
}
};
</script>
<style>
</style>上述頁(yè)面瀏覽效果如下：
1.beforeCreate()：
- vue實(shí)例創(chuàng)建了，但是el和data還沒(méi)有創(chuàng)建 （準(zhǔn)備創(chuàng)建data）
- 底層（初始化vue實(shí)例，初始化鉤子函數(shù)，初始化一些事件和偵聽(tīng)器配置項(xiàng)）
/* 生命周期鉤子 */
// 1. beforeCreate() : 創(chuàng)建了vue實(shí)例，但是還沒(méi)有創(chuàng)建data
beforeCreate() {
console.log(1);
console.log(this);
console.log(this.name);
}寫(xiě)入beforeCreate頁(yè)面效果查看：
我們是生成了初始的vue實(shí)例，但是我們存放在data中的數(shù)據(jù)沒(méi)有取到
2.created()
- 創(chuàng)建初始了data,但是還沒(méi)有掛載
- 經(jīng)典應(yīng)用 ： 頁(yè)面一加載, ajax請(qǐng)求數(shù)據(jù)渲染頁(yè)面。一般寫(xiě)在這個(gè)鉤子里面
// 2.created() : 創(chuàng)建了data,但是還沒(méi)有掛載
/* 常用: 最早可以獲取data的鉤子， 一般在這個(gè)鉤子發(fā)送ajax */
created() {
console.log(2);
console.log(this);
console.log(this.name);
console.log(this.$el);
}寫(xiě)入created頁(yè)面效果查看：
此時(shí)我們存放在data中的數(shù)據(jù)被找到了?，但是我們的掛載點(diǎn)沒(méi)有被找到
3.beforeMont()
- 創(chuàng)建掛載點(diǎn)，但是還沒(méi)有把data掛載到el
// 3.beforeMount() : 創(chuàng)建掛載點(diǎn)，但是還沒(méi)有把data掛載到el
beforeMount() {
console.log(3);
console.log(this);
// html環(huán)境,這個(gè)鉤子$el可以獲取掛載點(diǎn)。 腳手架環(huán)境, 這個(gè)鉤子$el獲取的是undefined
console.log(this.$el);
const p = document.querySelector("p");
console.log(p); //null 沒(méi)有渲染,所以無(wú)法獲取dom
}?寫(xiě)入beforeMont頁(yè)面效果查看：
這一步是生成創(chuàng)建我們的掛載點(diǎn)?
4.monted()
- 完成初始渲染。 把data數(shù)據(jù)渲染到掛載點(diǎn)el
- 經(jīng)典應(yīng)用 ： 一般常用于操作dom(頁(yè)面一家在需要操作DOM在這個(gè)鉤子上)
mounted() {
console.log(4);
console.log(this);
console.log(this.$el);
const p = document.querySelector("p");
console.log(p); // p標(biāo)簽 完成渲染
}??寫(xiě)入monted頁(yè)面效果查看：
我們的掛載點(diǎn)創(chuàng)建成功，講我們data中的數(shù)據(jù)存放進(jìn)去并渲染成功啦！
經(jīng)歷了上述的四個(gè)階段的操作現(xiàn)在我們完成了組件data中的被數(shù)據(jù)獲取到頁(yè)面渲染的整個(gè)流程，接下來(lái)的鉤子是用于修改data數(shù)據(jù)與銷(xiāo)毀我們的vue實(shí)例
5.beforeUpdata()
- ?檢測(cè)到data數(shù)據(jù)發(fā)生變化,但是還沒(méi)有更新el
- 檢測(cè)data數(shù)據(jù)變化， 修改虛擬DOM
- 當(dāng)有data數(shù)據(jù)改變 – 重復(fù)這個(gè)循環(huán)( beforeUpdata()與updated() )
?寫(xiě)入beforeUpdata頁(yè)面效果查看：
?第一步：先在我們的vue中打一個(gè)debuddgr斷點(diǎn)，防止我們走到updataed的位置
beforeUpdate() {
console.log(5);
console.log(this);// 獲取的是變化后的數(shù)據(jù), 但是頁(yè)面還是顯示之前的數(shù)據(jù)
debugger
}第二步：我們現(xiàn)在在vuetools中修改data中的數(shù)據(jù)，當(dāng)修改數(shù)據(jù)后面不變化！當(dāng)我確定的時(shí)候會(huì)依舊變成張三。但是我們的內(nèi)存中會(huì)顯示出我們修改過(guò)的內(nèi)容
?可以看到我們的vue實(shí)例對(duì)象中的name被我們成功的修改了，但是大家看右上角的張三，并沒(méi)有被我們修成。
【再次驗(yàn)證】這是我們直接修改data中的數(shù)據(jù)，當(dāng)我們點(diǎn)擊 “點(diǎn)我改名字”這個(gè)按鈕的時(shí)候也會(huì)出現(xiàn)
之后我們卡在這里了，當(dāng)我們點(diǎn)擊箭頭的時(shí)候，我們的vue就更新了?
6.updated()
- 更新之后的data,完成渲染
- 完成data渲染（將虛擬DOM渲染成真實(shí)DOM）
// 6.updated(): 更新之后的data,完成渲染
updated() {
console.log(6);
console.log(this);
}?寫(xiě)入updated頁(yè)面效果查看：
顯而易見(jiàn)當(dāng)我們修改之后我們的數(shù)據(jù)馬上就渲染到頁(yè)面上了。實(shí)現(xiàn)了徹底更新的操作
7.beforeDestroy()
- ?正在銷(xiāo)毀(接觸data與el綁定、移除事件監(jiān)聽(tīng)、移除偵聽(tīng)器)
? 觸發(fā)銷(xiāo)毀鉤子的兩個(gè)條件?
? (1)對(duì)組件使用v-if
? (2)調(diào)用組件的 this.$destroy()?
?寫(xiě)入beforeDestroy頁(yè)面效果查看：
我們的vue實(shí)例正在被銷(xiāo)毀
8.destroyed()
- 完成銷(xiāo)毀
//8.destroyed(): 完成銷(xiāo)毀
destroyed() {
console.log(8);
console.log(this);
}???寫(xiě)入destroy頁(yè)面效果查看：
至此我們的vue實(shí)例對(duì)象從出生創(chuàng)建到銷(xiāo)毀嘍
上述操作的源代碼見(jiàn)下：
App.vue
<template>
<div>
<button @click="name = '李四'">點(diǎn)我改名字</button>
<button @click="$destroy()">點(diǎn)我銷(xiāo)毀</button>
<p>{{ name }}</p>
<p>{{ age }}</p>
</div>
</template>
<script>
export default {
data() {
return {
name: '張三',
age: 20,
}
},
/* 生命周期鉤子 */
// 1. beforeCreate() : 創(chuàng)建了vue實(shí)例，但是還沒(méi)有創(chuàng)建data
beforeCreate() {
console.log(1)
console.log(this)
console.log(this.name)
},
// 2.created() : 創(chuàng)建了data,但是還沒(méi)有掛載
/* 常用: 最早可以獲取data的鉤子， 一般在這個(gè)鉤子發(fā)送ajax */
created() {
console.log(2)
console.log(this)
console.log(this.name)
console.log(this.$el)
},
// 3.beforeMount() : 創(chuàng)建掛載點(diǎn)，但是還沒(méi)有把data掛載到el
beforeMount() {
console.log(3)
console.log(this)
// html環(huán)境,這個(gè)鉤子$el可以獲取掛載點(diǎn)。 腳手架環(huán)境, 這個(gè)鉤子$el獲取的是undefined
console.log(this.$el)
const p = document.querySelector('p')
console.log(p) //null 沒(méi)有渲染,所以無(wú)法獲取dom')
},
// 4.mounted() : 完成初始渲染。 把data數(shù)據(jù)渲染到掛載點(diǎn)el
/* 常用: 最早可以操作DOM的鉤子 */
mounted() {
console.log(4)
console.log(this)
console.log(this.$el)
const p = document.querySelector('p')
console.log(p) // p標(biāo)簽 完成渲染
},
// 5.beforeUpdate() : 檢測(cè)到data數(shù)據(jù)發(fā)生變化,但是還沒(méi)有更新el
beforeUpdate() {
console.log(5)
console.log(this) // 獲取的是變化后的數(shù)據(jù), 但是頁(yè)面還是顯示之前的數(shù)據(jù)
// eslint-disable-next-line no-debugger
debugger
},
// 6.updated(): 更新之后的data,完成渲染
updated() {
console.log(6)
console.log(this)
},
// 7.beforeDestroy(): 正在銷(xiāo)毀(接觸data與el綁定、移除事件監(jiān)聽(tīng)、移除偵聽(tīng)器)
/*觸發(fā)銷(xiāo)毀鉤子的兩個(gè)條件
(1)對(duì)組件使用v-if
(2)調(diào)用組件的 this.$destroy()
*/
beforeDestroy() {
console.log(7)
console.log(this)
// eslint-disable-next-line no-debugger
},
//8.destroyed(): 完成銷(xiāo)毀
destroyed() {
console.log(8)
console.log(this)
},
}
</script>
<style>
</style>三、執(zhí)行順序
即按照我們介紹鉤子函數(shù)的順序依次往下執(zhí)行
App.vue
<template>
<div>
<!-- 導(dǎo)入子組件 -->
<son></son>
</div>
</template>
<script>
import son from '@/components/son.vue'
export default {
components: { son },
/* 生命周期鉤子 */
// 1. beforeCreate() : 創(chuàng)建了vue實(shí)例，但是還沒(méi)有創(chuàng)建data
beforeCreate() {
console.log('父的beforeCreate')
},
// 2.created() : 創(chuàng)建了data,但是還沒(méi)有掛載
/* 常用: 最早可以獲取data的鉤子， 一般在這個(gè)鉤子發(fā)送ajax */
created() {
console.log('父的Created')
},
// 3.beforeMount() : 創(chuàng)建掛載點(diǎn)，但是還沒(méi)有把data掛載到el
beforeMount() {
console.log('父的beforeMount')
},
// 4.mounted() : 完成初始渲染。 把data數(shù)據(jù)渲染到掛載點(diǎn)el
/* 常用: 最早可以操作DOM的鉤子 */
mounted() {
console.log('父的Mounted')
},
}
</script>
<style>
</style>?son.vue
<!-- eslint-disable vue/multi-word-component-names -->
<template>
<div>
</div>
</template>
<script>
export default {
beforeCreate() {
console.log('子的beforeCreate')
},
// 2.created() : 創(chuàng)建了data,但是還沒(méi)有掛載
/* 常用: 最早可以獲取data的鉤子， 一般在這個(gè)鉤子發(fā)送ajax */
created() {
console.log('子的Created')
},
// 3.beforeMount() : 創(chuàng)建掛載點(diǎn)，但是還沒(méi)有把data掛載到el
beforeMount() {
// html環(huán)境,這個(gè)鉤子$el可以獲取掛載點(diǎn)。 腳手架環(huán)境, 這個(gè)鉤子$el獲取的是undefined
console.log('子的beforeMount')
},
// 4.mounted() : 完成初始渲染。 把data數(shù)據(jù)渲染到掛載點(diǎn)el
/* 常用: 最早可以操作DOM的鉤子 */
mounted() {
console.log('子的Mounted')
},
}
</script>
<style>
</style>?我們跑一下看下執(zhí)行效果：
文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-782765.html
?發(fā)現(xiàn)是我們父元素先執(zhí)行到beforeMont,隨后等子渲染完成(執(zhí)行子的mounted)最后將父的mounted執(zhí)行完成，完成我們最終的渲染。雖然是有包含關(guān)系，但是執(zhí)行流程是不變的。文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-782765.html
到了這里，關(guān)于【vue2】vue生命周期的理解的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
