keep-alive

• onActivated/onDeactivated函数：
• • onActivated：组件重新从缓存激活时调用，注意：组件挂载时也会调用
  • onDeactivated：组件进入缓存时被调用，注意：组件销毁时也会调用
• include/exclude：控制缓存实例
• 最大缓存实例数：max，如果超出，最久没有被访问的缓存实例被销毁

<template>
  <div id="app">
    <nav>
      <button @click="currentTab = 'Home'">首页</button>
      <button @click="currentTab = 'About'">关于</button>
    </nav>

    <!-- 使用 keep-alive -->
    <keep-alive>
      <component :is="currentTab" />
    </keep-alive>
  </div>
</template>

<script>
import { ref, defineComponent, onActivated, onDeactivated } from 'vue'

// Home 组件
const Home = defineComponent({
  name: 'Home',
  setup() {
    const count = ref(0)
    const message = ref('')

    console.log('🏠 Home setup')

    // Vue 3 特有的生命周期钩子
    onActivated(() => {
      console.log('✅ Home onActivated - 从缓存激活')
    })

    onDeactivated(() => {
      console.log('⏸️ Home onDeactivated - 进入缓存')
    })

    return { count, message }
  },
  template: `
    <div style="border: 2px solid #4CAF50; padding: 20px;">
      <h2>首页 (Vue 3)</h2>
      <p>计数: {{ count }}</p>
      <button @click="count++">增加</button>
      <input v-model="message" placeholder="输入内容..." />
    </div>
  `
})

// About 组件
const About = defineComponent({
  name: 'About',
  setup() {
    console.log('📄 About setup')

    onActivated(() => {
      console.log('✅ About onActivated')
    })

    onDeactivated(() => {
      console.log('⏸️ About onDeactivated')
    })

    return {}
  },
  template: `
    <div style="border: 2px solid #2196F3; padding: 20px;">
      <h2>关于页面 (Vue 3)</h2>
      <p>这个组件也会被缓存</p>
    </div>
  `
})

export default defineComponent({
  name: 'App',
  components: { Home, About },
  setup() {
    const currentTab = ref('Home')

    return { currentTab }
  }
})
</script>