一.在vue-router中使用,保活一个路由组件。
1. 一般写法
vue3中,对于这个问题,写法有点不一样。
<router-view>、<keep-alive> 和 <transition>
transition 和 keep-alive 现在必须通过 v-slot API 在 RouterView 内部使用,下面是一个案例:
<router-view v-slot="{ Component,route }">
<transition>
<keep-alive>
<component :is="Component" v-if="route.meta.keepalive==true" :key="route.path" />
</keep-alive>
<component :is="Component" v-if="route.meta.keepalive==false" :key="route.path" />
</transition>
</router-view>
原因: 这是一个必要的变化。详见 related RFC.
所以说这里还有其他的信息,transition过度效果,现在也要用这种方式来写了。
- 回顾一下插槽:
其中v-slot="{ Component }"这种写法,是解构插槽 Prop,用来解构作用域插槽的参数,作用域插槽是用来向组件提供插槽属性的:绑定在 <slot>
元素上的 attribute 被称为插槽 prop。现在,在父级作用域中,我们可以使用带值的 v-slot 来定义我们提供的插槽 prop 的名字:
// 一个todo-list组件,有一个默认的插槽
<ul>
<li v-for="( item, index ) in items">
<slot :item="item" :index="index" :another-attribute="anotherAttribute"></slot>
</li>
</ul>
// 作用域插槽
<todo-list>
<template v-slot:default="slotProps">
<i class="fas fa-check"></i>
<span class="green">{
{
slotProps.item }}</span>
</template>
</todo-list>
2.推荐写法
keep-alive
Props:
include - string | RegExp | Array。只有名称匹配的组件会被缓存。
exclude - string | RegExp | Array。任何名称匹配的组件都不会被缓存。
max - number | string。最多可以缓存多少组件实例。
keepAlive本身具有的include去匹配。
比如我有一个routes:
const routes = [{
path:"/",
component:layout,
redirect:"/AccessibleMap",
children:[
{
path:"page404",
name:"page404",
meta:{
title:"page404",ismenu:false,keepalive:false},
component:()=> import("../pages/page404.vue")
},
{
path:"AccessibleMap",
name:"AccessibleMap",
meta:{
title:"第一个例子",ismenu:true,keepalive:true},
component:()=> import("../pages/AccessibleMap.vue")
},
{
path:"tianditu",
name:"tianditu",
meta:{
title:"加载天地图",ismenu:true,keepalive:true},
component:()=> import("../pages/tianditu.vue")
},
{
path:"baohuo",
name:"baohuo",
meta:{
title:"保活组件",ismenu:true,keepalive:true},
component:()=> import("../pages/baohuo.vue")
}
]
}];
在组件里面去引用,只需要过滤出一个需要保活的name数据就可以,比如说“baohuo”这个组件,组件要定义name属性(并不是指上面路由表routes里面那个name,而是baohuo.vue的name)
匹配首先检查组件自身的 name 选项,如果 name 选项不可用,则匹配它的局部注册名称 (父组件 components
选项的键值)。匿名组件不能被匹配。
<template>
<div class="catalog">
<router-link class="mylink" active-class="my-active" v-for="item in link" :to="`/${item.path}`">
<span v-if="item.meta.ismenu == true">{
{
item.meta.title }}</span>
</router-link>
</div>
<router-view v-slot="{ Component, route }">
<keep-alive :include="keepaliveRoutes">
<component :is="Component" :key="route.path" />
</keep-alive>
</router-view>
</template>
<script lang="ts">
import {
defineComponent } from "vue";
import {
routes } from "../router"
interface idata {
link: {
path: string; meta: {
title: string, ismenu: boolean, keepalive: boolean } }[];
keepaliveRoutes: Array<string>,
}
export default defineComponent({
data(): idata {
return {
link: [],
keepaliveRoutes:[],
}
},
components: {
},
created() {
this.link = routes[0].children.map(e => {
return {
path: e.path, meta: e.meta }
})
routes[0].children.forEach(e=>{
if(e.meta.keepalive == true){
this.keepaliveRoutes.push(e.path)
}
})
},
});
</script>
二.普通组件的保活
跟上面说的类似。
三、源码分析
日常开发中,如果需要在组件切换时,保存组件的状态,防止它多次销毁,多次渲染,我们通常采用 <keep-alive>
组件处理,因为它能够缓存不活动的组件,而不是销毁它们。同时, <keep-alive>
组件不会渲染自己的 DOM 元素,也不会出现在组件父链中,属于一个抽象组件。当组件在 <keep-alive>
内被切换时,它的 activated
和 deactivated
这两个钩子函数将会被对应执行。
基础用法
以下是 <keep-alive>
组件的示例用法,
属性 Props
include 字符串或表达式。只有名称匹配的组件会被缓存。
exclude 字符串或正则表达式。任务名称匹配的组件都不会被缓存。
max 数字。最多可以缓存多少组件实例。
注意的是, <keep-alive>
组件是用在直属的子组件被开关的情况,若存在多条件性的子元素,则要求同时只能有一个元素被渲染。
组件源码实现
上面我们了解了 <keep-alive>
组件的定义、属性以及用法,下面就看下源码是如何对应实现的。
抽象组件
我们去掉多余的代码,看看 KeepAlive 组件是如何定义的。
从源码可以看出 KeepAlive 组件是通过 Composition API 实现的,setup 返回的是组件的渲染函数。在渲染函数内,取组件的子节点,当存在多个子节点,则直接返回所有节点,也就 KeepAlive 组件不生效了。当仅存在一个子节点,则渲染第一个子节点的内容,也就验证了 KeepAlive 是抽象组件,不渲染本身的 DOM 元素。
缓存机制
了解 KeepAlive 组件缓存机制前,我们先了解下 LRU 算法概念,它正是通过该算法来处理缓存机制。
LRU 算法
我们常用缓存来提升数据查询的数据,由于缓存容量有限,当缓存容量到达上限,就需要删除部分数据挪出空间,让新数据添加进来。因此需要制定一些策略对加入缓存的数据进行管理。常见的策略有:
LUR 最近最久未使用
FIFO 先进先出
NRU Clock 置换算法
LFU 最少使用置换算法
PBA 页面缓冲算法
KeepAlive 缓存机制使用的是 LRU 算法(Least Recently Used),当数据在最近一段时间被访问,那么它在以后也会被经常访问。这就意味着,如果经常访问的数据,我们需要能够快速命中,而不常访问的数据,我们在容量超出限制,要将其淘汰。
我们这里只讲概念,如果想深入理解 LRU 算法,可自行查找。
缓存实现
简化下代码,抽离出核心代码,看看缓存机制
从源码中可以看出 KeepAlive 声明了了个 cache 变量来缓存节点数据,它是 Map 结构。并采用 LRU 缓存算法来处理子节点存储机制,具体说明如下:
声明有序集合 keys 作为缓存容器,容器内缓存组件的唯一标识 key
keys 缓存容器中的数据,越靠前的 key 值越少被访问越旧,往后的值越新鲜
渲染函数执行时,若命中缓存时,则从 keys 中删除当前命中的 key,并往 keys 末尾追加 key 值,保存新鲜
未命中缓存时,则 keys 追加缓存数据 key 值,若此时缓存数据长度大于 max 最大值,则删除最旧的数据,这里的值是 keys 中第一个值,很符合 LRU 思想。
当触发 beforeMount/update 生命周期,缓存当前激活的子树的数据
挂载区别
通常组件挂载、卸载都会触发各自生命周期,那 KeepAlive 子树有无缓存在挂载阶段是否存在区别呢?以下抽离下 patch 阶段中 ShapeFlags.COMPONENT
类型相关核心代码看看。
KeepAlive 组件在渲染函数执行时,若存在缓存,会给 vNode 赋予 vnode.shapeFlag |= ShapeFlags.COMPONENT_KEPT_ALIVE
状态,因此再次渲染该子树时,会执行parentComponent!.ctx.activate
函数激活子树的状态。那这里的 activate
函数是什么呢?看下代码
再次激活子树时,因为上次渲染已经缓存了 vNode
,能够从 vNode 直接获取缓存的 DOM 了,也就无需再次转次 vNode。因此可以直接执行 move
挂载子树,然后再执行 patch 更新组件,最后再通过queuePostRenderEffec
t
,在组件渲染完成后,执行子节点组件定义的 activate
钩子函数。
再看下激活/失效的实现思路,通过将渲染器传入 KeepAlive 实例的 ctx 属性内部,实现 KeepAlive 与渲染器实例的通信,并且通过 KeepAlive 暴露 activate/deactivate 两个实现。这样做的目的是,避免在渲染器直接导入 KeepAlive 产生 tree-shaking
。
属性实现
KeepAlive 支持 3 个属性 include,exclude,max。其中 max 在上面已经讲过了,这里看下另外 2 个属性的实现。
这里很好理解,当子组件名称不匹配 include 的配置值,或者子组件名称匹配了 exclude 的值,都不该被缓存,而是直接返回。而 watch 函数是监听 include、exclude 值变化时做出对应反应,即去删除对应的缓存数据。
卸载过程
卸载分为子组件切换时产生的子组件卸载流程,以及 KeepAlive 组件卸载导致的卸载流程。
子组件卸载流程组件卸载过程,会执行 unmount 方法,然后执行 parentComponent.ctx.deactivate(vnode)函数,在函数里通过 move 函数移除节点,然后通过 queuePostRenderEffect 的方式执行定义的 deactivated 钩子函数。此过程跟挂载过程类似,不过多描述。
KeepAlive 组件卸载当 KeepAlive 组件卸载时,会触发 onBeforeUnmount 函数,现在看看该函数的实现:
当缓存的 vnode 为当前 KeepAlive 组件渲染的 vnode 时,重置 vnode 的 ShapeFlag,让它不被当做是 KeepAlive 的 vNode,然后通过 queuePostRenderEffect 执行子组件的 deactivated 函数,这样就完成了卸载逻辑。否则,则执行 unmount 方法执行 vnode 的整套卸载路程。