Wed Jul 3 15:51:00 CST 2024 inscode

src/App.vue

 <script setup>
-import Com from './components/Com.vue'
-import {onMounted, toRefs,watchEffect,shallowReadonly,readonly,ref,reactive,shallowRef,computed, isRef, unref, toRef, toValue, watch} from 'vue'
+import Com1 from './components/Com1.vue'
+import Com2 from './components/Com2.vue'
+import {onMounted, toRefs,watchEffect,shallowReadonly,readonly,ref,reactive,shallowRef,computed, isRef, unref, toRef, toValue, watch, onBeforeMount, onBeforeUpdate, onUpdated} from 'vue'
 
-onMounted(()=>{
-    
-})
+// onBeforeMount(()=>{
+//     debugger
+//     console.log('onBeforeMount')
+// })
+// onMounted(()=>{
+//     debugger
+//     console.log('onMounted')
+// })
+
+// onBeforeUpdate(()=>{
+//     debugger
+//     console.log('onBeforeUpdate')
+// })
+// onUpdated(()=>{
+//     debugger
+//     console.log('onUpdated')
+// })
 const obj={
     name:'普通obj'
 }
 
-// const name = toRef(obj.name)
-
-const name1 = toRef(()=>obj.name)
-
-const refMsg = ref("欢迎使用VUE3.0")
-const refObj = ref({
-    msg:'refObj-欢迎使用VUE3.0',
-    val:12
-})
+const refMsg  = ref("欢迎使用VUE3.0")
 
-const reactiveMsg = reactive("欢迎使用VUE")
-const reactiveObj = reactive({
-    msg:'reactiveObj-欢迎使用VUE',
-    val:77
+const refCom = ref({
+    name:'Com1',
+    com:Com1
 })
 
-// const msg = toRef(reactiveObj,'msg')
-// const msg = ref("欢迎使用VUE3.0")
-
-function handleClick(){
-   
-}
-const refsObj = toRefs(reactiveObj)
-console.log(111,refsObj)
-function changeMsg(val){
-    // reactiveObj.msg=111
-    refsObj.msg.value =222
+function changeMsg(){
+    refMsg.value = 777
 }
+
 function useFeature(id){
     watch(
         ()=>toValue(id),
@@ -45,22 +43,26 @@ function useFeature(id){
         }
     )
 }
+
+function changeCom(){
+    if(refCom.value.name === 'Com1'){
+        refCom.value.name = 'Com2'
+        refCom.value.com = Com2
+    }else{
+        refCom.value.name = 'Com1'
+        refCom.value.com = Com1
+    }
+}
 useFeature(refMsg)
 </script>
 
 <template>
+    <p>{{ refMsg }}</p>
     <button @click="changeMsg">++</button>
-    <p>{{ reactiveObj }}</p>
-    <p>{{ refsObj }}</p>
-    <Com v-model:msg="refMsg"/>
-    <!-- <div>
-       <p>{{ obj }}</p>
-       <p>{{ msg }}</p>
-       <p>{{ refMsg }}</p>
-       <p>{{ refObj }}</p>
-       <p>{{ reactiveMsg }}</p>
-       <p>{{ reactiveObj }}</p>
-    </div> -->
+    <p>
+        <button @click="changeCom">+-</button>
+    </p>
+    <component :is="refCom.com"></component>
 </template>
 
 <style scoped>

src/components/Com.vue

-<template>
-  <div>
-    <h2 @click="handle">com1</h2>
-    <p>{{ props.msg }}</p>
-  </div>
-</template>
-<script setup lang="ts">
-import {defineProps,computed,defineEmits} from 'vue'
-const props = defineProps({
-  msg:{
-    type:String
-  }
-})
-const emits = defineEmits(['update:msg'])
-
-console.log(12,props)
- 
-const msg = computed({
-  get(){
-    return props.msg
-  },
-  set(val){
-    console.log(val)
-    emits('update:msg',val)
-  }
-})
-function handle(){
-  msg.value = '123'
-}
-</script>
\ No newline at end of file

src/components/Com1.vue

+<template>
+  <div>
+    <h2>Com1</h2>
+  </div>
+</template>
+<script setup lang="ts">
+import { defineProps, computed, defineEmits, onActivated, onDeactivated, onBeforeUnmount, onUnmounted } from 'vue'
+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

src/components/Com2.vue

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