Vue生命周期詳解
這篇博客將會(huì)從下面四個(gè)常見的應(yīng)用詮釋組件的生命周期，以及各個(gè)生命周期應(yīng)該干什么事
- 單組件的生命周期
- 父子組件的生命周期
- 兄弟組件的生命周期
- 宏mixin的生命周期
生命周期：Vue 實(shí)例從開始創(chuàng)建、初始化數(shù)據(jù)、編譯模板、掛載Dom→渲染、更新→渲染、卸載等一系列過(guò)程，我們稱這是 Vue 的生命周期，各個(gè)階段有相對(duì)應(yīng)的事件鉤子
1. 生命周期鉤子函數(shù)
下面這張圖是vue生命周期各個(gè)階段的執(zhí)行情況：
注意：
created階段的ajax請(qǐng)求與mounted請(qǐng)求的區(qū)別：前者頁(yè)面視圖未出現(xiàn)，如果請(qǐng)求信息過(guò)多，頁(yè)面會(huì)長(zhǎng)時(shí)間處于白屏狀態(tài)
mounted 不會(huì)承諾所有的子組件也都一起被掛載。如果你希望等到整個(gè)視圖都渲染
完畢，可以用 vm.$nextTick
vue2.0之后主動(dòng)調(diào)用$destroy()不會(huì)移除dom節(jié)點(diǎn)，作者不推薦直接destroy這種做法，如果實(shí)在需要這樣用可以在這個(gè)生命周期鉤子中手動(dòng)移除dom節(jié)點(diǎn)
2. 單個(gè)組件的生命周期
現(xiàn)根據(jù)實(shí)際代碼執(zhí)行情況分析：
<template>
<div>
<h3>單組件</h3>
<el-button @click="dataVar += 1">更新 {{dataVar}}</el-button>
<el-button @click="handleDestroy">銷毀</el-button>
</div>
</template>
export default {
data() {
return {
dataVar: 1
}
},
beforeCreate() {
this.compName = 'single'
console.log(`--${this.compName}--beforeCreate`)
},
created() {
console.log(`--${this.compName}--created`)
},
beforeMount() {
console.log(`--${this.compName}--beforeMount`)
},
mounted() {
console.log(`--${this.compName}--mounted`)
},
beforeUpdate() {
console.log(`--${this.compName}--beforeUpdate`)
},
updated() {
console.log(`--${this.compName}--updated`)
},
beforeDestroy() {
console.log(`--${this.compName}--beforeDestroy`)
},
destroyed() {
console.log(`--${this.compName}--destroyed`)
},
methods: {
handleDestroy() {
this.$destroy()
}
}
}初始化組件時(shí)，打?。?/p>
當(dāng)data中的值變化時(shí)，打?。?/p>
當(dāng)組件銷毀時(shí)，打?。?/p>
從打印結(jié)果可以看出:
初始化組件時(shí)，僅執(zhí)行了beforeCreate/Created/beforeMount/mounted四個(gè)鉤子函數(shù)
當(dāng)改變data中定義的變量（響應(yīng)式變量）時(shí)，會(huì)執(zhí)行beforeUpdate/updated鉤子函數(shù)
當(dāng)切換組件（當(dāng)前組件未緩存）時(shí)，會(huì)執(zhí)行beforeDestory/destroyed鉤子函數(shù)
初始化和銷毀時(shí)的生命鉤子函數(shù)均只會(huì)執(zhí)行一次，beforeUpdate/updated可多次執(zhí)行
3. 父子組件的生命周期
將單組件作為基礎(chǔ)組件（由于props在beforeCreate()中未初始化），需要做如下更改：
props: {
compName: {
type: String,
default: 'single'
}
},
beforeCreate() {
// this.compName = 'single'
// console.log(`--${this.compName}--beforeCreate`)
console.log(` --data未初始化--beforeCreate`)
},父組件代碼如下：
<template>
<div class="complex">
<h3>復(fù)雜組件</h3>
<lifecycle-single compName="child"></lifecycle-single>
</div>
</template>
const COMPONENT_NAME = 'complex'
import LifecycleSingle from './LifeCycleSingle'
export default {
beforeCreate() {
console.log(`--${COMPONENT_NAME}--beforeCreate`)
},
created() {
console.log(`--${COMPONENT_NAME}--created`)
},
beforeMount() {
console.log(`--${COMPONENT_NAME}--beforeMount`)
},
mounted() {
console.log(`--${COMPONENT_NAME}--mounted`)
},
beforeUpdate() {
console.log(`--${COMPONENT_NAME}--beforeUpdate`)
},
updated() {
console.log(`--${COMPONENT_NAME}--updated`)
},
beforeDestroy() {
console.log(`--${COMPONENT_NAME}--beforeDestroy`)
},
destroyed() {
console.log(`--${COMPONENT_NAME}--destroyed`)
},
components: {
LifecycleSingle
}
}初始化組件時(shí)，打印：
當(dāng)子組件data中的值變化時(shí)，打?。?/p>
當(dāng)父組件data中的值變化時(shí)，打印：
當(dāng)props改變時(shí)，打?。?/p>
當(dāng)子組件銷毀時(shí)，打?。?/p>
當(dāng)父組件銷毀時(shí)，打印：
從打印結(jié)果可以看出:
僅當(dāng)子組件完成掛載后，父組件才會(huì)掛載
當(dāng)子組件完成掛載后，父組件會(huì)主動(dòng)執(zhí)行一次beforeUpdate/updated鉤子函數(shù)（僅首次）
父子組件在data變化中是分別監(jiān)控的，但是在更新props中的數(shù)據(jù)是關(guān)聯(lián)的（可實(shí)踐）
銷毀父組件時(shí)，先將子組件銷毀后才會(huì)銷毀父組件
4. 兄弟組件的生命周期
在上面的基礎(chǔ)上，復(fù)雜組件做如下更改
<template>
<div class="complex">
<h3>復(fù)雜組件</h3>
<lifecycle-single compName="cihld1"></lifecycle-single>
<lifecycle-single compName="child2"></lifecycle-single>
<el-button @click="dataVar += 1">complex更新 {{dataVar}}</el-button>
<el-button @click="handleDestroy">complex銷毀</el-button>
</div>
</template>初始化組件時(shí)，打?。?/p>
當(dāng)child1更新和銷毀時(shí)，打?。?/p>
當(dāng)child2更新和銷毀時(shí)，打印：
當(dāng)父組件銷毀時(shí)，打印
從打印結(jié)果可以看出:
組件的初始化（mounted之前）分開進(jìn)行，掛載是從上到下依次進(jìn)行
當(dāng)沒有數(shù)據(jù)關(guān)聯(lián)時(shí)，兄弟組件之間的更新和銷毀是互不關(guān)聯(lián)的
5. 宏mixin的生命周期
在上面的基礎(chǔ)上，添加一個(gè)mixin.js文件，內(nèi)容如下：
const COMPONENT_NAME = 'lifecycleMixin'
export default {
name: COMPONENT_NAME,
beforeCreate() {
console.log(`--${COMPONENT_NAME}--beforeCreate`)
},
created() {
console.log(`--${COMPONENT_NAME}--created`)
},
beforeMount() {
console.log(`--${COMPONENT_NAME}--beforeMount`)
},
mounted() {
console.log(`--${COMPONENT_NAME}--mounted`)
},
beforeUpdate() {
console.log(`--${COMPONENT_NAME}--beforeUpdate`)
},
updated() {
console.log(`--${COMPONENT_NAME}--updated`)
},
beforeDestroy() {
console.log(`--${COMPONENT_NAME}--beforeDestroy`)
},
destroyed() {
console.log(`--${COMPONENT_NAME}--destroyed`)
}
}同樣的，復(fù)雜組件做如下更改：
import lifecycleMixin from './mixin'
export default {
mixins: [lifecycleMixin],
// ...
}組件初始化時(shí)，打?。?/p>
組件銷毀時(shí)，打?。?/p>
從打印結(jié)果可以看出:
- mixin中的生命周期與引入該組件的生命周期是僅僅關(guān)聯(lián)的，且mixin的生命周期優(yōu)先執(zhí)行
到此這篇關(guān)于Vue生命周期的文章就介紹到這了。希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了vue實(shí)現(xiàn)百度下拉列表交互操作,結(jié)合實(shí)例形式分析了vue.js使用jsonp針對(duì)百度接口進(jìn)行交互的相關(guān)操作技巧,需要的朋友可以參考下2019-03-03
Vue列表循環(huán)從指定下標(biāo)開始的多種解決方案
這篇文章主要介紹了Vue列表循環(huán)從指定下標(biāo)開始的多種方案,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-04-04
Vue利用vue-baidu-map實(shí)現(xiàn)獲取經(jīng)緯度和搜索地址
在開發(fā)項(xiàng)目的時(shí)候，發(fā)現(xiàn)需要獲取經(jīng)緯度，由于這個(gè)項(xiàng)目是用vue寫的，最后決定使用vue-baidu-map來(lái)快速獲取經(jīng)緯度，感興趣的可以了解一下2022-09-09
vue3+ElementPlus封裝函數(shù)式彈窗組件詳解
這篇文章主要為大家詳細(xì)介紹了如何利用vue3和ElementPlus封裝函數(shù)式彈窗組件，文中的示例代碼講解詳細(xì)，感興趣的小伙伴可以了解一下2023-08-08
這篇文章主要介紹了Vue.js中組件中的slot實(shí)例詳解的相關(guān)資料,需要的朋友可以參考下2017-07-07
vuex刷新之后數(shù)據(jù)丟失,數(shù)據(jù)持久化,vuex-persistedstate問題
這篇文章主要介紹了vuex刷新之后數(shù)據(jù)丟失,數(shù)據(jù)持久化,vuex-persistedstate問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-03-03
在vue中動(dòng)態(tài)修改css其中一個(gè)屬性值操作
這篇文章主要介紹了在vue中動(dòng)態(tài)修改css其中一個(gè)屬性值操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-12-12
vue實(shí)現(xiàn)移動(dòng)端項(xiàng)目多行文本溢出省略
這篇文章主要介紹了vue實(shí)現(xiàn)移動(dòng)端項(xiàng)目多行文本溢出省略功能，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-07-07
Vue3中導(dǎo)入和使用圖標(biāo)庫(kù)Font Awesome的實(shí)現(xiàn)步驟
Font Awesome 是互聯(lián)網(wǎng)的圖標(biāo)庫(kù)和工具包,被數(shù)百萬(wàn)設(shè)計(jì)師、開發(fā)人員和內(nèi)容創(chuàng)建者使用,Font Awesome的圖標(biāo)非常豐富,基本涵蓋你所需要的所有,本文給大家介紹了Vue3中導(dǎo)入和使用圖標(biāo)庫(kù)Font Awesome的具體步驟,需要的朋友可以參考下2025-01-01
本文講述了"v-deep"深度選擇器被廢棄的情況,作者提醒讀者更新知識(shí)庫(kù),避免誤導(dǎo)他人,深度選擇器是HTML5的新屬性,用于實(shí)現(xiàn)組件私有化和防止樣式污染,如果想讓樣式中的一個(gè)選擇器作用得更深,可以使用深度選擇器,但現(xiàn)在,以前的寫法已不再支持,需要調(diào)整方法2024-10-10