vue元件生命週期鉤子函式

2021-10-04 09:14:01 字數 791 閱讀 6493

​ vue元件在整個生命週期裡面提供了一些函式,可以在內部實現一些業務邏輯,乙個元件建立或者vue例項建立之後,內部會做一些初始化事件與生命週期相關的配置,元件的生命週期鉤子函式大致可以分為三個階段:初始化、執行中、銷毀。

1.beforecreate

在例項初始化之後,資料觀測(data observer) 和 event/watcher 事件配置之前被呼叫。例項中的資料不能獲取到,頁面中的dom元素也沒有渲染。

2.created

鉤子函式內部的資料已經被掛載了,但是真實dom節點還是沒有渲染出來。

3.beforemount

此時記憶體中的模板結構,還沒有真正渲染到頁面上,頁面上看不到真實的資料,使用者看到的只是乙個模板頁面而已。

4.mounted

資料已經掛載完畢了,真實的dom也已經渲染出來了。

1.beforeupdate

在執行beforeupdate執行中的生命週期函式的時候,資料肯定是最新的;但是頁面上呈現的資料還是舊的

只有dom掛載完畢了,然後再去當資料發生變化的時候,beforeupdate這個鉤子函式才會執行

2.updated

頁面也完成了更新,此時,data資料是最新的,同時,頁面上呈現的資料也只最新的。

beforedestroy

當執行beforedestroy的時候,元件即將被銷毀,但是還沒有真正開始銷毀,此時元件還是正常可用的;data、methods等資料或方法,依舊可以被正常訪問。

destroyed

元件已完成了銷毀,元件無法使用,data和methods都不可使用。

vue生命週期,鉤子函式

一 vue生命週期簡介 咱們從上圖可以很明顯的看出現在vue2.0都包括了哪些生命週期的函式了,總結一下,對官方文件的那張圖簡化一下,就得到了這張圖。二 生命週期 對於執行順序和什麼時候執行,看上面圖基本有個了解了。下面我們將結合 去看看鉤子函式的執行。鉤子函式 1.create 和 mounted...

vue 生命週期(鉤子函式)

new vue 例項物件,下一步進入beforcreate 狀態 當使用new vue 建立物件之前,執行的事件 這裡可以做載入動畫 下一步,進入created 然後,他會檢測是否有el屬性,如果有在檢測template屬性型別,是一段渲染的函式還是一段html 然後就進入了beforemount狀...

vue生命週期鉤子函式

什麼是生命週期?vue中的生命週期指的是 元件 從建立到銷毀乙個過程,在這個過程中,我們在每乙個特定的階段會觸發一些方法 這些方法具備一些功能 我們給這些方法起了個名字叫做 生命週期鉤子函式 元件鉤子 為什麼要學習生命週期?因為我們想在生命週期鉤子中實現專案功能,那麼我們必須知道每乙個鉤子函式的具體...