1. 程式人生 > >生命周期函數

生命周期函數

綁定 更改 nbsp 移除 des 手動 結合 upd 行數

一個組件從創建到銷毀的過程就叫做生命周期

beforeCreate(){ } 創建前
我們一般在這個生命周期函數中進行初始化工作,我們可以創建一個loading;

created (){ } 創建後
我們可以在這個生命周期函數中訪問 new Vue()中的所有屬性和方法
在這個生命周期函數中,會將data中所有屬性和methods中所有的方法都掛載到 new Vue()的實例化對象上
在這個生命周期函數中,會給data的所有屬性都添加一個getter/setter方法,有了這兩個方法,我們可以對數據進行動態操作 ; 故,若要和後端進行數據交互,必須在該函數中進行

beforeMount (){ } 掛載前

數據和模塊還未進行結合
我們還可以對數據進行最後的更改
我們在這個生命周期函數中不能訪問到真實的DOM結構

mounted(){ } 掛載後
數據和模塊已經融合
我們可以通過 this.$refs.值 來訪問DOM結構
註:標簽的ref = “值是唯一的" , 該屬性類似於id

beforeUpdate(){ } 更新前
在這個聲明周期函數中可以訪問到真實的DOM結構
我們可以對數據做最後的修改
註:該函數中數據和模板還未更新完畢

update(){ } 更新後
在這個生命周期函數中,我們可以訪問到 最新的 DOM結構
註:由於這個生命周期函數是頻繁被觸發的,所以我們若要在該函數中綁定一些事件或進行實例化的時候需要做一個提前判斷 if(!....){ }

beforeDestroy(){ } 銷毀前
在這個生命周期函數中,我們還繼續可以訪問到DOM結構
我們一般在這個函數中做一些事件的解綁/移除操作

destroyed(){ } 銷毀後
數據和dom的關聯已經斷開
在這個生命周期函數中是訪問不到真實的dom結構的

new Vue() 實例化對象的方法
$mount( ) 手動掛載
$destroy() 手動銷毀
$forceUpdate() 強制更新
$on() 事件綁定
$emit() 事件觸發
$once() 事件僅綁定一次
$off() 事件解綁

生命周期函數