keep-alive 和 router-view 的使用方法（Vue3）

系列文章目录

提示：主要是介绍keep-alive 和 router-view在Vue3中的使用方法，以及适用场景！！！

---

---

前言：

总结背景：

在很久很久之前的一次需求讨论中，后端同学（我们没有产品😂😂）想要优化现在的一些交互流程。其中提到了：对某一个页面进行数据缓存，保留用户搜索的一些数据，防止用户再返回页面时进行重复的刷新。需求是解决了，但是想了一下还是总结一下会好一些（好记性不如烂笔头😂）。

---

一、router-view：

作为一名使用Vue框架的开发人员，如果你要说对router-view的使用不熟悉就有点讲不过去了（回家种田吧！！）

router-view可以说是再熟悉不过了（这里就不多做解释了）

1. 常规使用方法

<template>
  <div>
    <h1>App Header</h1>
    <router-view></router-view>
    <h2>App Footer</h2>
  </div>
</template>

2. 非常规使用方法（插槽）

  //插槽使用方法如下
  <router-view v-slot="{ Component }">
          <component  :is="Component"/>
  </router-view>

3. 非常规使用方法（结合keep-alive）

  //与keep-alive结合使用
  <router-view v-slot="{ Component }">
          <keep-alive>
            <component :is="Component" />
         </keep-alive>    
  </router-view>

4. 命名路由👇🏻🔗（name字段）

router-view (Vue官网)

二、keep-alive：

1. keep-alive解释如下：

1. 在Vue3中，keep-alive指令的作用：用于在组件之间缓存和重用组件实例，以提高性能和用户体验。它可以应用于动态组件和具有相同标签名称的静态组件。
2. 一句话总结：keep-alive 是一个内置组件，它的功能是在多个组件间动态切换时缓存被移除的组件实例。

2. keep-alive用法如下（贼简单）：

在这个示例中，keep-alive 包裹了一个动态组件，这意味着组件实例会被缓存起来，以便在下一次需要使用它时，可以直接从缓存中获取，而不需要重新创建实例。

<template>
  <div>
    使用keep-alive去包裹对应的动态组件
   （对component不了解的同学可以去补一下）
    <keep-alive>
      <component :is="currentComponent"></component>
    </keep-alive>
  </div>
</template>

3. keep-alive对应的一些属性如下：

一、keep-aliv中的 include 和 exclude

①. include和exclude的含义

一、include：表示对【组件名1】、【组件名2】进行缓存（只对这两个组件进行缓存）
二、exclude：表示对【组件名1】、【组件名2】不进行缓存（除这两个组件以外其他的组件缓存）

②. 使用代码如下(exclude用法一致，含义不同)：

1. com1,com2 : 表示的是对应的组件名称
2. component中的is ：动态组件的名称

<!-- 第一种使用方法：以英文逗号分隔的字符串 -->
<KeepAlive include="com1,com2">
  <component :is="viewCom" />
</KeepAlive>

<!-- 第二种使用方法：正则表达式 (需使用 `v-bind`) -->
<KeepAlive :include="/com1|com2/">
  <component :is="viewCom" />
</KeepAlive>

<!-- 第三种使用方法： 数组 (需使用 `v-bind`) -->
<KeepAlive :include="['com1', 'com2']">
  <component :is="viewCom" />
</KeepAlive>

二、keep-alive中的 生命周期函数

①. onActivated（激活） 和 onDeactivated（失活）

一、onActivated ：被keep-alive包裹的组件再次调用时触发（组件第一次创建的时候不调用）
二、onDeactivated：被keep-alive包裹的组件离开时触发（组件第一次离开不触发）

②. 使用代码如下

<script setup>
import { onActivated, onDeactivated } from 'vue'
//onActivated 和  onDeactivated 与组件内的其他生命周期使用方法一致
onActivated(() => {})

onDeactivated(() => {})
</script>

4. keep-aliv中的其他Api（点击👇🏻）

keep-alive（Vue官方）

总结🌹

终于是完事了！！！！有不正确的地方，欢迎大家指正💪💪💪