Vue生命周期詳解
1、定義
生命周期函數(shù)(俗稱:鉤子函數(shù))
根據(jù)vue整個渲染機(jī)制,在渲染的每個關(guān)鍵點上,提供對應(yīng)的函數(shù),進(jìn)行一些相關(guān)的業(yè)務(wù)操作。
2、四個階段
初始階段:beforeCreate():可以加loading效果、
created():結(jié)束loading效果,發(fā)請求,獲取數(shù)據(jù),添加定時器;

①創(chuàng)建Vue實例、②初始化事件對象和生命周期、③調(diào)用beforeCreate()鉤子函數(shù)(無法訪問data)
④初始化數(shù)據(jù)代理和數(shù)據(jù)監(jiān)測、⑤調(diào)用created()鉤子函數(shù)(可以訪問打他對象屬性)
⑥編譯模板語句生成虛擬DOM
掛載階段:beforeMount()、mounted();

①調(diào)用beforeMount()鉤子函數(shù),(真實DOM未生成),②給vm追加$el屬性,用它來代替"$el","¥el"代表了真是的DOM元素(真實DOM生成,頁面渲染完成)③調(diào)用mounted()鉤子函數(shù)(可以操作DOM元素)。
更新階段:beforeUpdate()、updated();

①data發(fā)生變化,②調(diào)用beforeUpdate()鉤子函數(shù)(數(shù)組發(fā)生變化,頁面未更新)(手動移除事件監(jiān)聽器)、③虛擬DOM重新渲染和修補(bǔ)、④調(diào)用updated鉤子函數(shù)(頁面已更新)(可以對數(shù)據(jù)做統(tǒng)一處理)
銷毀階段:beforeDestroy()、destroyed()。

①調(diào)用 this.$destroy()方法、②調(diào)用beforeDestroy()鉤子函數(shù)(做銷毀前的準(zhǔn)備工作)、③卸載子組件和監(jiān)聽器、解綁自定義事件監(jiān)聽器、④調(diào)用destroyed()鉤子函數(shù)(所有的東西已經(jīng)解綁)
<div class="vues">
<h1>{{msg}}</h1>
<h1>{{count}}</h1>
<button @click="add">點我加1</button>
<button @click="destroy">點擊銷毀</button>
</div>
<script>
new Vue({
el: ".vues",
data: {
msg: '生命周期',
count: 0
},
methods: {
add: function () {
this.count++
},
destroy() {
this.$destroy()
}
},
/*
1、初始階段
el有,template也有,最終編譯template模板語句
el有,template沒有,最終編譯el模板語句
el沒有的時候,需要手動調(diào)用vm.$mount(el) 進(jìn)行手動掛載,然后流程才能繼續(xù),
此時如果template有,最終編譯template模板語句
el沒有的時候,需要手動調(diào)用vm.$mount(el) 進(jìn)行手動掛載,然后流程才能繼續(xù),v
此時如果template沒有,最終編譯el模板語句
結(jié)論:流程想要控制:el必須存在
el和template同時存在,優(yōu)先選擇template,如果沒有template才選擇el
*/
beforeCreate() {
// 創(chuàng)建前:數(shù)據(jù)代理和數(shù)據(jù)監(jiān)測的創(chuàng)建前
// 此時還無法訪問data當(dāng)中的數(shù)據(jù),包括methods也是無法訪問的。
console.log("beforeCreate");
},
created() {
// 創(chuàng)建后:表示數(shù)據(jù)代理和數(shù)據(jù)監(jiān)測創(chuàng)建完畢,可以訪問data中的數(shù)據(jù)了。
// 可以訪問methods
console.log('created');
},
beforeMount() {
console.log('beforeMount');
},
mounted() {
console.log('mounted');
},
beforeUpdate() {
console.log("beforeUpdate");
},
updated() {
console.log('updated');
},
beforeDestroy() {
console.log('beforeDestroy');
},
destroyed() {
console.log('destroyed');
}
})
</script>到此這篇關(guān)于Vue生命周期詳解的文章就介紹到這了,更多相關(guān)Vue生命周期內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
詳解在vue-cli中使用graphql即vue-apollo的用法
這篇文章主要介紹了詳解在vue-cli中使用graphql即vue-apollo的用法,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2018-09-09
使用Vue3和Echarts?5繪制帶有立體感流線中國地圖(推薦收藏!)
最近接到一個需求是做一個中國地圖,下面這篇文章主要給大家介紹了關(guān)于如何使用Vue3和Echarts?5繪制帶有立體感流線中國地圖的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-04-04
Vue引入并使用Element組件庫的兩種方式小結(jié)
本文主要介紹了Vue引入并使用Element組件庫的兩種方式小結(jié),文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-01-01
Vue項目實現(xiàn)簡單的權(quán)限控制管理功能
這篇文章主要介紹了Vue項目實現(xiàn)簡單的權(quán)限控制功能,文中給大家介紹了兩種方式進(jìn)行權(quán)限限制,本文通過實例代碼給大家介紹的非常詳細(xì),需要的朋友可以參考下2019-07-07

