From b7cf1fb37b4021d699498a1e384700c9787cc7cc Mon Sep 17 00:00:00 2001
From: big_sun_962464 <big_sun_962464@devide>
Date: Fri, 12 Jul 2024 15:18:00 +0800
Subject: [PATCH] Fri Jul 12 15:18:00 CST 2024 inscode

---
 src/App.vue | 25 ++++++++++++++-----------
 1 file changed, 14 insertions(+), 11 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 21d982f..0cc3933 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,29 +1,32 @@
 <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>
\ No newline at end of file
+<style scoped></style>
\ No newline at end of file
-- 
GitLab