Vue3中keep-alive的使用及注意事项说明

<template>
  <!-- 基本用法 -->
  <keep-alive>
    <component :is="currentComponent"></component>
  </keep-alive>

  <!-- 缓存特定组件 -->
  <keep-alive include="CompA,CompB" exclude="CompC">
    <router-view></router-view>
  </keep-alive>
</template>

import { onActivated, onDeactivated } from 'vue'

export default {
  setup() {
    onActivated(() => {
      console.log('组件被激活')
    })
    
    onDeactivated(() => {
      console.log('组件被停用')
    })
  }
}

<template>
  <keep-alive :include="cachedViews">
    <router-view v-slot="{ Component }">
      <transition name="fade">
        <component :is="Component" />
      </transition>
    </router-view>
  </keep-alive>
</template>

<script>
import { ref } from 'vue'
export default {
  setup() {
    const cachedViews = ref(['Home', 'User'])
    return { cachedViews }
  }
}
</script>

<keep-alive><comp :key="id"></comp></keep-alive>

<comp v-if="show"></comp>

onActivated(() => {
  window.scrollTo(0, 0)
})

<router-view v-slot="{ Component }">
  <transition name="fade">
    <keep-alive>
      <component :is="Component" />
    </keep-alive>
  </transition>
</router-view>

const routes = [
  {
    path: '/user',
    component: User,
    meta: { keepAlive: true }
  }
]