vite+ts+vue3 知识点（keep-alive缓存组件）

基本使用

注意：vue3中组件命名最好使用插件 vite-plugin-vue-setup-extend，因为新开一个script不允许使用 keep-alive 组件新增的生命周期 onActivated 和 onDeactivated 会报错

下载插件 vite-plugin-vue-setup-extend 

npm i vite-plugin-vue-setup-extend -D

 vite.config.ts 引入使用

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import VueSetupExtend from "vite-plugin-vue-setup-extend";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    VueSetupExtend(),
  ],
});

组件A

<template>
    <div>
        A:<input type="text">
    </div>
</template>

<script setup lang="ts" name="A">
import { onActivated, onDeactivated } from 'vue';
onActivated(() => {
    console.log('keep-alive初始化');
});
onDeactivated(() => {
    console.log('keep-alive卸载');
});
</script>

<style scoped lang="less">

</style>

组件B

<template>
    <div>
        <div>B:<input type="text"></div>
    </div>
</template>

<script setup lang="ts" name="B">
import { onActivated, onDeactivated } from 'vue';
onActivated(() => {
    console.log('keep-alive初始化');
});
onDeactivated(() => {
    console.log('keep-alive卸载');
});
</script>

<style scoped>

</style>

父组件

<template>
  <div>
    // include 表示缓存哪些组件
    // exclude 表示不缓存哪些组件
    <keep-alive :include="['A']" :exclude="['B']" >
      <A v-if="flag"></A>
      <B v-else></B>
    </keep-alive>

    <button @click="btn">切换</button>
  </div>
</template>

<script setup lang="ts">

import { ref } from 'vue';
import A from './components/A.vue'
import B from './components/B.vue'
const flag = ref<boolean>(true)
const btn = () => {
  flag.value = !flag.value
}
</script>

<style scoped lang="less">

</style>