Fri Jul 12 13:56:00 CST 2024 inscode

src/components/Com1.vue

 <template>
   <div>
-    <h2>Com1</h2>
+    <h2 ref="h2Ref" @click="msg+='1'">Com1-{{ msg }}</h2>
   </div>
 </template>
 <script setup lang="ts">
-import { defineProps, computed, defineEmits, onActivated, onDeactivated, onBeforeUnmount, onUnmounted, onMounted, onUpdated } from 'vue'
+import {ref, defineProps, computed, defineEmits, onActivated, onDeactivated, onBeforeUnmount, onUnmounted, onMounted, onUpdated, onBeforeMount, onBeforeUpdate } from 'vue'
 
+const msg = ref("欢迎使用VUE3.0")
+const h2Ref = ref()
+
+onBeforeMount(()=>{
+  debugger
+})
 onMounted(()=>{
   debugger
 })
 
-onUnmounted(()=>{
+onBeforeUpdate(()=>{
   debugger
 })
-
 onUpdated(()=>{
   debugger
 })
 
 onActivated(() => {
   debugger
-  console.log('Com1-onActivated')
 })
 onDeactivated(() => {
   debugger
-  console.log('Com1-onDeactivated')
 })
 
 onBeforeUnmount(()=>{
   debugger
-  console.log('Com1-onBeforeUnmount')
 })
 onUnmounted(()=>{
   debugger
-  console.log('Com1-onUnmounted')
 })
 </script>
\ No newline at end of file