Vue組件的生命周期


生命周期:一個組件從創建到銷毀的過程就是生命周期,生命周期鈎子函數的四個階段:

1.創建;2.掛載;3.更新;4.銷毀

1,組件初始化的時候會執行哪些生命周期函數?

beforeCreate created beforeMount mounted

2,哪些生命周期函數會執行多次

beforeUpdate updated

beforeCreate:

當組件實例化的時候,做了一個初始化操作,注意當前生命周期是組件還沒有實例化完畢,因此你是訪問不到當前組件的data或者methods屬性和方法以及其他生命周期函數

場景:初始化的loading

created:創建后

①當created執行完畢后,會將data以及methods身上所有的屬性和方法通過遍歷添加到vm的實例身上

②created生命周期函數中會將data身上所有的屬性都添加上一個getter/setter方法。讓data的屬性具有響應式的特性

③場景:當前生命周期函數中可以用來進行ajax數據的請求

beforeMount:掛載前

①數據和模板還未進行結合,可以對數據做最后的一次處理

②在這個生命周期函數中是訪問不到真實的DOM結構

mounted:掛載后

①數據與模板進行結合生成真實的DOM樹

②在這個生命周期函數中我們可以通過this。$refs.屬性名稱獲取到真實的DOM結構並對其進行處理

③一般情況下我們都會在當前生命周期函數中做方法的實例化

beforeUpdate:更新前

①更新的數據和模板還為進行結合,可以對數據做最后的修改

②在當前生命周期函數中也可以獲取到真實的DOM結構

updated:更新后

①更新的數據和模板進行相結合,在這個生命周期函數中我們可以獲取到更新后的DOM結構,以及對數據的更新做一個監聽

beforeDestroy:銷毀前

①在當前生命周期函數中依舊是可以訪問到DOM結構的

②使用場景:做一些事件監聽的解釋。

destroyed:銷毀后

①在當前生命周期函數中訪問不到真實的DOM結構了

②在這個生命周期中會將當前vm與DOM之間的關聯全部斷開


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM