這一篇文章主要是概念的內容,需要大家理解記憶
0.url
https://cn.vuejs.org/v2/guide/instance.html#生命週期圖示
1.助記圖
一.Vue生命週期方法
1.什麼是生命週期
Vue實例創建,運行到銷燬的過程
2.關注點:生命週期方法
Vue從生到死的過程中,伴隨着各種各樣的事件,這些事件會自動觸發一些方法,這些方法,我們統稱爲生命週期方法
PS:生命週期鉤子=生命週期函數=生命週期事件
3.Vue生命週期方法分類
3.1 創建期間生命週期方法
beforeCreate,created,beforeMount,mounted
3.2 運行期間生命週期方法
beforeUpdate,updated
3.3 銷燬期間生命週期方法
beforeDestroy,destroyed
二.Vue創建期間生命週期方法
1.beforeCreate:
1.1 執行beforeCreate表示Vue實例剛出生,無任何內容
1.2 data和methods都沒有初始化
2.created:
2.1 執行created表示Vue實例已經初始化好了部分內容,如data和methods
2.2 想在Vue實例中最早訪問到data/methods,只有在這個方法訪問
3.beforeMount
執行beforeMount表示已經根據數據編譯好了模板,但是還沒有渲染到界面上
4.mounted
4.1 執行mounted的時候表示模板已經渲染到界面上了
4.2 此時此刻可以對界面進行其它操作了
三.Vue運行期間生命週期方法
1.beforeUpdate
1.1 只要data中的數據發生了變化,就會執行
1.2 執行beforeUpdate的時候,data中的數據已經是最新的了,但是還沒有更新界面上的數據
2.updated
執行updated的時候,data中的數據已經是最新的了,並且界面上的數據也被更新了,也是最新的了
四.銷燬期間生命週期方法
1.beforeDestroy
1.1 執行beforeDestroy的時候,表示Vue實例即將銷燬,但是還未銷燬,實例中的數據還可以使用
1.2 最後使用Vue實例的地方
2.destroyed
2.1 執行destroyed的時候,Vue實例已經完全銷燬
2.2 實例中的任何內容都不能使用了
五.代碼測試
