Optimizing Performance with Dynamic Components and KeepAlive in Vue 3

<template>
  <div class="tab-navigation">
    <button @click="activeComponent = 'HomeComponent'" :class="{ active: activeComponent === 'HomeComponent' }">Home</button>
    <button @click="activeComponent = 'AboutComponent'" :class="{ active: activeComponent === 'AboutComponent' }">About</button>
    <button @click="activeComponent = 'ContactComponent'" :class="{ active: activeComponent === 'ContactComponent' }">Contact</button>
  </div>

  <div class="component-view">
    <!-- KeepAlive caches inactive component instances -->
    <KeepAlive>
      <component :is="activeComponent"></component>
    </KeepAlive>
  </div>
</template>

<script setup>
import { ref, defineAsyncComponent } from 'vue';

// Import components (can be static or async for lazy loading)
import HomeComponent from './HomeComponent.vue';
// const HomeComponent = defineAsyncComponent(() => import('./HomeComponent.vue'));
import AboutComponent from './AboutComponent.vue';
import ContactComponent from './ContactComponent.vue';

const activeComponent = ref('HomeComponent');

// You might need to map component names to actual component objects
// in a real application, especially if using global components or a more complex setup.
// For simplicity in setup script, direct imports are used.

// Example child components (e.g., in Home.vue, About.vue, Contact.vue files):
// Home.vue:
// <template><div><h2>Home Component</h2><input type="text" placeholder="Type something..."></div></template>
// About.vue:
// <template><div><h2>About Us</h2><p>This is the about page content.</p></div></template>
// Contact.vue:
// <template><div><h2>Contact Us</h2><form><input type="email" placeholder="Your Email"></form></div></template>
</script>

<style scoped>
.tab-navigation {
  margin-bottom: 20px;
}

button {
  padding: 10px 15px;
  margin-right: 10px;
  border: 1px solid #ccc;
  background-color: #f0f0f0;
  cursor: pointer;
  border-radius: 5px;
}

button.active {
  background-color: #42b983;
  color: white;
  border-color: #42b983;
}

.component-view {
  border: 1px solid #eee;
  padding: 20px;
  min-height: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f9f9f9;
  border-radius: 5px;
}
</style>