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页不会重新加载)

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>

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

示例:列表页面跳转到详情页面的情况,保证上一级页面的页面数据不会刷新,例如两个页面A页面—>>>列表页,B页面—>>>详情页,A–>>B–>>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, // 组件需要缓存
	  }
	},

以上为个人经验,希望能给大家一个参考,也希望大家多多支持阿兔在线工具。 

点赞(0)

微信公众账号

微信扫一扫加关注

发表
评论
返回
顶部