目錄
前言
生命周期
鉤子函數(shù)使用方法
?編輯
周期-----創(chuàng)建階段
創(chuàng)建階段做了些什么事
該階段可以干什么
周期----掛載階段
掛載階段做了什么事
該階段適合干什么
周期----更新階段
更新階段做了什么事
該階段適合做什么
周期----銷毀階段
銷毀階段做了什么事
該階段適合做什么
前言
Vue生命周期分為四個周期：創(chuàng)建、掛載、更新、銷毀
生命周期
每個周期對應(yīng)兩個函數(shù)，對應(yīng)的函數(shù)又叫鉤子函數(shù)
創(chuàng)建：
beforeCreate()????????------? ? ? ? 創(chuàng)建前
created()? ? ? ? ? ? ? ? ------? ? ? ? 創(chuàng)建后
掛載：
beforeMount()????????------?? ? ? 掛載前
mounted()? ? ? ? ? ? ? ?------? ? ? ? 掛載后
更新：
beforeUpdate()? ? ? ? ------? ? ? ? 更新前
updated()? ? ? ? ? ? ? ? -----? ? ? ? 更新后
銷毀：
beforeDestroy()? ? ? ? -------? ? ? ? 銷毀前
destroyed()? ? ? ? ? ? ? ? ------? ? ? ? 銷毀后
鉤子函數(shù)使用方法
<div class="app">
<h1>{{msg}}</h1>
{{num}}
<button @click="add()">+1</button>
<button @click="destroy()">銷毀</button>
</div>
<script>
const vm = new Vue({
el:'.app',
data:{
msg:'Vue的生命周期',
num:1
},
methods:{
add(){
this.num++
},
destroy(){
this.$destroy()
}
},
// 創(chuàng)建
// 創(chuàng)建前
beforeCreate(){
console.log('beforeCreate');
},
// 創(chuàng)建后
created(){
console.log('Created');
},
// 掛載
// 掛載前
beforeMount(){
console.log('beforeMount');
},
// 掛載后
mounted(){
console.log('Mounted');
},
// 更新
// 更新前
beforeUpdate(){
console.log('beforeUpdata');
},
// 更新后
updated(){
console.log('Updataed');
},
// 銷毀
// 銷毀前
beforeDestroy(){
console.log('beforeDestory');
},
// 銷毀后
destroyed(){
console.log( 'Destoryed');
}
})
</script>
更新數(shù)據(jù)
銷毀
調(diào)用該方法
this.$destroy()
周期-----創(chuàng)建階段
生成虛擬dom
該周期包含兩個鉤子函數(shù)，創(chuàng)建前beforeCreate()和創(chuàng)建后Created()
所謂的創(chuàng)建不是指Vue實例的創(chuàng)建，而是指數(shù)據(jù)代理和數(shù)據(jù)監(jiān)測的創(chuàng)建，以此來分創(chuàng)建前和創(chuàng)建后
在創(chuàng)建前，是無法訪問data中的數(shù)據(jù)的，包括methods
例：
在原代碼的基礎(chǔ)上，訪問data中的num
?//創(chuàng)建前
beforeCreate(){
? ? ? ? ? ? ? ? console.log('beforeCreate',this.num);
? ? ? ? ? ? }
創(chuàng)建后是可以訪問的，包括methods
// 創(chuàng)建后
? ? ? ? ? ? created(){
? ? ? ? ? ? ? ? console.log('Created',this.num);
? ? ? ? ? ? }
創(chuàng)建階段做了些什么事
- 創(chuàng)建Vue實例vm
- 初始化事件對象和生命周期
- 調(diào)用beforeCreate()鉤子函數(shù)（此時還無法通過vm去訪問data中的屬性）
- 初始化數(shù)據(jù)代理和數(shù)據(jù)監(jiān)測
- 調(diào)用created()鉤子函數(shù)（此時數(shù)據(jù)代理和數(shù)據(jù)監(jiān)測已經(jīng)創(chuàng)建完畢，可以通過vm去訪問data中的屬性）
- 編譯模板語句生成虛擬dom(此時只是生成虛擬dom,頁面上還沒有渲染)
該階段可以干什么
- beforeCreate():可以在此時加一些loading效果
- created:結(jié)束loading效果，發(fā)送一些網(wǎng)絡(luò)請求，獲取數(shù)據(jù)，也可以添加定時器
周期----掛載階段
生成真實dom
該階段包含兩個鉤子函數(shù)，掛載前beforeMount()和掛載后mounted()
掛載前和掛載后中間存在一個真實dom的生成
而掛載前和創(chuàng)建后之間存在一個虛擬dom的生成
在掛載前，是無法修改頁面內(nèi)容的
// 掛載前
? ? ? ? ? ? beforeMount(){
? ? ? ? ? ? ? ? console.log('beforeMount');
? ? ? ? ? ? ? ? document.querySelector('h1').innerHTML='掛載'
? ? ? ? ? ? }
掛載后是可以修改的
// 掛載后
? ? ? ? ? ? mounted(){
? ? ? ? ? ? ? ? console.log('Mounted');
? ? ? ? ? ? ? ? document.querySelector('h1').innerHTML='掛載'
? ? ? ? ? ? }
掛載階段做了什么事
- 調(diào)用beforeMount()鉤子函數(shù)（此時頁面還未渲染，真實dom還沒生成）
- 給vm追加$el屬性，用它來代替"el"，$el代表了真實的dom元素（此時真實dom生成，頁面渲染完成）
- 調(diào)用mounted()鉤子函數(shù)
該階段適合干什么
mounted:可以操作頁面的dom元素了
周期----更新階段
該階段只有在data變化后才會觸發(fā)，進行重新渲染
該周期包含兩個鉤子函數(shù)，更新前beforeUpdate()和更新后updated()
這里的更新前是指data中的數(shù)據(jù)更新了，但是頁面還沒重新渲染前
更新前
使用斷點debugger
?// 更新前
? ? ? ? ? ? beforeUpdate(){
? ? ? ? ? ? ? ? console.log('beforeUpdata');
? ? ? ? ? ? ? ? debugger
? ? ? ? ? ? }
更新后
解開斷點
//更新后
?updated(){
? ? ? ? ? ? ? ? console.log('Updataed');
? ? ? ? ? ? }
其中diff算法就是在更新前和更新后之間進行的，虛擬dom進行對比，生成真實dom渲染到頁面
更新階段做了什么事
- data發(fā)生改變（這是該階段開始的標志）
- 調(diào)用beforeUpdate()鉤子函數(shù)（此時只是內(nèi)存中的data數(shù)據(jù)發(fā)生變化，頁面還沒更新）
- 虛擬dom重新渲染和修補
- 調(diào)用updated()鉤子函數(shù)（此時頁面已更新）
該階段適合做什么
- beforeUpdate:適合在更新之前訪問現(xiàn)有的dom,例，手動清除已添加的事件監(jiān)聽器
- updated：頁面更新后，如果想對數(shù)據(jù)作統(tǒng)一處理，可以在這里完成
周期----銷毀階段
卸載監(jiān)視器，子組件，事件監(jiān)聽器
該階段包含兩個鉤子函數(shù)，銷毀前beforeDestroy()和銷毀后Destroy()
與其說是銷毀其實是卸載，卸載Vue實例上面的所有
該階段只有調(diào)用該方法才能進入
vm.$destroy()
銷毀前
打印vue實例對象，查看監(jiān)視器，銷毀前，監(jiān)視器還是激活狀態(tài)
?// 銷毀前
? ? ? ? ? ? beforeDestroy(){
? ? ? ? ? ? ? ? console.log('beforeDestory');
? ? ? ? ? ? ? ? console.log(this);
? ? ? ? ? ? ? ? debugger
? ? ? ? ? ? }
雖然是激活狀態(tài)，但是還是無法監(jiān)聽，我們在原有的代碼基礎(chǔ)上監(jiān)聽data中的num屬性
watch:{
num(){
console.log('監(jiān)聽一次');
}
},
當num屬性值變化時，成功監(jiān)聽到了，當我們執(zhí)行銷毀時，由上得知，監(jiān)聽器還是在激活狀態(tài)
但是以及無法監(jiān)聽了
銷毀后
?// 銷毀后
? ? ? ? ? ? destroyed(){
? ? ? ? ? ? ? ? console.log( 'Destoryed');
? ? ? ? ? ? ? ? console.log(this);
? ? ? ? ? ? }
watcher激活狀態(tài)已經(jīng)成了false文章來源：http://www.zghlxwxcb.cn/news/detail-752950.html
銷毀階段做了什么事
- 調(diào)用vm.$destroy()（進入銷毀階段）
- 調(diào)用beforeDestroy()鉤子函數(shù)（此時Vue實例還在，雖然vm上的監(jiān)視器、子組件、事件監(jiān)聽器還在，但是無法使用了，此時修改data也不會重新渲染頁面了）
- 卸載子組件和監(jiān)視器，解綁事件監(jiān)聽器
- 調(diào)用destroyed()鉤子函數(shù)（此時Vue實例還在，只是空間還未釋放，銷毀后指的是vm對象身上所有的東西已經(jīng)解綁完成）
該階段適合做什么
beforeDestroy:適合作銷毀前的準備工作文章來源地址http://www.zghlxwxcb.cn/news/detail-752950.html
到了這里，關(guān)于【Vue】生命周期一文詳解的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
