什么是生命周期?組件從創建到銷毀的過程


生命周期:一個組件從創建到銷毀的這個過程叫做生命周期 生命周期鈎子函數

1、組件從創建到銷毀的過程
1、創建前 創建后
2、掛載前 掛載后
3、更新前 更新后
4、銷毀前 銷毀后

beforeCreate:
當前生命周期函數主要用來做初始化工作,在這個生命周期函數中我們可以創建一個loading

created:(*****)
創建后:
1、在當前生命周期函數中我們可以訪問到vm身上所有的屬性和方法
2、當前生命周期函數會將data和methods身上所有的屬性和方法都掛載在vm的實例身上
3、當前生命周期函數會將data身上所有的屬性添加一個getter/setter方法,因此如果需要進行
前后端數據交互的時候必須在當前生命周期中進行(響應式原理),如果數據沒有提前在data中進行了綁定
那么這個屬性身上就不會有getter/setter方法,因此數據也不會動態的進行改變

beforeMount:
掛載前:
數據和模板還沒有進行相結合,在這個生命周期函數中我們可以進行數據最后的修改

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

mounted:(*****)
掛載后:
數據和模板已經結合,在這個生命周期函數中我們可以通過this.$refs訪問到真實DOM結構

$refs
ref="值必須是整個VDom中唯一";

訪問的時候通過this.$refs.值


ref與document的區別?
document是從整個頁面去查找DOM結構,這個DOM結構肯定是已經插入到頁面的DOM結構
ref是從當前vm的虛擬DOM中找到的當前元素,ref是從內存當中找到的DOM結構


beforeUpdate:
更新前:
當data中的數據發生了改變的時候就會執行
1、可以訪問到真實的DOM結構
2、可以對數據做最后的修改
3、當前生命周期函數中的數據和模板還沒有更新完畢

updated:
更新后:
1、數據更新后最新的DOM結構
2、在當前生命周期函數中需要特別的注意,因為當前函數是一個頻繁觸發的函數。
因此如果在當前生命周期函數中做一些事件綁定或者實例化的時候需要做一個提前判斷

beforeDestroy:*
銷毀前
1、在這個生命周期函數中,還是可以繼續訪問到真實的DOM結構以及data中的數據
2、一般我們都會在這個生命周期函數中做一些事件解綁/移除的操作

destroyted:
銷毀后:
1、將DOM與數據之間的關聯進行斷開
2、在當前生命周期函數中是訪問不到真實的DOM結構

 

 


以上生命周期函數中
多次執行的生命周期函數
1、beforeUpdate
2、updated*

組件第一個創建的時候會執行哪些生命周期函數
beforeCreate
created*
beforeMount
mounted*

 

innerText innerHTML outerText outerHTML

vm實例身上的方法

$mount() 手動設置掛載點 例子:vm.$mount("#app");

$destroy(); 銷毀

$forceUpdate 強制更新 (強制調用了render方法);

$on() 事件綁定

$emit() 事件觸發

$off() 事件解綁

$once() 只綁定一次


免責聲明!

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



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