生命周期升級(jí)變化
| 2.x 生命周期 |
3.x 生命周期 |
執(zhí)行時(shí)間說(shuō)明 |
| beforeCreate |
setup |
組件創(chuàng)建前執(zhí)行 |
| created |
setup |
組件創(chuàng)建后執(zhí)行 |
| beforeMount |
onBeforeMount |
組件掛載到節(jié)點(diǎn)上之前執(zhí)行 |
| mounted |
onMounted |
組件掛載完成后執(zhí)行 |
| beforeUpdate |
onBeforeUpdate |
組件更新之前執(zhí)行 |
| updated |
onUpdated |
組件更新完成之后執(zhí)行 |
| beforeDestroy |
onBeforeUnmount |
組件卸載之前執(zhí)行 |
| destroyed |
onUnmounted |
組件卸載完成后執(zhí)行 |
| errorCaptured |
onErrorCaptured |
當(dāng)捕獲一個(gè)來(lái)自子孫組件的異常時(shí)激活鉤子函數(shù) |
其中弥锄，在3.x歌殃，setup 的執(zhí)行時(shí)機(jī)比2.x的 beforeCreate和 created 還早殊霞，可以完全代替原來(lái)的這2 個(gè)鉤子函數(shù)豪硅。
<keep-alive> 中的組件报嵌，兩個(gè)生命周期鉤子函數(shù)：
| 2.x 生命周期 |
3.x 生命周期 |
執(zhí)行時(shí)間說(shuō)明 |
| activated |
onActivated |
被激活時(shí)執(zhí)行 |
| deactivated |
onDeactivated |
切換組件后，原組件消失前執(zhí)行 |
使用 生命周期方法
import { defineComponent, onBeforeMount, onMounted } from 'vue'
export default defineComponent({
setup () {
console.log(1);
onBeforeMount( () => {
console.log(2);
});
onMounted( () => {
console.log(3);
});
console.log(4);
return {}
}
})
