13 vue3之内置组件keep-alive

内置组件keep-alive

有时候我们不希望组件被重新渲染影响使用体验；或者处于性能考虑，避免多次重复渲染降低性能。而是希望组件可以缓存下来,维持当前的状态。这时候就需要用到keep-alive组件。

开启keep-alive 生命周期的变化

初次进入时： onMounted> onActivated
退出后触发 onDeactivated
再次进入：
只会触发 onActivated
事件挂载的方法等，只执行一次的放在 onMounted中；组件每次进去执行的方法放在 onActivated

prors属性 `include` 和 `exclude和max`

<keep-alive :include="" :exclude="" :max="10"></keep-alive>

:include="['A']" 只缓存A组件

:exclude="['A']" 不缓存A组件

max是保存活性最高的10个组件采用的是LRU算法（双向链表 + 散列表的方式实现

代码示例

父组件

<template><div class="">keep-alive用于数据缓存</div><keep-alive><A v-if="flag"></A><B v-else></B></keep-alive><!--  prors属性：<keep-alive :include="" :exclude="" :max="10"></keep-alive>:include="['A']" 只缓存A组件:exclude="['A']" 不缓存A组件max是保存活性最高的10个组件 采用的是LRU算法（双向链表 + 散列表 的方式实现）--><button @click="flag = !flag">切换组件</button><!-- 必须是这样的写法 --><!-- 基本 --><keep-alive><component :is="view"></component></keep-alive><!-- 多个条件判断的子组件 --><keep-alive><comp-a v-if="a > 1"></comp-a><comp-b v-else></comp-b></keep-alive><!-- 和 `<transition>` 一起使用 --><transition><keep-alive><component :is="view"></component></keep-alive></transition><!-- 开启keep-alive 生命周期的变化初次进入时： onMounted> onActivated
退出后触发 deactivated
再次进入：
只会触发 onActivated
事件挂载的方法等，只执行一次的放在 onMounted中；组件每次进去执行的方法放在 onActivated中-->
</template><script setup lang="ts">
import A from "./components/thirteen_A.vue";
import B from "./components/thirteen_B.vue";
import { ref, reactive } from "vue";let flag = ref("true");
</script><style lang="less" scoped></style>

A B 组件

<template><div class="">A组件<input type="text" /></div>
</template><script setup lang="ts">
import {ref,reactive,onMounted,onUnmounted,onActivated,onDeactivated,
} from "vue";onMounted(() => {console.log("onMounted初始化"); // 全局只走一次,一个接口只走一次
});
onActivated(() => {console.log("onActivated，keep-alive初始化"); //开启了keep-alive后，才增加的生命周期
});
onDeactivated(() => {console.log("onDeactivated, keep-alive卸载"); //开启了keep-alive后，才增加的生命周期
});
onUnmounted(() => {console.log("onUnmounted卸载"); // 开启了keep-alive后 这个生命周期就不会走
});
</script><style lang="less" scoped></style>

<template><div class="">B组件<input type="text" /></div>
</template><script setup lang="ts">
import { ref, reactive } from "vue";
</script><style lang="less" scoped></style>

14 vue3之内置组件trastion系列-CSDN博客14 vue3之内置组件trastion系列。https://blog.csdn.net/qq_37550440/article/details/142387006?sharetype=blogdetail&sharerId=142387006&sharerefer=PC&sharesource=qq_37550440&spm=1011.2480.3001.8118