生命周期:一個組件從創建到銷毀的這個過程叫做生命周期(鈎子函數)
1.beforeCreate(創建前)
1.當前生命周期函數主要用來做初始化工作
2.在這個生命周期函數中我們可以創建一個loading
2.created(創建后)
(結束loading)
1.在當前生命周期函數中我們可以訪問到vm身上的所有的屬性和方法
2.當前生命周期函數會將data和methods身上的屬性和方法都掛載在vm的實例身上(這就是我們調用data的方法為什么可以直接this.屬性就可以調用了)
3.當前生命周期函數會將data身上所有的屬性添加一個getter/setter方法,因此如果需要進行前后端數據交互的時候必須在當前生命周期進行(響應式原理),如果數據沒有提前在data中進行綁定,那么這個屬性就不會有getter/setter方法,因此數據也不會動態的改變
3.beforeMount(掛載前)
1.數據和模板還沒有進行相結合,在這個生命周期函數中我們可以進行數據最后的修改
2.在當前生命周期函數中是訪問不到真實的dom結構的
4.mounted(掛載后)
1.數據和模板已經結合,在這個生命周期函數中我們可以通過this.$refs.值訪問到真實的dom結構
2.$refs
ref = "值必須是整個虛擬dom中唯一"
訪問的時候通過this.$refs.值
3.ref和document的區別
document是從整個頁面去查找dom結構,這個dom結構肯定是已經插入到頁面的dom結構
ref是從當前vm的虛擬dom中找到的當前元素,ref是從內存當中找到的dom結構
5.beforeUpdate(更新前)
1.當data中的數據發生改變的時候就會執行
2.可以訪問到真實的dom結構
3.可以對數據做最后的修改
4.當前生命周期函數中的數據和模板還沒有更新完畢
6.updated(更新后)
1.可以訪問數據更新后最新的dom結構
2.在當前生命周期函數中需要特別的注意,因為當前函數是一個頻繁觸發的函數,因此如果在當前生命周期函數中做一些事件綁定或者實例化的時候需要做一個提前判斷(判斷如果這個插件沒有的話,再去創建)
7.befoDestroy(銷毀前)
1.在這個生命函數周期中,還是可以繼續訪問到真實的dom結構以及data中的數據
2.一般我們都會在這個生命周期函數中做一些事件解綁/移除的操作
8.destroyed(銷毀后)
1.將dom與數據之間的關聯進行斷開
2.在當前生命周期函數中是訪問不到真實的dom結構的
ps:
以上生命周期函數中多次執行的生命周期函數
beforeUpdate和updated
組件第一次創建的時候會執行哪些生命周期函數
beforeCreate
created
beforeMount
mounted