vue3 - 15.keepAlive缓存组件

vue3 - keep-alive 组件缓存

首先keep-alive是vue3内置的组件，作用是对组件的数据进行缓存，这样可以优化性能，减少数据重新渲染或数据重新请求，提升用户体验

我们新建两个组件，在每一个组件里面写一个input，在默认情况下当组件切换的时候，数据会被清空，但是我们用keep-alive包起来之后，数据将会被缓存，切换的时候不会被清空

<template>
  <div>
    <button @click="flag = !flag">Change</button>
    <keep-alive>
      <A v-if="flag" />
      <B v-else />
    </keep-alive>
  </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)
</script>
<style scoped>
</style>

keep-alive 属性 - include : 声明想要被缓存的组件，比如我们有两个组件，我们只想缓存A组件，不想缓存B组件，那么我们可以用include声明，include支持字符串，数组，正则，比如&