Vue3-KeepAlive,多个页面使用keepalive方式

作者:我准备起飞 时间:2024-05-02 16:33:39 

Vue3-KeepAlive,多个页面使用keepalive

Vue3的生命周期

未添加keepAlive的生命周期

beforeCreate=>created=>beforeMount=>mounted=>beforeUpdate=>updated=>beforeUnmount=>unmounted

添加keepAlive的生命周期

  • activated :当keepalive包含的组件渲染的时候触发

  • deactived :当keepalive包含的组件销毁的时候触发

  • keep-alive的生命周期

  • activated: 页面第一次进入的时候,钩子触发的顺序是created->mounted->activated

  • deactivated: 页面退出的时候会触发deactivated

当再次前进或者后退的时候只触发activated

在VueApp中配合vue-router使用keepalive

上一节了解到keepalive的生命周期后,大致就可以理解keepalive的意义,用于缓存页面信息,不重复渲染同样的内容。

可配合vue-router路由使用keepalive,在路由组件配置文件当中配置组件是否需要被缓存

配置meta属性,以Home组件为例,配置meta.keepAlive为true

{//主页
path: '/',
 name: 'Home',
 component: () => import(/* webpackChunkName: "about" */ '../views/Home.vue'),
 meta: {
   title: 'Home',
   keepAlive: true
 },
 beforeRouteLeave: (to, from, next) => {
   console.log(to.meta);
 }
}

在根组件App.vue中使用keep-alive标签包含需要缓存的组件,这里根据$router.meta.keepAlive属性判断是否缓存

<!-- 这是vue3的写法,与vue2的写法有所区别,如果这里使用vue2.x写法,会有警告 -->
<router-view v-slot="{ Component }">
 <keep-alive>
   <component :is="Component" :key="$route.name" v-if="$route.meta.keepAlive" />
 </keep-alive>
 <component :is="Component" :key="$route.name" v-if="!$route.meta.keepAlive" />
</router-view>

请注意上述代码当中有:key属性,通常多个页面会使用到keepAlive属性,如果是多个页面,那么必须加上:key属性,否则会报错。

效果图(首页及mv页不会重新加载)

Vue3-KeepAlive,多个页面使用keepalive方式

Vue2和Vue3的keep-alive用法

vue3的keep-alive用法和vue2用法是不同的。

vue2 keep-alive

keep-alive概念:

keep-alive是Vue的内置组件,当它包裹动态组件时,会缓存不活动的组件实例,而不是销毁。

keep-alive作用:

用来缓存组件,避免多次加载相同的组件,减少性能消耗,提高用户体验。

keep-alive使用方式:

方式一:在App.vue中使用keep-alive标签,表示缓存所有页面

<div id="app">
 <keep-alive>
   <tar-bar></tar-bar>
   <div class="container">
     <left-menu></left-menu>
     <Main />
   </div>
   </keep-alive>
 </div>

方式二:按条件缓存,使用include,exclude判断是否缓存

// 1. 将缓存 name 为 cc 的组件,如果有多个,可用逗号分
 <keep-alive include='cc,cc1,cc2'>
     <router-view/>
   </keep-alive>

// 2. 将不缓存 name 为 cc 的组件
<keep-alive exclude='cc'>
   <router-view/>
</keep-alive>

// 3. 还可使用属性绑定动态判断
<keep-alive :include='includedComs'>
   <router-view/>
</keep-alive>

方式三:在router目录下的index.js中,

第一步:使用meta:{keepAlive = true },表示需要缓存

const routes = [
 {
   path:'/',
   component:Home,
   meta:{
       keepalive:true
   }
 },
 {
   path:'/login',
   component:Login
 },
  {
     path:'/edit',
     component:Edit,
     meta:{
         istoken: true
     }
  },
 {
     path:'/home',
     component:Home,
     meta:{
         keepalive:true
     }
 }
]

第二步:在App.vue中进行判断

<div id="app">
   <!--keep-alive 表示页面不会被销毁,即保持页面状态-->
   <keep-alive>
     <router-view v-if="$route.meta.keepalive"></router-view>
   </keep-alive>
   <router-view v-if="!$route.meta.keepalive"></router-view>
</div>

vue3中 keep-alive

1基本用法(通过插槽)

<router-view v-slot="{ Component }">
 <keep-alive>
   <component :is="Component"/>
 </keep-alive>
</router-view>

Vue3-KeepAlive,多个页面使用keepalive方式

2条件缓存(通过插槽的方式)

示例:列表页面跳转到详情页面的情况,保证上一级页面的页面数据不会刷新,例如两个页面A页面&mdash;>>>列表页,B页面&mdash;>>>详情页,A&ndash;>>B&ndash;>>A ,缓存A页面的数据

<template>
<router-view v-slot="{ Component }">
 <keep-alive :include="includeList">
   <component :is="Component"/>
 </keep-alive>
</router-view>
</template>
<script>
import { reactive, watch, toRefs } from '@vue/runtime-core'
import { useRoute, useRouter }
 export default {
   name: 'Test',
   setup(){
     const state = reactive({
       includeList: []
     })
     const route = useRoute()
     // const router = useRouter()
     watch(() => route,(newVal,oldVal)=>{
       if(newVal.meta.keepAlive && state.includeList.indexOf(newVal.name) === -1){
         state.includeList.push(newVal.name);
         console.log(state.includeList);
       }
     },{deep:true}) // 开启深度监听
     return{
       ...toRefs(state)
     }
   }
 }
</script>

路由页面的配置

{
 path: 'test',
 name: 'Test',
 component: () => import('@/views/Test'),
 meta: {
   keepAlive: true, // 组件需要缓存
 }
},

以上为个人经验,希望能给大家一个参考,也希望大家多多支持asp之家。 

来源:https://blog.csdn.net/zjq_supperman/article/details/115173030

标签:Vue3,KeepAlive,keepalive
0
投稿

猜你喜欢

  • Django REST Framework之频率限制的使用

    2021-01-25 17:59:42
  • Python flask 框架使用flask-login 模块的详细过程

    2021-05-02 04:38:08
  • 用python批量移动文件

    2022-12-21 10:48:43
  • 怎么样才能让层显示在FLASH之上呢

    2008-03-05 13:32:00
  • 关于安卓手机微信浏览器中使用XMLHttpRequest 2上传图片显示字节数为0的解决办法

    2024-04-29 13:14:31
  • 阿里巴巴中秋节logo设计的艰辛曲折过程

    2008-09-11 17:15:00
  • 如何使用Python基于接口编程的方法实现

    2023-12-24 20:15:41
  • python使用7z解压软件备份文件脚本分享

    2023-05-22 19:30:29
  • Python 循环语句之 while,for语句详解

    2024-01-01 02:20:50
  • Centos 7下使用RPM包安装MySQL 5.7.9教程

    2024-01-19 20:44:49
  • Django之第三方平台QQ授权登录的实现

    2023-04-27 16:37:06
  • 浅谈javascript中的DOM方法

    2024-04-29 13:44:12
  • Sql Server 2000内存调整

    2010-04-25 11:24:00
  • MySQL case when使用方法实例解析

    2024-01-29 03:15:55
  • 中国,美国,英国3国时间同步动态显示js代码

    2007-09-27 20:34:00
  • NumPy实现ndarray多维数组操作

    2023-07-14 13:56:50
  • 浅析Python中的赋值和深浅拷贝

    2021-09-10 14:30:14
  • asp.net DropDownList实现二级联动效果

    2023-07-23 07:48:41
  • Python虚拟机字节码教程之装饰器实现详解

    2021-10-31 08:59:47
  • YOLOV5代码详解之损失函数的计算

    2022-06-09 02:01:58
  • asp之家 网络编程 m.aspxhome.com