-
beforeCreate 贡羔、created => setup，執(zhí)行時機是在 beforeCreate 和 created 之間个初，執(zhí)行的時候這個實例并沒有被創(chuàng)建乖寒，并沒有完成初始化，不存在 this勃黍。
-
beforeMount => onBeforeMount宵统，在掛載開始之前被調(diào)用：相關的 render 函數(shù)首次被調(diào)用。
-
mounted => onMounted覆获，實例被掛載后調(diào)用马澈，
-
beforeUpdate => onBeforeUpdate，數(shù)據(jù)更新時弄息，在虛擬DOM渲染之前調(diào)用痊班。
-
updated => onUpdated，數(shù)據(jù)更改導致的虛擬 DOM 重新渲染摹量，在這之后會調(diào)用該鉤子涤伐。當這個鉤子被調(diào)用時，組件 DOM 已經(jīng)更新缨称。
-
beforeUnmount => onBeforeUnmount凝果，在卸載組件實例之前調(diào)用。在這個階段睦尽，實例仍然是完全正常的器净。
-
unmounted => onUnmounted，卸載組件實例后調(diào)用当凡。調(diào)用此鉤子時山害，組件實例的所有指令都被解除綁定纠俭，所有事件偵聽器都被移除，所有子組件實例被卸載浪慌。
const app = Vue.createApp({
setup() {
const { ref, onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onBeforeUnmount, onUnmounted, onRenderTracked, onRenderTriggered } = Vue;
// 掛載前
onBeforeMount(() => {
console.log('onBeforeMount');
})
// 掛載后
onMounted(() => {
console.log('onMounted');
})
// 更新完成之前
onBeforeUpdate(() => {
console.log('onBeforeUpdate');
})
// 更新完成之后
onUpdated(() => {
console.log('onUpdated');
})
// 每次渲染后重新收集響應式依賴
onRenderTracked(() => {
console.log('onRenderTracked');
})
// 每次觸發(fā)頁面重新渲染時自動執(zhí)行
onRenderTriggered(() => {
console.log('onRenderTriggered');
})
const val = ref('hello world');
function handleClick() {
val.value = 'world hello';
}
return {
val,
handleClick
}
},
template: `<div @click="handleClick">{{val}}</div>`
})
const vm = app.mount("#app");
