W250511/17.Vue3/project/src/components/Demo12.vue

<template>
  <div>
    <h1>Vue3生命周期</h1>
    <p id="msg1">{{ msg }}</p>
    <!-- <button @click="changeMsg">修改消息</button> -->
  </div>
</template>
<!-- 
    vue3生命周期
    初始：setup
    运行：onBeforeMount onMounted onBeforeUpdate onUpdated
    卸载：onBeforeUnmount onUnmounted
-->
<script lang="ts" setup>
import {ref,reactive,onBeforeMount,onMounted,onBeforeUpdate,onUpdated,onBeforeUnmount,onUnmounted} from "vue" 
let msg = ref("121");
console.log(msg.value);
onBeforeMount(()=>{
    console.log(msg.value,'创建前')
})
onMounted(()=>{
    console.log(msg.value,'创建后')
})
onBeforeUpdate(()=>{
    console.log(msg.value,'更新前')
})
onUpdated(()=>{
    console.log(msg.value,'更新后')
})
onBeforeUnmount(()=>{
    console.log('卸载前')
})
onUnmounted(()=>{
    console.log('卸载后')
})

</script>
<style lang="scss" scoped>
</style>