KeepAlive可以缓存组件,在不使用include时没有任何问题,可以正常缓存。
但是一旦使用了include,如果动态组件中没有导入ref
函数,缓存功能就消失了
比如
editcom.vue
<template><input >
</template>
<script setup>
import { ref } from 'vue'
</script>
<style></style>
这个组件导入了ref
,则能正常被缓存
app.vue
<div><div><label><input type="radio" v-model="currentcom" :value="editcom"/>editcom</label><label><input type="radio" v-model="currentcom" :value="radiocom"/>radiocom</label></div><KeepAlive include="editcom"><component :is="currentcom"></component></KeepAlive>
</div>
切换后输入框中字符串还在
如果去掉ref
引用,切换后输入框中的字符串就会清空
官网案例中刚好两个组件都引用了ref
,故而看不到这个现象