Fri Jul 12 11:32:00 CST 2024 inscode

src/App.vue

@@ -2,105 +2,26 @@
 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'
-
-// 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 tabs = {
+    Com1,
+    Com2
 }
 
-const msg = ref("你好！")
-
-const refMsg  = ref({
-    msg:"欢迎使用VUE3.0"
-})
-const shallowRefMsg = shallowRef({
-    msg:"欢迎使用VUE3.1"
-})
-
-const refObjMsg = ref({
-    msg:ref({
-        obj:ref("你好")
-    })
-})
-
-console.log(msg)
-
-const refCom = ref({
-    name:'Com1',
-    com:Com1
+const currentObj = ref({
+    tab:Com1,
+    key:'Com1'
 })
 
-function changeMsg(){
-    // refMsg.value = 777
-    // refMsg.value.msg = 888
-    msg.value += '12'
+function changeCom(k,v){
+    currentObj.value.key = k
+    currentObj.value.tab = v
 }
-setTimeout(() => {
-    changeMsg()
-}, 6000);
-function changeShallowRefMsg(){
-    // shallowRefMsg.value = 888
-    shallowRefMsg.value.msg = 999
-    console.log(shallowRefMsg)
-}
-
-function useFeature(id){
-    watch(
-        ()=>toValue(id),
-        (val)=>{
-            console.log(77,val)
-        }
-    )
-}
-
-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)
-
-const reactiveObj = reactive(obj)
-console.log(reactiveObj)
-console.log(obj)
-console.log(reactiveObj == obj)
 
-watchEffect(()=>{
-    document.body.innerHTML = `msg is: ${msg.value}`
-})
 </script>
 
 <template>
-
-    <p>{{ refObjMsg }}</p>
-    <p>{{ refMsg }}</p>
-    <button @click="changeMsg">changeMsg</button>
-    <p>{{ shallowRefMsg }}</p>
-    <button @click="changeShallowRefMsg">shallowRefMsg</button>
-    <p>
-        <button @click="changeCom">+-</button>
-    </p>
-    <component :is="refCom.com"></component>
+    <button v-for="(v,k) in tabs" :key="k" @click="changeCom(k,v)">{{ k }}</button>
+    <component :is="currentObj.tab"></component>
 </template>
 
 <style scoped>

src/components/Com1.vue

@@ -4,7 +4,20 @@
   </div>
 </template>
 <script setup lang="ts">
-import { defineProps, computed, defineEmits, onActivated, onDeactivated, onBeforeUnmount, onUnmounted } from 'vue'
+import { defineProps, computed, defineEmits, onActivated, onDeactivated, onBeforeUnmount, onUnmounted, onMounted, onUpdated } from 'vue'
+
+onMounted(()=>{
+  debugger
+})
+
+onUnmounted(()=>{
+  debugger
+})
+
+onUpdated(()=>{
+  debugger
+})
+
 onActivated(() => {
   debugger
   console.log('Com1-onActivated')