每個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中是同步一致的
此時頁面中的