Vue學習(三)生命週期函式

起風了發表於2019-03-01

每個Vue例項在被建立之前都要經過一系列的初始化過程,這個過程就是vue的生命週期。首先官方文件上的圖片:

Vue學習(三)生命週期函式

可以看到在vue一整個的生命週期中會有很多鉤子函式提供給我們在vue生命週期不同的時刻進行操作, 那麼先列出所有的鉤子函式,然後我們再一一詳解:

  • beforeCreate
  • Created
  • beforeMount
  • Mounted
  • beforeUpdate
  • Update
  • beforeDestroy
  • Destroyed

beforeCreate

這是Vue在建立時的第一個生命週期函式,表示Vue例項在建立之前會執行這個函式,在 beforeCreate 生命週期函式執行的時候,data 和 methods 中的 資料都還沒有沒初始化

Created

此時data和methods中的資料和方法已經建立好了,如果要呼叫,則最早可在這裡呼叫

beforeMount

該階段是,模板已經在記憶體中建立好,但是還沒有渲染到頁面上

Mounted

表示,記憶體中的模板,已經真實的掛載到了頁面中,使用者已經可以看到渲染好的頁面了,注意: mounted 是 例項建立期間的最後一個生命週期函式,當執行完 mounted 就表示,例項已經被完全建立好了,此時,如果沒有其它操作的話,這個例項,就靜靜的 躺在我們的記憶體中,一動不動

beforeUpdate

當例項在執行的時候,資料變化的時候執行,此時頁面顯示的資料是舊資料,但是data中的資料是最新的 還沒有進行同步

update

此時的資料,頁面和data中是同步一致的

此時頁面中的

相關文章