生命周期

每个Vue组件实例从创建到初始化、更新、销毁的过程

vue3的组合式API是没有beforeCreate和created这两个生命周期的（用setup代替）

onBeforeMount()

在组件DOM实际渲染安装之前调用。在这一步中，根元素还不存在。

onMounted()

在组件的第一次渲染后调用，该元素现在可用，允许直接DOM访问

onBeforeUpdate()

数据更新时调用，发生在虚拟 DOM 打补丁之前。

onUpdated()

DOM更新后，updated的方法即会调用。

onBeforeUnmount()

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

onUnmounted()

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

<template>
  <div>
    <p v-if="flag">111</p>
    <p ref="dom">我是dom{{str}}</p>
    <button @click="btn">更新</button>
    <button @click="flag=!flag">创建销毁</button>
  </div>
</template>

<script setup lang="ts">
import {ref,Ref,onBeforeMount,onMounted,onBeforeUpdate,onUpdated,onBeforeUnmount,onUnmounted} from 'vue'

console.log('setup');

let dom=ref<HTMLAreaElement>()

let str=ref('更新之前')
const btn=()=>{
    str.value="更新之后"
}

let flag=ref(true)
onBeforeMount(()=>{
    //真实dom还没渲染到浏览器，这时候是虚拟dom
    console.log("onBeforeMount----创建之前",dom.value);
})

onMounted(()=>{
    //渲染完成
    console.log("onMounted----创建完成",dom.value);
})

onBeforeUpdate(()=>{
    //获取的是更新之前的dom
    console.log("onBeforeUpdate---更新之前",dom.value?.innerText);
})

onUpdated(()=>{
    console.log("onUpdated----更新之后",dom.value?.innerText);
})

onBeforeUnmount(()=>{
    console.log("onBeforeUnmount--卸载组件之前");
})

onUnmounted(()=>{
    console.log("onUnmounted---卸载之后");
})
</script>

<style>

</style>

vue3-生命周期