標注圖+部分舉例聊聊Vue生命周期

Aceyclee 發(fā)布于2019-08-23 12:36 / 2040人閱讀

摘要：天王蓋地虎鉤子事件得到的結(jié)果是小總結(jié)實例創(chuàng)建完成后，我們能讀取到數(shù)據(jù)的值，但是還沒生成，掛載屬性還不存在。此時的階段解讀為掛載完畢階段我們再打印下此時看看鉤子事件得到的結(jié)果是可見，已經(jīng)成功渲染成里面對應的值天王蓋地虎了。

“你不需要立馬弄明白所有的東西，不過隨著你的不斷學習和使用，它的參考價值會越來越高。”

現(xiàn)在項目中遇到了，好好回頭總結(jié)一波Vue生命周期，以后用到的時候再來翻翻。

啥叫Vue生命周期？

每個 Vue 實例在被創(chuàng)建時都要經(jīng)過一系列的初始化過程。

例如：從開始創(chuàng)建、初始化數(shù)據(jù)、編譯模板、掛載Dom、數(shù)據(jù)變化時更新DOM、卸載等一系列過程。

我們稱 這一系列的過程 就是Vue的生命周期。

通俗說就是Vue實例從創(chuàng)建到銷毀的過程，就是生命周期。

同時在這個過程中也會運行一些叫做生命周期鉤子的函數(shù)，這給了用戶在不同階段添加自己的代碼的機會，利用各個鉤子來完成我們的業(yè)務代碼。

啥也不說，先來個干貨

這是對于Vue生命周期，官網(wǎng)給的那張圖的標注圖，圖片網(wǎng)上看到的，我覺得標注地很nice，建議一步步仔細看完圖片，然后把圖片自己悄悄保存下來，對照著圖片的內(nèi)容看第二部分的舉例說明。

我相信程序員看代碼比看文字更容易理解

對照著上圖標注的內(nèi)容，我們一個鉤子一個鉤子地舉例說明。

1.beforeCreate

實例初始化之后、創(chuàng)建實例之前的執(zhí)行的鉤子事件。
如下例子：


{{test}}

得到的結(jié)果是：

小總結(jié)：創(chuàng)建實例之前，數(shù)據(jù)觀察和事件配置都沒好準備好。也就是數(shù)據(jù)也沒有、DOM也沒生成。

2.created

實例創(chuàng)建完成后執(zhí)行的鉤子
在上一段代碼例子中，我們再來console一下。


{{test}}

得到的結(jié)果是：

小總結(jié)：實例創(chuàng)建完成后，我們能讀取到數(shù)據(jù)data的值，但是DOM還沒生成，掛載屬性el還不存在。

3.beforeMount

將編譯完成的html掛載到對應的虛擬DOM時觸發(fā)的鉤子
此時頁面并沒有內(nèi)容。
即此階段解讀為: 即將掛載
我們打印下此時的$el

beforeMount() {
            console.log("beforeMount鉤子事件：");
            console.log(this.$el);
        }

得到的結(jié)果是：

小總結(jié)：此時的el不再是undefined,成功關聯(lián)到我們指定的dom節(jié)點。但是此時的{{test}}還沒有成功渲染成data中的數(shù)據(jù)，頁面沒有內(nèi)容。

PS：相關的render函數(shù)首次被調(diào)用。

4.mounted

編譯好的html掛載到頁面完成后所執(zhí)行的事件鉤子函數(shù)。

此時的階段解讀為：掛載完畢階段

我們再打印下此時$el看看：

mounted() {
            console.log("mounted鉤子事件：");
            console.log(this.$el);
        }

得到的結(jié)果是：

可見， {{test}}已經(jīng)成功渲染成data里面test對應的值“天王蓋地虎”了。

小總結(jié)：此時編譯好的HTML已經(jīng)掛載到了頁面上，頁面上已經(jīng)渲染出了數(shù)據(jù)。一般會利用這個鉤子函數(shù)做一些ajax請求獲取數(shù)據(jù)進行數(shù)據(jù)初始化。
PS：mounted在整個實例中只執(zhí)行一次。

5.beforeUpdate

小總結(jié)：當修改vue實例的data時，vue就會自動幫我們更新渲染視圖，在這個過程中，vue提供了beforeUpdate的鉤子給我們，在檢測到我們要修改數(shù)據(jù)的時候，更新渲染視圖之前就會觸發(fā)鉤子beforeUpdate。

6.updated

小總結(jié)：此階段為更新渲染視圖之后，此時再讀取視圖上的內(nèi)容，已經(jīng)是最新的內(nèi)容。

PS:
1、該鉤子在服務器端渲染期間不被調(diào)用。
2、應該避免在此期間更改狀態(tài)，因為這可能會導致更新無限循環(huán)。

7.beforeDestroy

小總結(jié)：調(diào)用實例的destroy( )方法可以銷毀當前的組件，在銷毀前，會觸發(fā)beforeDestroy鉤子。

8.destroyed

小總結(jié)：成功銷毀之后，會觸發(fā)destroyed鉤子，此時該實例與其他實例的關聯(lián)已經(jīng)被清除，Vue實例指示的所有東西都會解綁定，所有的事件監(jiān)聽器會被移除，所有的子實例也會被銷毀。

話在最后

其實還有三個生命周期鉤子沒列出來：activated、deactivated、errorCaptured。這三個大家遇到了自行了解哈,暫且這樣吧。

云服務器 GPU云服務器生命周期軟件生命周期生命周期理論頁面生命周期

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/98812.html

關于Vue實例的生命周期created和mounted的區(qū)別

摘要：通俗說就是實例從創(chuàng)建到銷毀的過程，就是生命周期。在這一步，實例已完成以下的配置數(shù)據(jù)觀測，屬性和方法的運算，事件回調(diào)。關于作者程序開發(fā)人員，不拘泥于語言與技術(shù)，目前主要從事PHP和前端開發(fā)，使用Laravel和VueJs，App端使用Apicloud混合式開發(fā)。合適和夠用是最完美的追求。個人網(wǎng)站：http://www.linganmin.cn 最近剛寫了一個手機在線播放的H5電影站：...

Integ 2019-08-20 14:46 評論0 收藏0
關于Vue實例的生命周期created和mounted的區(qū)別

摘要：通俗說就是實例從創(chuàng)建到銷毀的過程，就是生命周期。在這一步，實例已完成以下的配置數(shù)據(jù)觀測，屬性和方法的運算，事件回調(diào)。關于作者程序開發(fā)人員，不拘泥于語言與技術(shù)，目前主要從事PHP和前端開發(fā)，使用Laravel和VueJs，App端使用Apicloud混合式開發(fā)。合適和夠用是最完美的追求。個人網(wǎng)站：http://www.linganmin.cn 最近剛寫了一個手機在線播放的H5電影站：...

baukh789 2019-08-01 16:26 評論0 收藏0
在沒有DOM操作的日子里，我是怎么熬過來的（中）

摘要：于是，閏土順應呼聲，在這個凜冽的寒冬早晨，將中篇熱文滾燙呈上。本系列文章還沒有結(jié)束，下篇，也可能是終結(jié)篇，即將來襲作者閏土少年鏈接來源掘金著作權(quán)歸作者所有。 showImg(https://segmentfault.com/img/bVZsm6?w=669&h=445); 前言繼上篇推送之后，在掘金、segmentfault、簡書、博客園等平臺上迅速收到了不俗的反饋，大部分網(wǎng)友都留言...

CoXie 2019-08-21 17:51 評論0 收藏0