
摘抄的筆記
之前關(guān)于生命周期做過一次筆記,很多地方對(duì)于生命周期都是一句話帶過,看官網(wǎng)圖即可。
但是有的時(shí)候,自己還是不能理解,生命周期到底有什么用,那些鉤子函數(shù)都是處于什么用途。
今天重新看了一遍關(guān)于生命周期函數(shù)的解釋,如今再看,也對(duì)生命周期有了更深的理解,特此記錄一下生命周期。
官網(wǎng)的生命周期圖

官網(wǎng)的生命周期圖
生命周期解釋
生命周期函數(shù)就是VUE實(shí)例在某一個(gè)時(shí)間點(diǎn)會(huì)自動(dòng)執(zhí)行的函數(shù)。
beforeCreate: 當(dāng)我們創(chuàng)建一個(gè)Vue實(shí)例,Vue實(shí)例進(jìn)行基礎(chǔ)的初始化時(shí),自動(dòng)執(zhí)行此鉤子;
created: Vue繼續(xù)處理外部的一些注入,比如雙向綁定等內(nèi)容,基本上Vue實(shí)例的初始化操作全部完成,然后自動(dòng)執(zhí)行此鉤子;
beforeMount: 有了模板和數(shù)據(jù),在頁面渲染之前,(模板和數(shù)據(jù)相結(jié)合,即將掛載到頁面的瞬間)自動(dòng)執(zhí)行此鉤子;
mounted: 頁面掛載之后執(zhí)行此鉤子(已經(jīng)被渲染)
## 這兩個(gè)不會(huì)主動(dòng)執(zhí)行
beforeUpdate: 當(dāng)數(shù)據(jù)發(fā)生改變,還未重新渲染之前,執(zhí)行此鉤子;
updated: 重新渲染之后,執(zhí)行此鉤子(DOM操作已更新);
## 這兩個(gè)也不會(huì)主動(dòng)執(zhí)行
beforeDestroy:當(dāng)組件的destroy被調(diào)用時(shí),組件即將被銷毀時(shí),執(zhí)行此鉤子(此時(shí)實(shí)例仍完全可用);
destroyed:當(dāng)組件被完全銷毀,執(zhí)行此鉤子(解除綁定,事件監(jiān)聽器也會(huì)被移除,子實(shí)例也會(huì)被銷毀)。
貼一張網(wǎng)站找來的中文版生命周期圖

中文版生命周期圖
一些小問題
- 這些生命周期函數(shù)是直接定義在Vue實(shí)例中,并沒有放在methods里。
- 除去圖上的8個(gè),實(shí)際上還有3個(gè)鉤子函數(shù)
activated、deactivated、errorCaptured。
activated: keep-alive 組件激活時(shí)調(diào)用
deactivated: keep-alive 組件停用時(shí)調(diào)用
errorCaptured: 第三個(gè)是Vue 2.5新增的,以上是官網(wǎng)的解釋,等我學(xué)到這里的時(shí)候,會(huì)改成自己的相應(yīng)理解。