vue3 vue2 keep-alive 差异

配置App.vue

vue2.x与vue3.0的App.vue配置有差异,在App.vue配置信息如下:
vue2.x中,router-view可整个放入keepalive中,如下:

<template>
	<!-- vue2.x配置 -->
   <keep-alive>
    <router-view v-if="$route.meta.keepAlive" />
  </keep-alive>
  <router-view v-if="!$route.meta.keepAlive"/>
</template>

vue3.0的App.vue配置方法如下:

<template>
  <!-- vue3.0配置 -->
  <router-view v-slot="{ Component }">
    <keep-alive>
      <component :is="Component"  v-if="$route.meta.keepAlive"/>
    </keep-alive>
    <component :is="Component"  v-if="!$route.meta.keepAlive"/>
  </router-view> 
</template>

这里component是vue中的特殊组件,:is是用来绑定指定组件,这里是与路由对应的页面绑定。

添加meta属性

在对应的路由上添加meta属性来设置页面是否要使用缓存,如下:

{
  path: "/keepAliveTest",
  name: "keepAliveTest",
  meta: {
    keepAlive: true //设置页面是否需要使用缓存
  },
  component: () => import("@/views/keepAliveTest/index.vue")
}

到此即可实现页面的简单缓存,但是有些场景需要做复杂处理,比如说页面部分信息不需要读缓存,每次进入都需要进行处理,这个时候我们就可以使用activated生命周期来解决页面部分刷新问题。

页面部分刷新

先了解vue的生命周期,被keepAlive包裹的组件和页面,页面进入时执行的生命周期为:created->mounted->activated;
其中created->mounted是页面第一次进入才会执行,activated生命周期在页面每次进入都会执行,特属于keepAlive的一个生命周期,所以我们把页面每次进来要进行的操作放入该生命周期即可。
如下代码:

activated() {
	// 页面每次进入清空输入框
   this.$refs.don.inputValue = '';
}

keepalive缓存组件时,不能跨级使用,子页面引的组件不能被缓存,需单独设置keepalive。

本文链接地址: vue3 vue2 keep-alive 差异

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注