vue生命周期 鈎子函數

vue生命周期圖示 跳轉鏈接

 

beforeCreate(){
    console.log('組件實例化之前')
},
created(){
    console.log('組件實例化完畢，單頁面還未顯示')
},
beforeMount(){
    console.log('組件掛載前，頁面仍未展示，但虛擬Dom已經配置')
},
mounted(){
    console.log('組件掛在后，此方法執行后，頁面顯示')
},
beforeUpdate(){
    console.log('組件更新前，頁面仍未更新，但虛擬Dom已經配置')
},
updated(){
    console.log('組件更新，此方法執行后，頁面顯示')
},
beforeDestroy(){
    console.log('組件銷毀前')
},
destroyed(){
    console.log('組件銷毀')
},

 

各個鈎子函數執行時瀏覽器對應做了什么

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

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

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

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

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

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

beforeDestroy  --------- 組件銷毀前

destroyed  --------- 組件銷毀

 

組件實例化之前