一、生命周期的概念
Vue實例的生命周期: 從創(chuàng)建到銷毀的整個過程
二、鉤子函數(shù)
Vue框架內(nèi)置函數(shù),隨著組件的生命周期階段,自動執(zhí)行
作用:特定的時間點,執(zhí)行特定的操作-
分類:四大階段 八大方法
三、Vue2的生命周期
3.1 初始化階段
- new Vue() – Vue實例化(組件也是一個小的Vue實例)
- Init Events & Lifecycle – 初始化事件和生命周期函數(shù)
- beforeCreate – 生命周期鉤子函數(shù)被執(zhí)行(data和methods初始化之前)
- Init injections&reactivity – Vue內(nèi)部添加data和methods等
- created – 生命周期鉤子函數(shù)被執(zhí)行, 實例創(chuàng)建(不能獲取真實的DOM)
- 接下來是編譯模板階段 –開始分析
- Has el option? – 是否有el選項 – 檢查要掛到哪里
沒有. 調(diào)用$mount()方法
有, 繼續(xù)檢查template選項
<template>
<div>
<p>學習生命周期 - 看控制臺的打印</p>
<p id="mp">{{ msg }}</p>
</div>
</template>
<script>
export default {
//第一階段 初始化
//new Vue以后，vue內(nèi)部給實例對象添加了一些屬性和方法，data和methods初始化之前
beforeCreate() {
console.log('1.beforeCreate--執(zhí)行')
console.log('msg', this.msg); //undefined
},
//data和methods初始化以后 不能獲取真實的DOM
//場景：網(wǎng)絡請求，注冊全局事件，綁定頁面滾動事件
created() {
console.log('2.created--執(zhí)行');
console.log('msg', this.msg); //hello word
},
data() {
return {
msg: 'hello word',
}
}
}
</script>
3.2 掛載階段
- template選項檢查
有 - 編譯template返回render渲染函數(shù)
無 – 編譯el選項對應標簽作為template(要渲染的模板) - 虛擬DOM掛載成真實DOM之前
- beforeMount – 生命周期鉤子函數(shù)被執(zhí)行
- Create … – 把虛擬DOM和渲染的數(shù)據(jù)一并掛到真實DOM上
- 真實DOM掛載完畢
-
mounted – 生命周期鉤子函數(shù)被執(zhí)行
<template>
<div>
<p>學習生命周期 - 看控制臺的打印</p>
<p id="mp">{{ msg }}</p>
<ul id="uls">
<li v-for="item in arr">{{ item }}</li>
</ul>
</div>
</template>
<script>
export default {
//第一階段 初始化
//new Vue以后，vue內(nèi)部給實例對象添加了一些屬性和方法，data和methods初始化之前
beforeCreate() {
console.log('1.beforeCreate--執(zhí)行')
console.log('msg', this.msg); //undefined
},
//data和methods初始化以后 不能獲取真實的DOM
//場景：網(wǎng)絡請求，注冊全局事件，綁定頁面滾動事件
created() {
console.log('2.created--執(zhí)行');
console.log('msg', this.msg); //hello word
},
//第二階段 掛載階段
//真實DOM掛載之前
//場景 預處理data，不會觸發(fā)updated鉤子函數(shù)
beforeMount() {
console.log('3.beforeMount--執(zhí)行');
console.log(document.querySelector('#mp')) //null
this.msg = '重新改變了'
},
//真實DOM掛載之后
//獲取掛載后的真實DOM
mounted() {
console.log('4.mounted--執(zhí)行');
console.log(document.querySelector('#mp')) //p
},
data() {
return {
msg: 'hello word',
arr: [2, 6, 4, 2, 1],
}
}
}
</script>
3.3 更新階段
- 當data里數(shù)據(jù)改變, 更新DOM之前
- beforeUpdate – 生命周期鉤子函數(shù)被執(zhí)行
- Virtual DOM…… – 虛擬DOM重新渲染, 打補丁到真實DOM
- updated – 生命周期鉤子函數(shù)被執(zhí)行
- 當有data數(shù)據(jù)改變 – 重復這個循環(huán)
<template>
<div>
<p>學習生命周期 - 看控制臺的打印</p>
<p id="mp">{{ msg }}</p>
<ul id="uls">
<li v-for="item in arr">{{ item }}</li>
</ul>
<button @click="arr.push(1000)">往數(shù)組加值</button>
</div>
</template>
<script>
export default {
//第一階段 初始化
//new Vue以后，vue內(nèi)部給實例對象添加了一些屬性和方法，data和methods初始化之前
beforeCreate() {
console.log('1.beforeCreate--執(zhí)行')
console.log('msg', this.msg); //undefined
},
//data和methods初始化以后 不能獲取真實的DOM
//場景：網(wǎng)絡請求，注冊全局事件，綁定頁面滾動事件
created() {
console.log('2.created--執(zhí)行');
console.log('msg', this.msg); //hello word
},
//第二階段 掛載階段
//真實DOM掛載之前
//場景 預處理data，不會觸發(fā)updated鉤子函數(shù)
beforeMount() {
console.log('3.beforeMount--執(zhí)行');
console.log(document.querySelector('#mp')) //null
this.msg = '重新改變了'
},
//真實DOM掛載之后
//獲取掛載后的真實DOM
mounted() {
console.log('4.mounted--執(zhí)行');
console.log(document.querySelector('#mp')) //p
},
//第三階段 更新階段
//更新之前
beforeUpdate() {
console.log('beforeUpdate--執(zhí)行');
console.log(document.querySelectorAll('#uls>li'))
//點擊button按鈕 往數(shù)組追加一條數(shù)據(jù)
console.log(document.querySelectorAll('#uls>li')[5]) //undefined
},
//更新之后
// 場景:獲取更新后的真實DOM
updated() {
console.log('updated--執(zhí)行了');
console.log(document.querySelectorAll('#uls>li')[5]) //li
},
data() {
return {
msg: 'hello word',
arr: [2, 6, 4, 2, 1],
}
}
}
</script>
<style scoped></style>
3.4 銷毀階段
- 當$destroy()被調(diào)用 – 比如組件DOM被移除(例v-if)
- beforeDestroy – 生命周期鉤子函數(shù)被執(zhí)行
- 拆卸數(shù)據(jù)監(jiān)視器、子組件和事件偵聽器
- 實例銷毀后, 最后觸發(fā)一個鉤子函數(shù)
-
destroyed – 生命周期鉤子函數(shù)被執(zhí)行
父組件文章來源：http://www.zghlxwxcb.cn/news/detail-771197.html
<div>
<h1>1.生命周期</h1>
<Lifes v-if="isShow"></Lifes>
<button @click="isShow = false">銷毀組件</button>
</div>
子組件文章來源地址http://www.zghlxwxcb.cn/news/detail-771197.html
<template>
<div>
<p>學習生命周期 - 看控制臺的打印</p>
<p id="mp">{{ msg }}</p>
<ul id="uls">
<li v-for="item in arr">{{ item }}</li>
</ul>
</div>
</template>
<script>
export default {
created() {
//創(chuàng)建一個定時器
this.timer = setInterval(() => {
console.log('定時器');
}, 1000)
},
//第四階段 銷毀階段
//前提:v-if="false" 銷毀Vue實例
//場景:移除全局的事件 移除當前組件的計時器 定時器 eventBus移除事件$off方法
beforeDestroy() {
console.log('beforeDestroy--執(zhí)行');
clearInterval(this.timer) //銷毀定時器
},
destroyed() {
console.log('destroy--執(zhí)行');
},
data() {
return {
msg: 'hello word',
timer: null,//保存計時器
}
}
}
</script>
<style scoped></style>
到了這里，關于Vue2的生命周期(詳解)的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網(wǎng)！
