15-keep-alive

最新推荐文章于 2024-08-23 08:47:16 发布

sunnyboysix

最新推荐文章于 2024-08-23 08:47:16 发布

阅读量78

点赞数

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

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

版权

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

34 篇文章 0 订阅

订阅专栏

本文介绍了如何在Vue中使用keep-alive指令实现组件的生命周期管理，特别关注了onActivated和onDeactivated钩子在缓存策略中的作用。通过实例演示了如何控制A、B组件的显示和数据缓存。

摘要由CSDN通过智能技术生成

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>