keep-alive

1、虽然vue3不需要root div，但是 keep-alive，transition 这两个标签都需要，所以如果是多级路由，每一个router-view内部都是需要keep-alive包裹，keep-alive内部不能有任何判断条件，component组件外层不能包裹任何div，并且页面组件需要div包裹

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

<template>
    <div>
        // ...doshing
    </div>
</template>

2、setup组件无法设置name属性

1. 使用多个script标签

<script>
    export default{
        name:'Name'
    }
</script>
<script setup>
    // ...do sthing
</script>

2. 使用unplugin-vue-define-options插件

安装

import { defineConfig } from 'vite'
import VueSetupExtend from 'vite-plugin-vue-setup-extend'
export default defineConfig({
    plugins:[vue(), VueSetupExtend()]
})

使用

<script setup name='Name'>
    // ...do sthing
</script>

参考

3、keep-alive组件的两个生命周期

• onActived
• onDeactivated