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支持字符串,数组,正则,比如&