-
beforeCreate 、created => setup，执行时机是在 beforeCreate 和 created 之间，执行的时候这个实例并没有被创建，并没有完成初始化，不存在 this。
-
beforeMount => onBeforeMount，在挂载开始之前被调用：相关的 render 函数首次被调用。
-
mounted => onMounted，实例被挂载后调用，
-
beforeUpdate => onBeforeUpdate，数据更新时，在虚拟DOM渲染之前调用。
-
updated => onUpdated，数据更改导致的虚拟 DOM 重新渲染，在这之后会调用该钩子。当这个钩子被调用时，组件 DOM 已经更新。
-
beforeUnmount => onBeforeUnmount，在卸载组件实例之前调用。在这个阶段，实例仍然是完全正常的。
-
unmounted => onUnmounted，卸载组件实例后调用。调用此钩子时，组件实例的所有指令都被解除绑定，所有事件侦听器都被移除，所有子组件实例被卸载。
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');
})
// 每次触发页面重新渲染时自动执行
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");
