Vue 怎么缓存当前的组件？缓存后怎么更新？说说你对keep-alive的理解是啥

Posted 2023-04-19

参考技术A keep-alive 是 vue 中的内置组件，能在组件切换过程中将状态保留在内存中，防止重复渲染 DOM

keep-alive 包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们

keep-alive 可以设置以下 props 属性：

关于 keep-alive 的基本用法：

使用 includes 和 exclude ：

匹配首先检查组件自身的 name 选项，如果 name 选项不可用，则匹配它的局部注册名称 (父组件 components 选项的键值)，匿名组件不能被匹配

设置了 keep-alive 缓存的组件，会多出两个生命周期钩子（ activated 与 deactivated ）：

使用原则：当我们在某些场景下不需要让页面重新加载时我们可以使用 keepalive

举个栗子:

当我们从 首页 –> 列表页 –> 商详页 –> 再返回 ，这时候列表页应该是需要 keep-alive

从 首页 –> 列表页 –> 商详页 –> 返回到列表页(需要缓存) –> 返回到首页(需要缓存) –> 再次进入列表页(不需要缓存) ，这时候可以按需来控制页面的 keep-alive

在路由中设置 keepAlive 属性判断是否需要缓存

使用 <keep-alive>

keep-alive 是 vue 中内置的一个组件

源码位置：src/core/components/keep-alive.js

可以看到该组件没有 template ，而是用了 render ，在组件渲染的时候会自动执行 render 函数

this.cache 是一个对象，用来存储需要缓存的组件，它将以如下形式存储：

在组件销毁的时候执行 pruneCacheEntry 函数

在 mounted 钩子函数中观测 include 和 exclude 的变化，如下：

如果 include 或 exclude 发生了变化，即表示定义需要缓存的组件的规则或者不需要缓存的组件的规则发生了变化，那么就执行 pruneCache 函数，函数如下：

在该函数内对 this.cache 对象进行遍历，取出每一项的 name 值，用其与新的缓存规则进行匹配，如果匹配不上，则表示在新的缓存规则下该组件已经不需要被缓存，则调用 pruneCacheEntry 函数将其从 this.cache 对象剔除即可

关于 keep-alive 的最强大缓存功能是在 render 函数中实现

首先获取组件的 key 值：

拿到 key 值后去 this.cache 对象中去寻找是否有该值，如果有则表示该组件有缓存，即命中缓存，如下：

直接从缓存中拿 vnode 的组件实例，此时重新调整该组件 key 的顺序，将其从原来的地方删掉并重新放在 this.keys 中最后一个

this.cache 对象中没有该 key 值的情况，如下：

表明该组件还没有被缓存过，则以该组件的 key 为键，组件 vnode 为值，将其存入 this.cache 中，并且把 key 存入 this.keys 中

此时再判断 this.keys 中缓存组件的数量是否超过了设置的最大缓存数量值 this.max ，如果超过了，则把第一个缓存组件删掉

解决方案可以有以下两种：

每次组件渲染的时候，都会执行 beforeRouteEnter

在 keep-alive 缓存的组件被激活的时候，都会执行 actived 钩子

注意：服务器端渲染期间 avtived 不被调用

vue关于this.$refs.tabs.refreshs()刷新组件，缓存

当更改了用户信息后，需要刷新页面或者组件。

1.当前组件刷新。定义一个请求用户信息的方法，在需要时调用：

sessionStorage.setItem(‘userInfo‘,JSON.stringify(this.userInfo));

2.刷新父组件。

子组件某个需要的地方：

   this.$emit(‘refresh‘);  

父组件：

methods:{

        refresh() {

            this.userInfo = JSON.parse(sessionStorage.getItem(‘userInfo‘));

        }

    },

3.非关系组件：

父组件：

<template>

  //需要刷新的组件（非关系组件）

   <top-bar ref="tabs"/>

</template>

methods:{

        refresh() {

            this.$refs.tabs.refreshs();

        }

    },