生命週期鉤子函式

2021-09-29 14:23:44 字數 1464 閱讀 1842

1. 建立時期

*beforecreated()*這個階段表示例項完全被建立出來之前,會執行它,注意:在beforecreated生命週期函式執行的時候,data和methods中的資料都還沒有初始化,現在輸不出data和methods中的資料。

created鉤子函式:在created中,data和methods都已經初始化好了,如果要呼叫methods中的方法,或者操作data中的資料,最早在created中操作。當vue例項被建立的時候,會觸發該方法,在此函式中無法呼叫$el,即無法獲取被繫結的根元素。

2. 掛載時期

beforemounted:表示模板已經在記憶體中編譯完成了,但是尚未把模板渲染到頁面中去,這裡表示vue開始表一模板,把vue**中的那些指令進行執行,最終在記憶體中生成乙個編譯好的最終的模板字串,然後,把這個模板字串,渲染為記憶體中的dom,此時,只是在記憶體中渲染好了模板,並沒有把模板掛載到頁面中去。

mounted鉤子函式: 表示記憶體中的模板真實的掛載到了頁面中,使用者已經可以看到渲染好的頁面了,注意:mounteed是例項建立期間最後乙個生命週期函式,當執行完mounted就表示例項已經被完全建立好了,此時,如果沒有其他的操作的話,這個例項,就靜靜的躺在記憶體中了,此時組將已經脫離了建立階段,進入到了執行階段。當例項被掛載到dom樹上時會觸發mounted方法,即資料已經渲染完畢,已經在頁面上顯示出來了,此函式之後都可以獲取到$el。如果要通過某些外掛程式操作頁面中的dom節點,最早要在mounted中進行。

下面是元件執行階段的生命週期函式只有兩個,beforeupdate和updated,這兩個事件,會根據data中資料的改變,有選擇性的觸發0次或者多次。

3. 修改時期

beforeupdate:表示頁面還沒有被更新,資料已經被更改了,頁面顯示的資料還是舊的,沒有被改變,而data中的資料是更改後的資料,所以資料不一致。

updated:事件執行的時候,頁面和data資料已經保持一致了,都是最新的。

4. 銷毀時期

當執行beforedestroyed鉤子函式的時候,就已經從執行階段,vue例項進入到銷毀階段,當執行beforedestroy的時候,例項身上所有的data和所有的methods,以及過濾器、指令都處於可用的狀態,此時,還沒有真正執行銷毀的過程。

destroyed:當執行到destroyed函式的時候,元件已經被完全銷毀了,此時,元件中的所有資料,方法、指令過濾器都已經不可用了。

元件其實是個迷你版的vue例項,元件與vue例項一樣,在生成的過程中,會自動呼叫生命週期鉤子函式,常用的生命週期鉤子函式也就是created和mounted這兩個。

生命週期鉤子函式

指的是 vue 在被使用的時候,或者說在被建立開始到被銷毀的整個過程,程式提前預設在 vue 當中的一些函式會在什麼時候做的自動觸發。生命週期 指的是 vue 從建立 到使用 到結束。鉤子函式 指的是埋在 vue 身上的一些函式,在某些階段去執行。例項在不同階段,自動觸發的事件 beforecrea...

生命週期鉤子函式

元件宣告週期有四個過程 建立 掛載 更新 銷毀 這四個過程對應的有八個鉤子函式 beforecreate created beforemount mounted beforeupdate updated beforedestroy destroyed 我們一般會把資料請求放在created 有些人會...

生命週期和鉤子函式

每乙個vue例項在建立之前都需要一系列的初始化過程,如例項需要資料觀測 data observer 編譯模板,掛載例項到dom上,以及資料更新和dom渲染。create 建立 beforecreate 建立前 created 建立結束 mount 掛載 beforemount mounted upd...