vue 生命週期 筆記

生命週期:一個組件從建立到銷燬的這個過程叫作生命週期 生命週期鉤子函數
 
一、組件從建立到銷燬的過程
一、建立前 建立後
二、掛載前 掛載後
三、更新前 更新後
四、銷燬前 銷燬後
beforeCreate:
當前生命週期函數主要用來作初始化工做,在這個生命週期函數中咱們能夠建立一個loading
 
created:(*****)
建立後:
一、在當前生命週期函數中咱們能夠訪問到vm身上全部的屬性和方法
二、當前生命週期函數會將data和methods身上全部的屬性和方法都掛載在vm的實例身上
三、當前生命週期函數會將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中的數據發生了改變的時候就會執行
一、能夠訪問到真實的DOM結構
二、能夠對數據作最後的修改
三、當前生命週期函數中的數據和模板尚未更新完畢
 
updated:
更新後:
一、數據更新後最新的DOM結構
二、在當前生命週期函數中須要特別的注意,由於當前函數是一個頻繁觸發的函數。
所以若是在當前生命週期函數中作一些事件綁定或者實例化的時候須要作一個提早判斷
 
beforeDestroy:*
銷燬前
一、在這個生命週期函數中,仍是能夠繼續訪問到真實的DOM結構以及data中的數據
二、通常咱們都會在這個生命週期函數中作一些事件解綁/移除的操做
 
destroyted:
銷燬後:
一、將DOM與數據之間的關聯進行斷開
二、在當前生命週期函數中是訪問不到真實的DOM結構
 
 
 
 
 
以上生命週期函數中
屢次執行的生命週期函數
一、beforeUpdate
二、updated*
 
組件第一個建立的時候會執行哪些生命週期函數
beforeCreate
created*
beforeMount
mounted*
 
innerText innerHTML outerText outerHTML
vm實例身上的方法
 
$mount() 手動設置掛載點 例子:vm.$mount("#app");
 
$destroy(); 銷燬
 
$forceUpdate 強制更新 (強制調用了render方法);
 
$on() 事件綁定
 
$emit() 事件觸發
 
$off() 事件解綁
 
$once() 只綁定一次