面試常問的Vue例項的生命週期

2021-10-05 18:56:04 字數 1711 閱讀 6271

vue例項從建立到銷毀的過程,就是生命週期。從開始建立,初始化資料,編譯模板,掛載dom→渲染、更新→渲染、銷毀等一系列過程,稱之為 vue 的生命週期。

在生命週期中被自動執行的函式就叫:鉤子函式/生命週期鉤子

生命週期鉤子函式的用途

在生命週期階段會被自動呼叫,為我們開發者提供了乙個自己執行的邏輯的機會

在vue生命週期中共有八個鉤子:

var vw=

newvue(,

beforecreate()

,created()

,beforemount()

,mounted()

,beforeupdate()

,updated()

,beforedestroy()

,destroyed()

})

列印結果如下

我們可以看到乙個vue例項在建立過程中呼叫的幾個生命週期鉤子。

1.beforecreate鉤子(例項建立開始)

例項的掛載元素el和資料物件data都為undefined,還未初始化,$el裡面沒有東西

2.created鉤子(例項建立結束)

資料和檢視已經繫結 data的資料改變了那麼檢視也會隨之改變,$el裡面還沒東西

3.beforemounted(載入前)

$el和data都初始化了,但是在掛載之前為虛擬dom節點,}只是佔位的

4.mounted(載入後)

vue例項掛載完成,data資料成功渲染,$el有內容

當我們通過控制台輸入vw.text=「資料修改」,修改data的資料時,會觸發以下這兩個鉤子

5.beforeupadte(資料準備更新)

當data的資料準備發生改變時,會觸發這個鉤子

6.updated(資料更新完畢)

當data的資料更行完成後,會觸發這個鉤子

7.beforedestroy(例項銷毀前)

例項銷毀之前呼叫,例項還是可以正常使用的

8.destroyed(例項銷毀後)

例項銷毀之後被呼叫 vue例項會把所有的內容解除繫結

通過呼叫vue例項的$destory()方法可以銷毀vue例項

整理了幾個vue生命週期面試題分享給大家

什麼是vue生命週期?

答: vue 例項從建立到銷毀的過程,就是生命週期。從開始建立、初始化資料、編譯模板、掛載dom→渲染、更新→渲染、銷毀等一系列過程,稱之為 vue 的生命週期。

vue生命週期的作用是什麼?

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

vue生命週期總共有幾個階段?

答:它可以總共分為8個階段:建立前/後、載入前/後、更新前/後、銷毀前/銷毀後。

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

答:會觸發下面這幾個beforecreate、created、beforemount、mounted 。

dom 渲染在哪個週期中就已經完成?

答:dom 渲染在 mounted 中就已經完成了

本文是純屬個人對vue的生命週期的理解,有什麼不對的地方還請各位大佬多多指點~

Vue 例項的生命週期

在vue中,每個例項都有自己的乙個完整的生命週期,包括開始建立 初始化資料 編譯模板 將例項掛載到dom 渲染 更新 渲染 解除安裝等一系列過程。同時在這個過程中也會執行一些叫做生命週期鉤子的函式,這樣我們就可以在例項生命週期的不同階段做一些需要做的事情。這裡可能會有個小疑惑,怎麼突然又說是vue例...

vue例項的生命週期

是一套用於構建使用者介面的漸進式框架。與其他框架不同的是,vue被設計為可以自底向上的逐層應用。vue 的核心庫只關注檢視層,不僅易於上手,還便於與第三方庫或既有專案整合。另一方面,當與現代化的工具鏈以及各種支援類庫結合使用時,vue 也完全能夠為複雜的單頁應用提供驅動。宣告式渲染 vue.js的核...

VUE 例項的生命週期

從vue例項建立 執行 到銷毀期間,總是伴隨著各種各樣的事件,這些事件,統稱為生命週期!vue把整個生命週期劃分為 建立 更新 掛載 銷毀 等階段其實就是生命週期事件的別名 var vm newvue methods beforecreate script 結果 我們可以看到 data 和el 還是...