VUE3生命周期

步骤

1. 先从vue中导入以on打头的生命周期钩子函数
2. 在setup函数中调用生命周期函数并传入回调函数
3. 生命周期钩子函数可以调用多次

具体内容：

• Vue3和vue2的生命周期对比

选项式API下的生命周期函数使用	组合式API下的生命周期函数使用
beforeCreate	不需要（直接写到setup函数中）
created	不需要（直接写到setup函数中）
beforeMount	onBeforeMount
mounted	onMounted
beforeUpdate	onBeforeUpdate
updated	onUpdated
beforeDestroyed	onBeforeUnmount
destroyed	onUnmounted
activated	onActivated
deactivated	onDeactivated

<script setup>
// 引入 watch
import { onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onBeforeUnmount, onUnmounted, ref } from "vue";
// import Test from './components/Test.vue'

onBeforeMount(() => {
  console.log('onBeforeMount1')
})
onMounted(() => {
  console.log('onMounted1')
})
onBeforeUpdate(() => {
  console.log('onBeforeUpdate1')
})
onUpdated(() => {
  console.log('onUpdated1')
})
onBeforeUnmount(() => {
  console.log('onBeforeUnmount1')
})
onUnmounted(() => {
  console.log('onUnmounted1')
})

const count = ref(0)

</script>

<template>
  <div>
    <!-- <Test v-if="count<10"/> -->
    <h1>{{count}}</h1>
    <button @click="count++">count++</button>
  </div>
</template>

 子组件 Test

<script setup>

import { onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onBeforeUnmount, onUnmounted } from "vue";

onBeforeMount(() => {
  console.log('onBeforeMount2')
})
onMounted(() => {
  console.log('onMounted2')
})
onBeforeUpdate(() => {
  console.log('onBeforeUpdate2')
})
onUpdated(() => {
  console.log('onUpdated2')
})
onBeforeUnmount(() => {
  console.log('onBeforeUnmount2')
})
onUnmounted(() => {
  console.log('onUnmounted2')
})

</script>

<template>
    <div>我是一个自定义组件</div>
</template>