Vue 生命周期(鉤子函數(shù))

一.生命周期(鉤子函數(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ù)

  1. before created:在vue對(duì)象還沒(méi)有誕生之前,就擁有這個(gè)函數(shù)方法。但,他只是對(duì)事件進(jìn)行了配置,data等屬性還沒(méi)有識(shí)別??梢宰鲆恍┘虞d的動(dòng)畫(huà)。
  2. 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。
  3. 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ǔ)工作
  4. mounted:mouted之前模板已經(jīng)被編譯完成,到這里執(zhí)行已經(jīng)可以看到頁(yè)面了。有些需要頁(yè)面展示完之后執(zhí)行的操作,可以寫(xiě)在mounted這里。比如向后臺(tái)獲取數(shù)據(jù),一定是頁(yè)面展示完成之后,再去獲取數(shù)據(jù)。mounted一旦掛載,dom就形成了,內(nèi)容形成后就是修改update
  5. beforeUpdate:組件發(fā)生更新之前,需要調(diào)用的鉤子函數(shù)
  6. Updated:在當(dāng)前組件想要發(fā)生改變,需要調(diào)用Updated,在這里組件更新完成。
  7. beforeDestroy:組件銷毀之前
  8. Destroyed:組件銷毀之后

三. 鉤子函數(shù)應(yīng)用

  • 在header組件中,應(yīng)用這些鉤子函數(shù)





點(diǎn)擊header標(biāo)題進(jìn)行更改



?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書(shū)系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容