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>原文地址：https://blog.csdn.net/qq_37550440/article/details/142386655
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！