Vue隨筆(二)生命週期

2021-09-30 00:19:26 字數 1372 閱讀 6624

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

下面我們就來分別看看vue生命週期的這八個階段:

1、建立前(beforecreate)

對應的鉤子函式為beforecreate。此階段為例項初始化之後,此時的資料觀察和事件機制都未形成,不能獲得dom節點。

2、建立後(created)

對應的鉤子函式為created。在這個階段vue例項已經建立,仍然不能獲取dom元素。

3、載入前(beforemount)

對應的鉤子函式是beforemount,在這一階段,我們雖然依然得不到具體的dom元素,但vue掛載的根節點已經建立,下面vue對dom的操作將圍繞這個根元素繼續進行;beforemount這個階段是過渡性的,一般乙個專案只能用到一兩次。

掛載:在 vue 中指的就是 el 被例項的 vm.$el 所替換

4、載入後(mounted)

對應的鉤子函式是mounted。mounted是平時我們使用最多的函式了,一般我們的非同步請求都寫在這裡。在這個階段,資料和dom都已被渲染出來。

5、更新前(beforeupdate)

對應的鉤子函式是beforeupdate。在這一階段,vue遵循資料驅動dom的原則;beforeupdate函式在資料更新後雖然沒立即更新資料,但是dom中的資料會改變,這是vue雙向資料繫結的作用。

虛擬dom改變

6、更新後(updated)

對應的鉤子函式是updated。在這一階段dom會和更改過的內容同步。

真實dom改變

7、銷毀前(beforedestroy)

對應的鉤子函式是beforedestroy。在上一階段vue已經成功的通過資料驅動dom更新,當我們不在需要vue操縱dom時,就需要銷毀vue,也就是清除vue例項與dom的關聯,呼叫destroy方法可以銷毀當前元件。在銷毀前,會觸發beforedestroy鉤子函式。

例項依然可用

8、銷毀後(destroyed)

對應的鉤子函式是destroyed。在銷毀後,會觸發destroyed鉤子函式。

例項不可用

vue的生命週期的思想貫穿在元件開發的始終,通過熟悉其生命週期呼叫不同的鉤子函式,我們可以準確地控制資料流和其對dom的影響;vue生命週期的思想是vnode和mvvm的生動體現和繼承。

手動呼叫生命週期方法:

destroy()

vue2 0生命週期(二)

123 4567 891011 12js newvue 給模板傳遞的資料 data 其中vue函式稱為建構函式,使用new就可以例項化出來乙個例項化物件。剛剛接觸vue.js,之前使用react.js知道需要搞清楚它的生命週期及其每個鉤子函式的含義。鉤子函式 description beforecr...

vue05 生命週期

首先看下面 宣告週期就是vue例項在某乙個時間點會自動執行的函式,這些函式沒有放在methods裡面,直接在vue例項下。beforecreate vue例項初始化後執行 created 外部注入,雙向繫結等完成後執行 beforemount 頁面還沒有被渲染 mounted 頁面渲染完 befor...

Vue 01 生命週期

vue有一套完整的生命週期,從開始建立 初始化資料 編譯模板 掛在dom 渲染 更新 渲染到銷毀等一系列過程被稱為vue的生命週期。總共分為三個階段 初始化 執行中 銷毀階段。生命週期過程具體說明 例項通過new vue 建立出來之後會初始化事件和生命週期,然後執行beforecreate 函式,這...