15-keep-alive

最新推荐文章于 2024-01-24 23:57:25 发布

sunnyboysix

最新推荐文章于 2024-01-24 23:57:25 发布

阅读量60

点赞数

分类专栏： vue3官网学习文章标签： vue3

本文链接：https://blog.csdn.net/sunnyboysix/article/details/126662372

版权

vue3官网学习专栏收录该内容

34 篇文章 0 订阅

订阅专栏

keep-alive开启会新增两个生命周期onActivated onDeactivated

<template>

  <el-button type="primary" @click="flag = !flag">切换组件</el-button>
  <!-- keep-alive可以缓存组件内的数据  include可以选择缓存部分组件  exclude不缓存部分组件  :max="10"最大缓存组件数量-->
  <keep-alive :include="['B']">
    <A v-if="flag"></A>
    <B v-else></B>
  </keep-alive>

</template>

<script setup lang="ts">
import { ref } from 'vue'
import A from './Com/A.vue'
import B from './Com/B.vue'
const flag = ref<boolean>(true)

</script>

<style lang="less" scoped>

</style>