vue3学习（七）vue3组件的生命周期

vue组件的生命周期

简单来说就是一个组件从开始创建、初始化数据、编译模版、挂载Dom -> 渲染、更新 ->卸载 等⼀系列过程，称这是Vue的⽣命周期。

组合式API 是没有 beforeCreate 和 created 这两个生命周期的

onBeforeMount()：此时读不到dom，可以获取到data数据，在dom挂载之前调用

onMounted()：组件渲染完成之后调用，可以操作dom

onBeforeUpdate()：数据更新时调用，获取到更新之前的数据（更新之前可以做些卸载的操作）

onUpdated()：DOM更新后，updated的方法调用获取更新后的dom。

onBeforeUnmount()：在卸载组件实例之前调用。在这个阶段，实例仍然是完全正常的。

onUnmounted()：卸载组件实例后调用。调用此钩子时，组件实例的所有指令都被解除绑定，所有事件侦听器都被移除，所有子组件实例被卸载。

const str = ref<string>('大雪')
const div = ref<HTMLDivElement>()
const change = () => {
    str.value = '修改为小雨'
}

console.log('setup')
onBeforeMount(() => {
    console.log('创建之前=====>', div.value);   // undefined
    console.log('创建之前=====>', str.value);   // 大雪
})
onMounted(() => {
    console.log('创建之后====>', div.value);    // <div>修改为小雨</div>
    console.log('创建之后====>', str.value);    // 大雪
})
onBeforeUpdate(() => {
    console.log('更新之前====>', div.value?.innerText);    // 大雪 （更新之前可以做一些卸载的操作）
})
onUpdated(() => {
    console.log('更新之后====>', div.value?.innerText);    // 修改为小雨
})
onBeforeUnmount(() => {
    console.log('销毁之前==');
})
onUnmounted(() => {
    console.log('销毁之后==');
})