一.生命周期(鉤子函數(shù))
1. 一個(gè)組件從實(shí)例化創(chuàng)建開(kāi)始,到結(jié)束是一個(gè)生命周期
2. 生命周期作用
(1)找錯(cuò)誤:vue簡(jiǎn)單語(yǔ)法可以實(shí)現(xiàn)一些項(xiàng)目,但是一旦出現(xiàn)問(wèn)題,要通過(guò)生命周期去查找。
(2)解決需求:有些需求要根據(jù)生命周期來(lái)定,該把某些東西寫(xiě)在哪里
二. 標(biāo)紅的為生命周期各種鉤子函數(shù)
- before created:在vue對(duì)象還沒(méi)有誕生之前,就擁有這個(gè)函數(shù)方法。但,他只是對(duì)事件進(jìn)行了配置,data等屬性還沒(méi)有識(shí)別??梢宰鲆恍┘虞d的動(dòng)畫(huà)。
- created:這時(shí)組件已經(jīng)被創(chuàng)建好了,實(shí)例已經(jīng)誕生了,屬性已經(jīng)被綁定,但dom還沒(méi)有生成。可以做獲取對(duì)應(yīng)數(shù)據(jù),比如請(qǐng)求網(wǎng)絡(luò)接口,然后將它付給我們的屬性,再往下走就可以展示給dom。也可以做的是,結(jié)束上一步加載狀態(tài),準(zhǔn)備渲染dom。
- beforeMount:mount是指掛載,beforeMount代表現(xiàn)在開(kāi)始編譯模板template中的內(nèi)容。這個(gè)方法是在虛擬dom中去執(zhí)行的,所以你并不能看到當(dāng)前頁(yè)面的內(nèi)容,沒(méi)有真正的掛載上去,并沒(méi)有將內(nèi)容真實(shí)的渲染到頁(yè)面中去。可以在這里根據(jù)需求而定,做一些基礎(chǔ)工作
- mounted:mouted之前模板已經(jīng)被編譯完成,到這里執(zhí)行已經(jīng)可以看到頁(yè)面了。有些需要頁(yè)面展示完之后執(zhí)行的操作,可以寫(xiě)在mounted這里。比如向后臺(tái)獲取數(shù)據(jù),一定是頁(yè)面展示完成之后,再去獲取數(shù)據(jù)。mounted一旦掛載,dom就形成了,內(nèi)容形成后就是修改update
- beforeUpdate:組件發(fā)生更新之前,需要調(diào)用的鉤子函數(shù)
- Updated:在當(dāng)前組件想要發(fā)生改變,需要調(diào)用Updated,在這里組件更新完成。
- beforeDestroy:組件銷毀之前
- Destroyed:組件銷毀之后
三. 鉤子函數(shù)應(yīng)用
- 在header組件中,應(yīng)用這些鉤子函數(shù)
點(diǎn)擊header標(biāo)題進(jìn)行更改










