13 vue3之内置组件keep-alive

内置组件keep-alive

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

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

初次进入时: onMounted> onActivated

退出后触发 onDeactivated

再次进入:

只会触发 onActivated

事件挂载的方法等,只执行一次的放在 onMounted中;组件每次进去执行的方法放在 onActivated

prors属性 includeexclude和max

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

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

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

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

代码示例

父组件

javascript 复制代码
<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 组件

javascript 复制代码
<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>
javascript 复制代码
<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

相关推荐
伍哥的传说1 天前
Webpack5 新特性与详细配置指南
webpack·前端框架·vue·vue3·react·webpack5·前端构建
JosieBook2 天前
【前端】Vue3 前端项目实现动态显示当前系统时间
前端·vue3·系统时间
摆烂式编程2 天前
APP端定位实现(uniapp Vue3)(腾讯地图)
uni-app·app·vue3·定位·腾讯
一只小阿乐3 天前
前端vue3 H5实现 静态页面使用本地json 并且需要上下滑动 可以切换tabs 栏
前端·json·vue3·h5开发
知识分享小能手3 天前
Vue3 学习教程,从入门到精通,Vue 3 表单控件绑定详解与案例(7)
前端·javascript·vue.js·学习·前端框架·vue3·anti-design-vue
梁辰兴4 天前
企业培训笔记:宠物信息管理--实现宠物信息分页查询
笔记·elementui·mybatis·vue3·springboot·宠物
爱看书的小沐6 天前
【小沐杂货铺】基于Three.JS绘制汽车展示Car(WebGL、vue、react、autoshow、提供全部源代码)
汽车·vue3·react·webgl·three.js·opengl·autoshow
梁辰兴7 天前
企业培训笔记:Vue3前端框架配置
笔记·前端框架·npm·vue·vue3·node
知识分享小能手9 天前
Vue3 学习教程,从入门到精通,使用 VSCode 开发 Vue3 的详细指南(3)
前端·javascript·vue.js·学习·前端框架·vue·vue3