vue 宣告週期函式 Vue生命週期函式面試題

2021-10-12 13:08:21 字數 2026 閱讀 4136

1.什麼是 vue 生命週期

vue例項從建立到銷毀的過程,就是vue的生命週期。也就是從開始建立、初始化資料、編譯模板、掛載dom – > 渲染、更新–>渲染、解除安裝等一系列過程,我們稱這是vue的生命週期。

2.vue生命週期的作用是什麼

它的生命週期中有多個事件鉤子,讓我們在控制整個vue例項的過程時更容易行程好的邏輯。

3.vue的生命週期

(開始建立、初始化資料、編譯模板、掛載dom、渲染、更新、渲染、解除安裝)主要分為八個階段:

beforecreate(建立前) created(建立後) beforemount(載入前) mounted(載入後) beforeupdate(更新前), updated(更新後) beforedestroy(銷毀前) destroyed(銷毀後)

beforecreate data 和 $el 都沒有初始化 全部為 undefined

created data 初始化完成,但 $el 沒有初始化

beforemount data 和 $el 均已存在,但 dom 為虛擬dom 仍未完全載入 eg:

}mounted data 和 $el 均已存在,並且 dom 載入完成 ,完成掛載

當data中資料發生改變時觸發update相關函式

beforeupdate 渲染完成,並監測到data發生變化,在變化的資料重新渲染檢視之前會觸發,這也是重新渲染之前最後修改資料的機會

updated 監測到data發生變化,並完成渲染更新檢視之後觸發

beforedestory 例項銷毀之前呼叫 , 例項仍然完全可用。

destroyed 例項銷毀後呼叫。呼叫後,例項指示的所有東西都會解繫結,所有的事件***會被移除,所有的子例項也會被銷毀。

4.第一次頁面載入會觸發哪幾個鉤子

beforecreate, created, beforemount, mounted 。

5.簡述每個週期具體適合哪些場景

beforecreate 可以在此時加一些loading效果,在created時進行移除

created 需要非同步請求資料的方法可以在此時執行,完成資料的初始化

mounted 當需要操作dom的時候執行,可以配合$.nexttick 使用進行單一事件對資料的更新後更新dom

updated 當資料更新需要做統一業務處理的時候使用

6.created和mounted的區別

created:在模板渲染成html前呼叫,即通常初始化某些屬性值,然後再渲染成檢視。

mounted:在模板渲染成html後呼叫,通常是初始化頁面完成後,再對html的dom節點進行一些需要的操作。(呼叫第三方外掛程式可以放在mounted裡邊)

7.vue獲取資料在哪個週期函式

beforecreated:el 和 data 並未初始化

created:完成了 data 資料的初始化,el沒有

beforemount:完成了 el 和 data 初始化

mounted :完成掛載

8.請詳細說下你對vue生命週期的理解?

總共分為8個階段建立前/後,載入前/後,更新前/後,銷毀前/後。

建立前/後: 在beforecreated階段,vue例項的掛載元素el和∗∗資料物件∗∗data都為undefined,還未初始化。在created階段,vue例項的資料物件data有了,el和**資料物件**data都為undefined,還未初始化。在created階段,vue例項的資料物件data有了,el和∗∗資料物件∗∗data都為undefined,還未初始化。在created階段,vue例項的資料物件data有了,el還沒有。

載入前/後:在beforemount階段,vue例項的$el和data都初始化了,但還是掛載之前為虛擬的dom節點,data.message還未替換。在mounted階段,vue例項掛載完成,data.message成功渲染。

更新前/後:當data變化時,會觸發beforeupdate和updated方法。

銷毀前/後:在執行destroy方法後,對data的改變不會再觸發週期函式,說明此時vue例項已經解除了事件監聽以及和dom的繫結,但是dom結構依然存在

vue 宣告週期函式 vue 生命週期函式

document data methods show console.log 執行了 beforecreate 這是遇到的第乙個生命週期函式表示例項完全會被建立出來,會執行 console.log this.msg 這時候console會顯示undefined this.show is not a ...

vue 生命週期函式

什麼是生命週期 從vue例項建立 執行 到銷毀期間,總是伴隨著各種各樣的事件,這些事件,統稱為生命週期!生命週期鉤子 就是生命週期事件的別名而已 生命週期鉤子 生命週期函式 生命週期事件 主要的生命週期函式分類 建立期間的生命週期函式 beforecreate 例項剛在記憶體中被建立出來,此時,還沒...

vue 生命週期函式

每個鉤子函式都在什麼時間觸發 1.beforecreate 在例項初始化之後,資料觀測 data observer 和 event watcher 事件配置之前被呼叫。2.created 3.beforemount 在掛載開始之前被呼叫 相關的 render 函式首次被呼叫。4.mounted el...