Vue.js: 动态与异步组件

<!-- ❌ 翻车版：5 个 Tab 用 5 个 v-if -->
<template>
  <div class="tabs">
    <button @click="currentTab = 'home'">Home</button>
    <button @click="currentTab = 'profile'">Profile</button>
    <button @click="currentTab = 'settings'">Settings</button>
    
    <div v-if="currentTab === 'home'">
      <HomeTab />
    </div>
    <div v-else-if="currentTab === 'profile'">
      <ProfileTab />
    </div>
    <div v-else-if="currentTab === 'settings'">
      <SettingsTab />
    </div>
  </div>
</template>

<!-- ✅ 正确版：1 个 <component> 切换 -->
<template>
  <div class="tabs">
    <button 
      v-for="tab in tabs" 
      :key="tab.name"
      :class="{ active: currentTab === tab.name }"
      @click="currentTab = tab.name"
    >
      {{ tab.label }}
    </button>
    
    <!-- ✅ 1 个 <component> 标签动态切换 -->
    <component :is="currentTabComponent" />
  </div>
</template>

<script setup>
const { ref, computed, defineAsyncComponent } = Vue

// 同步组件
import HomeTab from './tabs/HomeTab.vue'
import ProfileTab from './tabs/ProfileTab.vue'

// 异步组件（按需加载）
const SettingsTab = defineAsyncComponent(() => import('./tabs/SettingsTab.vue'))

const tabs = [
  { name: 'home', label: 'Home' },
  { name: 'profile', label: 'Profile' },
  { name: 'settings', label: 'Settings' }
]

const currentTab = ref('home')

// 计算属性：根据 currentTab 决定显示哪个组件
const currentTabComponent = computed(() => {
  return { home: HomeTab, profile: ProfileTab, settings: SettingsTab }[currentTab.value]
})
</script>

<!-- 写法 1：组件名字符串（全局注册过的） -->
<component :is="'HomeTab'" />

<!-- 写法 2：组件对象（最常用） -->
<component :is="HomeTab" />

<!-- 写法 3：动态计算属性 -->
<component :is="currentTabComponent" />

<!-- 写法 4：异步组件对象 -->
<component :is="asyncComponent" />

<!-- 写法 5：内联组件对象 -->
<component :is="{ template: '<div>Inline</div>' }" />

<!-- TabContainer.vue -->
<template>
  <div>
    <button 
      v-for="tab in tabs" 
      :key="tab.name"
      @click="currentTab = tab.name"
    >
      {{ tab.label }}
    </button>
    
    <!-- 动态组件 -->
    <component :is="currentTabComponent" />
  </div>
</template>

<script setup>
const { ref, computed } = Vue
import HomeTab from './tabs/HomeTab.vue'
import ProfileTab from './tabs/ProfileTab.vue'
import SettingsTab from './tabs/SettingsTab.vue'

const tabs = [
  { name: 'home', label: 'Home' },
  { name: 'profile', label: 'Profile' },
  { name: 'settings', label: 'Settings' }
]

const currentTab = ref('home')

const currentTabComponent = computed(() => ({
  home: HomeTab,
  profile: ProfileTab,
  settings: SettingsTab
}[currentTab.value]))
</script>

<script setup>
const { defineAsyncComponent } = Vue
import LoadingSpinner from './LoadingSpinner.vue'

// 异步组件：只有使用 ChartEditor 时才加载它的代码
const ChartEditor = defineAsyncComponent({
  // 1. 加载函数
  loader: () => import('./ChartEditor.vue'),
  
  // 2. 加载中显示
  loadingComponent: LoadingSpinner,
  
  // 3. 加载失败显示
  errorComponent: ErrorMessage, // 需要 import ErrorMessage from './ErrorMessage.vue'
  
  // 4. 加载延迟（避免闪烁）
  delay: 200
})
</script>

<template>
  <ChartEditor v-if="showEditor" />
</template>

<script setup>
const { defineAsyncComponent } = Vue

// ✅ 简化版：只有 loader
const ChartEditor = defineAsyncComponent(() => import('./ChartEditor.vue'))
</script>

<template>
  <!-- Suspense 自动等待异步组件加载完成 -->
  <Suspense>
    <!-- 异步组件 -->
    <ChartEditor :data="chartData" />
    
    <!-- 加载中显示（默认插槽） -->
    <template #fallback>
      <LoadingSpinner />
    </template>
  </Suspense>
</template>

<template>
  <Suspense>
    <!-- 默认插槽：异步内容 -->
    <AsyncComponent />
    
    <!-- fallback 插槽：加载中显示 -->
    <template #fallback>
      <div>Loading...</div>
    </template>
  </Suspense>
</template>

<template>
  <component :is="currentTabComponent" />
</template>

<!-- 切换 Tab 时：
1. 旧组件 onBeforeUnmount
2. 旧组件 onUnmounted
3. 新组件 onBeforeMount
4. 新组件 onMounted
5. 每次切换都重新加载数据（性能差）
-->

<template>
  <keep-alive>
    <component :is="currentTabComponent" />
  </keep-alive>
</template>

<!-- 切换 Tab 时：
1. 旧组件 onDeactivated（不停用销毁）
2. 新组件 onActivated（从缓存恢复）
3. 数据保留，滚动位置保留
-->

<template>
  <!-- include：只缓存指定组件 -->
  <keep-alive include="HomeTab,ProfileTab">
    <component :is="currentTabComponent" />
  </keep-alive>
  
  <!-- exclude：不缓存指定组件 -->
  <keep-alive exclude="SettingsTab">
    <component :is="currentTabComponent" />
  </keep-alive>
  
  <!-- max：最多缓存 5 个 -->
  <keep-alive :max="5">
    <component :is="currentTabComponent" />
  </keep-alive>
</template>

<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>

<style>
button { padding: 6px 12px; margin: 2px; border: none; background: #eee; cursor: pointer; border-radius: 4px; }
button.active { background: #42b883; color: white; }
.tab-content { padding: 1rem; border: 1px solid #ddd; margin-top: 0.5rem; min-height: 60px; }
</style>

<div id="app">
  <button
    v-for="tab in tabs" :key="tab.name"
    :class="{ active: currentTab === tab.name }"
    @click="currentTab = tab.name"
  >{{ tab.label }}</button>

  <keep-alive :max="3">
    <component :is="currentTabComponent" :key="currentTab"></component>
  </keep-alive>

  <p style="color: #999; font-size: 0.85rem;">查看 console（切换 Tab 看激活/停用）</p>
</div>

<script>
const { createApp, ref, computed, onMounted, onActivated, onDeactivated } = Vue

// 3 个 Tab 组件
const Home = {
  setup() {
    onMounted(() => console.log('🏠 Home mounted'))
    onActivated(() => console.log('🏠 Home activated'))
    onDeactivated(() => console.log('🏠 Home deactivated'))
    return { counter: ref(0) }
  },
  template: `
    <div class="tab-content" style="background: #ecfdf5;">
      <h3>Home</h3>
      <button @click="$data.counter = ($data.counter || 0) + 1">计数: {{ $data.counter || 0 }}</button>
      <p style="font-size: 0.85rem; color: #999;">切走再切回，计数保留（keep-alive 缓存）</p>
    </div>
  `
}

const Profile = {
  setup() {
    onMounted(() => console.log('👤 Profile mounted'))
    onActivated(() => console.log('👤 Profile activated'))
    onDeactivated(() => console.log('👤 Profile deactivated'))
    return {}
  },
  template: '<div class="tab-content" style="background: #eff6ff;"><h3>Profile</h3><p>用户资料</p></div>'
}

const Settings = {
  setup() {
    onMounted(() => console.log('⚙️ Settings mounted'))
    onActivated(() => console.log('⚙️ Settings activated'))
    onDeactivated(() => console.log('⚙️ Settings deactivated'))
    return {}
  },
  template: '<div class="tab-content" style="background: #fef3c7;"><h3>Settings</h3><p>系统设置</p></div>'
}

const App = {
  components: { Home, Profile, Settings },
  setup() {
    const tabs = [
      { name: 'home', label: 'Home' },
      { name: 'profile', label: 'Profile' },
      { name: 'settings', label: 'Settings' }
    ]
    const currentTab = ref('home')
    const currentTabComponent = computed(() =>
      ({ home: Home, profile: Profile, settings: Settings })[currentTab.value]
    )
    return { tabs, currentTab, currentTabComponent }
  }
}

createApp(App).mount('#app')
</script>

<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>

<div id="app">
  <button @click="show = !show">{{ show ? '卸载' : '加载' }} 异步组件</button>

  <suspense v-if="show">
    <!-- 模拟"异步组件"：返回一个 Promise -->
    <async-heavy></async-heavy>
    <template #fallback>
      <div style="padding: 1rem; background: #fef3c7;">⏳ Loading...</div>
    </template>
  </suspense>
</div>

<script>
const { createApp, ref, defineAsyncComponent } = Vue

// 模拟异步组件：返回 Promise 的 setup（Suspense 会等待）
const AsyncHeavy = {
  async setup() {
    await new Promise(r => setTimeout(r, 1500))   // 模拟 1.5s 加载
    return { time: new Date().toLocaleTimeString() }
  },
  template: '<div style="padding: 1rem; background: #ecfdf5;"><h3>AsyncHeavy</h3><p>加载完成于: {{ time }}</p></div>'
}

const App = {
  components: { AsyncHeavy },
  setup() {
    const show = ref(false)
    return { show }
  }
}

createApp(App).mount('#app')
</script>