vue生命週期 鉤子函數

vue生命週期圖示 跳轉連接

 

 1 beforeCreate(){
 2     console.log('組件實例化以前')
 3 },
 4 created(){
 5     console.log('組件實例化完畢，單頁面還未顯示')
 6 },
 7 beforeMount(){
 8     console.log('組件掛載前，頁面仍未展現，但虛擬Dom已經配置')
 9 },
10 mounted(){
11     console.log('組件掛在後，此方法執行後，頁面顯示')
12 },
13 beforeUpdate(){
14     console.log('組件更新前，頁面仍未更新，但虛擬Dom已經配置')
15 },
16 updated(){
17     console.log('組件更新，此方法執行後，頁面顯示')
18 },
19 beforeDestroy(){
20     console.log('組件銷燬前')
21 },
22 destroyed(){
23     console.log('組件銷燬')
24 },

 

各個鉤子函數執行時瀏覽器對應作了什麼

beforeCreate  --------- 組件實例化以前

created  --------- 組件實例化完畢，單頁面還未顯示

beforeMount  --------- 組件掛載前，頁面仍未展現，但虛擬DOM已經配置

mounted  --------- 組件掛載後，此方法執行後，頁面顯示

beforeUpdate  --------- 組件更新前，頁面仍未更新，但虛擬Dom已經配置

updated  --------- 組件更新，此方法執行後，頁面顯示

beforeDestroy  --------- 組件銷燬前

destroyed  --------- 組件銷燬

 

組件實例化以前