上一篇文章講解“觀察者”,本篇文章講解“生命週期”。
每個Vue實例在被創建之前都要經過一系列的初始化過程。例如需要設置數據監聽、編譯模板、掛載實例到DOM、在數據變化時更新DOM等。同時在這個過程中也會運行一些叫做生命週期鉤子的函數,給予用戶機會在一些特定的場景下添加他們自己的代碼。
生命週期一共有八個階段,下面用實例進行理解。
新建lifecycle.html文件:
瀏覽器訪問:
1. 創建與掛載
DOM結構與數據已渲染輸出,看一下控制檯輸出的vue對象實例化輸出情況。
2. 更新
以上是beforeCreate、created、beforeMount、mounted情況,修改input框內數據,當數據改變時,觸發beforeUpdate與updated。
注意
1. this.$el是一個對象,相當於一個指針,因此當你使用console.log輸出之後,其內容並沒有真正顯示,而當你點開下面的箭頭展開具體內容時,顯示的是該指針指向對象的當前內容,因此在你看來beforeUpdate與updated兩個都一樣。當輸出真正的DOM結構時才能看出來。
3. 銷燬
點擊頁面中“銷燬”按鈕,調用銷燬函數,測試銷燬前後的情況。
注意:
1. 銷燬是銷燬對象中的方法,跟數據無關。
2. created 我們一般把ajax請求數據的代碼放到這個階段。
3. beforeMount 這個階段主要是提前控制元素的樣式,防止閃動。
4. mounted 一般針對第三方的插件初始化都放在這裡,比如swiper.js
關注卓象程序員,定期發佈技術文章
下一篇講解“瀏覽器安裝vue插件”