生命周期涉及到的鉤子函數(shù)總共有8個恭取。
1妒貌、beforeCreate
2通危、create
3、beforeMount
4灌曙、mounted
5菊碟、beforeUpdate
6、update
7在刺、beforeDestory
8逆害、destory
Vue組件的生命周期分為四個階段,每個階段有2個生命鉤子函數(shù)蚣驼,總計8個魄幕。
創(chuàng)建階段:
主要用于組件創(chuàng)建時,獲取數(shù)據(jù)設(shè)置組件颖杏。
beforeCreate
created
掛載階段:
主要用于訪問組件 DOM纯陨。
beforeMount
mounted
更新階段:
數(shù)據(jù)變化,組件重新渲染留储。
beforeUpdate
updated
銷毀階段:
用于銷毀組件翼抠,做清理工作
beforeDestory
destory
生命周期函數(shù)示意圖??
一、創(chuàng)建階段
主要用于組件創(chuàng)建時欲鹏,獲取數(shù)據(jù)設(shè)置組件机久。創(chuàng)建鉤子組件是運(yùn)行的第一個鉤子臭墨。允許在組件甚至在添加到DOM 之前的操作赔嚎。創(chuàng)建鉤子也在服務(wù)器端渲染器件運(yùn)行。
beforeCreate
在實(shí)例初始化之后胧弛,數(shù)據(jù)觀測和event尤误。watcher事件配置之前被調(diào)用。
是生命周期的第一個鉤子结缚,在事件损晤、生命周期初始化之后。
create
在實(shí)例創(chuàng)建完成后被立即調(diào)用红竭。在這一步尤勋,實(shí)例已完成以下的配置喘落。
數(shù)據(jù)觀測(data observer),屬性和方法的運(yùn)算最冰。watch瘦棋、event事件回調(diào)。然而暖哨,掛載階段沒有開始赌朋。$el屬性目前不可見。
二篇裁、掛載階段
主要用于訪問組件 DOM沛慢。
此時給Vue實(shí)例對象添加$el對象,并且替換掉掛載的DOM元素达布。因?yàn)樵谥暗腸onsole中打印的結(jié)果可以看到beforeMount之前的el上還是undefined团甲。
beforeMount
在掛載開始之前被調(diào)用:先關(guān)掉render函數(shù)首次被調(diào)用。該鉤子在服務(wù)器渲染期間不被調(diào)用黍聂。
mounted
mounted鉤子是經(jīng)常使用的生命周期鉤子伐庭,它擁有訪問組件模板的能力。
el被新創(chuàng)建的vm.$el替換分冈,并掛載到實(shí)例上去之后調(diào)用該鉤子圾另。如果root實(shí)例掛載了一個文檔內(nèi)的元素,當(dāng)mounted被調(diào)用時vm.$el也在文檔內(nèi)雕沉。
三集乔、更新階段
數(shù)據(jù)變化,組件重新渲染坡椒。
由于數(shù)據(jù)更改導(dǎo)致的虛擬 DOM 重新渲染和打補(bǔ)丁扰路,在這之后會調(diào)用該鉤子。
beforeUpdate
beforeUpdata鉤子在您的組件的數(shù)據(jù)更改之后運(yùn)行倔叼,更新周期開始汗唱,就在DOM修改和重新渲染之前。它允許您在實(shí)際渲染之前獲取組件上的任何反應(yīng)數(shù)據(jù)的新狀態(tài)丈攒。
updated
keep-alive組件激活時不被調(diào)用哩罪。
更新的鉤子在組件和DOM重新呈現(xiàn)數(shù)據(jù)更改后運(yùn)行。如果需要在屬性更改后訪問DOM 巡验,這可能是最安全的做法际插。
四、銷毀階段
用于銷毀組件显设,做清理工作框弛。
銷毀鉤子允許在組件銷毀時執(zhí)行操作,例如清理或分析發(fā)送捕捂。當(dāng)您的組件被拆除并從DOM中刪除時瑟枫,它們將觸發(fā)斗搞。
beforeDestory
實(shí)例銷毀之前調(diào)用。在這一步慷妙,實(shí)例仍然完全可用榜旦。
destoryed
Vue實(shí)例銷毀后調(diào)用。調(diào)用后景殷,Vue實(shí)例指示的所用東西都會解除綁定溅呢,所有的事件監(jiān)聽器會被移除,所有的子實(shí)例也會被銷毀猿挚。