資訊專欄INFORMATION COLUMN
摘要：天王蓋地虎鉤子事件得到的結(jié)果是小總結(jié)實(shí)例創(chuàng)建完成后，我們能讀取到數(shù)據(jù)的值，但是還沒生成，掛載屬性還不存在。此時(shí)的階段解讀為掛載完畢階段我們?cè)俅蛴∠麓藭r(shí)看看鉤子事件得到的結(jié)果是可見，已經(jīng)成功渲染成里面對(duì)應(yīng)的值天王蓋地虎了。
“你不需要立馬弄明白所有的東西，不過隨著你的不斷學(xué)習(xí)和使用，它的參考價(jià)值會(huì)越來越高?！?
現(xiàn)在項(xiàng)目中遇到了，好好回頭總結(jié)一波Vue生命周期，以后用到的時(shí)候再來翻翻。
每個(gè) Vue 實(shí)例在被創(chuàng)建時(shí)都要經(jīng)過一系列的初始化過程。
例如：從開始創(chuàng)建、初始化數(shù)據(jù)、編譯模板、掛載Dom、數(shù)據(jù)變化時(shí)更新DOM、卸載等一系列過程。
我們稱 這一系列的過程 就是Vue的生命周期。
通俗說就是Vue實(shí)例從創(chuàng)建到銷毀的過程，就是生命周期。
同時(shí)在這個(gè)過程中也會(huì)運(yùn)行一些叫做生命周期鉤子的函數(shù)，這給了用戶在不同階段添加自己的代碼的機(jī)會(huì)，利用各個(gè)鉤子來完成我們的業(yè)務(wù)代碼。
這是對(duì)于Vue生命周期，官網(wǎng)給的那張圖的標(biāo)注圖，圖片網(wǎng)上看到的，我覺得標(biāo)注地很nice，建議一步步仔細(xì)看完圖片，然后把圖片自己悄悄保存下來，對(duì)照著圖片的內(nèi)容看第二部分的舉例說明。
我相信程序員看代碼比看文字更容易理解對(duì)照著上圖標(biāo)注的內(nèi)容，我們一個(gè)鉤子一個(gè)鉤子地舉例說明。
1.beforeCreate實(shí)例初始化之后、創(chuàng)建實(shí)例之前的執(zhí)行的鉤子事件。
如下例子：
{{test}}
得到的結(jié)果是：
小總結(jié)：創(chuàng)建實(shí)例之前，數(shù)據(jù)觀察和事件配置都沒好準(zhǔn)備好。也就是數(shù)據(jù)也沒有、DOM也沒生成。
2.created實(shí)例創(chuàng)建完成后執(zhí)行的鉤子
在上一段代碼例子中，我們?cè)賮韈onsole一下。
{{test}}
得到的結(jié)果是：
小總結(jié)：實(shí)例創(chuàng)建完成后，我們能讀取到數(shù)據(jù)data的值，但是DOM還沒生成，掛載屬性el還不存在。
3.beforeMount將編譯完成的html掛載到對(duì)應(yīng)的虛擬DOM時(shí)觸發(fā)的鉤子
此時(shí)頁(yè)面并沒有內(nèi)容。
即此階段解讀為: 即將掛載
我們打印下此時(shí)的$el
beforeMount() {
console.log("beforeMount鉤子事件：");
console.log(this.$el);
}
得到的結(jié)果是：
小總結(jié)：此時(shí)的el不再是undefined,成功關(guān)聯(lián)到我們指定的dom節(jié)點(diǎn)。但是此時(shí)的{{test}}還沒有成功渲染成data中的數(shù)據(jù)，頁(yè)面沒有內(nèi)容。
PS：相關(guān)的render函數(shù)首次被調(diào)用。
編譯好的html掛載到頁(yè)面完成后所執(zhí)行的事件鉤子函數(shù)。
此時(shí)的階段解讀為： 掛載完畢階段
我們?cè)俅蛴∠麓藭r(shí)$el看看：
mounted() {
console.log("mounted鉤子事件：");
console.log(this.$el);
}
得到的結(jié)果是：
可見， {{test}}已經(jīng)成功渲染成data里面test對(duì)應(yīng)的值“天王蓋地虎”了。
小總結(jié)：此時(shí)編譯好的HTML已經(jīng)掛載到了頁(yè)面上，頁(yè)面上已經(jīng)渲染出了數(shù)據(jù)。一般會(huì)利用這個(gè)鉤子函數(shù)做一些ajax請(qǐng)求獲取數(shù)據(jù)進(jìn)行數(shù)據(jù)初始化。
PS：mounted在整個(gè)實(shí)例中只執(zhí)行一次。
小總結(jié)：當(dāng)修改vue實(shí)例的data時(shí)，vue就會(huì)自動(dòng)幫我們更新渲染視圖，在這個(gè)過程中，vue提供了beforeUpdate的鉤子給我們，在檢測(cè)到我們要修改數(shù)據(jù)的時(shí)候，更新渲染視圖之前就會(huì)觸發(fā)鉤子beforeUpdate。
6.updated小總結(jié)：此階段為更新渲染視圖之后，此時(shí)再讀取視圖上的內(nèi)容，已經(jīng)是最新的內(nèi)容。
PS:
1、該鉤子在服務(wù)器端渲染期間不被調(diào)用。
2、應(yīng)該避免在此期間更改狀態(tài)，因?yàn)檫@可能會(huì)導(dǎo)致更新無限循環(huán)。
小總結(jié)：調(diào)用實(shí)例的destroy( )方法可以銷毀當(dāng)前的組件，在銷毀前，會(huì)觸發(fā)beforeDestroy鉤子。
8.destroyed小總結(jié)：成功銷毀之后，會(huì)觸發(fā)destroyed鉤子，此時(shí)該實(shí)例與其他實(shí)例的關(guān)聯(lián)已經(jīng)被清除，Vue實(shí)例指示的所有東西都會(huì)解綁定，所有的事件監(jiān)聽器會(huì)被移除，所有的子實(shí)例也會(huì)被銷毀。
話在最后其實(shí)還有三個(gè)生命周期鉤子沒列出來：activated、deactivated、errorCaptured。這三個(gè)大家遇到了自行了解哈,暫且這樣吧。
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/98812.html
摘要：通俗說就是實(shí)例從創(chuàng)建到銷毀的過程，就是生命周期。在這一步，實(shí)例已完成以下的配置數(shù)據(jù)觀測(cè)，屬性和方法的運(yùn)算，事件回調(diào)。 關(guān)于作者 程序開發(fā)人員，不拘泥于語言與技術(shù)，目前主要從事PHP和前端開發(fā)，使用Laravel和VueJs，App端使用Apicloud混合式開發(fā)。合適和夠用是最完美的追求。個(gè)人網(wǎng)站：http://www.linganmin.cn 最近剛寫了一個(gè)手機(jī)在線播放的H5電影站：...
摘要：通俗說就是實(shí)例從創(chuàng)建到銷毀的過程，就是生命周期。在這一步，實(shí)例已完成以下的配置數(shù)據(jù)觀測(cè)，屬性和方法的運(yùn)算，事件回調(diào)。 關(guān)于作者 程序開發(fā)人員，不拘泥于語言與技術(shù)，目前主要從事PHP和前端開發(fā)，使用Laravel和VueJs，App端使用Apicloud混合式開發(fā)。合適和夠用是最完美的追求。個(gè)人網(wǎng)站：http://www.linganmin.cn 最近剛寫了一個(gè)手機(jī)在線播放的H5電影站：...
摘要：于是，閏土順應(yīng)呼聲，在這個(gè)凜冽的寒冬早晨，將中篇熱文滾燙呈上。本系列文章還沒有結(jié)束，下篇，也可能是終結(jié)篇，即將來襲作者閏土少年鏈接來源掘金著作權(quán)歸作者所有。 showImg(https://segmentfault.com/img/bVZsm6?w=669&h=445); 前言 繼上篇推送之后，在掘金、segmentfault、簡(jiǎn)書、博客園等平臺(tái)上迅速收到了不俗的反饋，大部分網(wǎng)友都留言...
閱讀 953·2021-09-09 09:32
閱讀 2935·2021-09-02 10:20
閱讀 2766·2021-07-23 11:24
閱讀 856·2019-08-30 15:54
閱讀 3671·2019-08-30 15:54
閱讀 1376·2019-08-30 11:02
閱讀 2880·2019-08-26 17:40
閱讀 1159·2019-08-26 13:55
