Fri Jul 12 15:18:00 CST 2024 inscode

src/App.vue

 <script setup>
 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'
+import { onMounted, toRefs, watchEffect, shallowReadonly, readonly, ref, reactive, shallowRef, computed, isRef, unref, toRef, toValue, watch, onBeforeMount, onBeforeUpdate, onUpdated } from 'vue'
 const tabs = {
     Com1,
     Com2
 }
-
 const currentObj = ref({
-    tab:Com1,
-    key:'Com1'
+    tab: Com1,
+    key: 'Com1'
 })
-
-function changeCom(k,v){
+function changeCom(k, v) {
     currentObj.value.key = k
     currentObj.value.tab = v
 }
 
+const isAddKeepAlive = ref(false)
 </script>
 
 <template>
-    <button v-for="(v,k) in tabs" :key="k" @click="changeCom(k,v)">{{ k }}</button>
-    <component :is="currentObj.tab"></component>
+    <p>
+        <button @click="isAddKeepAlive = !isAddKeepAlive">是否添加KeepAlive-{{ isAddKeepAlive }}</button>
+    </p>
+    <button v-for="(v, k) in tabs" :key="k" @click="changeCom(k, v)">{{ k }}</button>
+    <KeepAlive v-if="isAddKeepAlive">
+        <component :is="currentObj.tab"></component>
+    </KeepAlive>
+    <component v-else :is="currentObj.tab"></component>
 </template>
 
-<style scoped>
-
+<style scoped></style>
\ No newline at end of file
-</style>
\ No newline at end of file