vue中的keep-alive详解与应用场景

​🌈个人主页：前端青山
🔥系列专栏：Vue篇
🔖人终将被年少不可得之物困其一生

依旧青山,本期给大家带来vue篇专栏内容:vue-keep-alive

目录

一、Keep-alive 是什么

二、使用场景

三、原理分析

四、案例实现

activated、deactivated钩子

五、缓存后如何获取数据

beforeRouteEnter

actived

一、Keep-alive 是什么

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

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

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

  • include - 字符串或正则表达式。只有名称匹配的组件会被缓存

  • exclude - 字符串或正则表达式。任何名称匹配的组件都不会被缓存

  • max - 数字。最多可以缓存多少组件实例

关于keep-alive的基本用法：

<keep-alive><component :is="view"></component>
</keep-alive>

使用includes和exclude：

<keep-alive include="a,b"><component :is="view"></component>
</keep-alive>
​
<!-- 正则表达式 (使用 `v-bind`) -->
<keep-alive :include="/a|b/"><component :is="view"></component>
</keep-alive>
​
<!-- 数组 (使用 `v-bind`) -->
<keep-alive :include="['a', 'b']"><component :is="view"></component>
</keep-alive>

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

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

  • 首次进入组件时：beforeRouteEnter > beforeCreate > created> mounted > activated > ... ... > beforeRouteLeave > deactivated

  • 再次进入组件时：beforeRouteEnter >activated > ... ... > beforeRouteLeave > deactivated

二、使用场景

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

举个栗子:

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

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

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

{path: 'list',name: 'itemList', // 列表页component (resolve) {require(['@/pages/item/list'], resolve)},meta: {keepAlive: true,title: '列表页'}
}

使用<keep-alive>

<div id="app" class='wrapper'><keep-alive><!-- 需要缓存的视图组件 --> <router-view v-if="$route.meta.keepAlive"></router-view></keep-alive><!-- 不需要缓存的视图组件 --><router-view v-if="!$route.meta.keepAlive"></router-view>
</div>

三、原理分析

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

export default {name: 'keep-alive',abstract: true,
​props: {include: [String, RegExp, Array],exclude: [String, RegExp, Array],max: [String, Number]},
​created () {this.cache = Object.create(null)this.keys = []},
​destroyed () {for (const key in this.cache) {pruneCacheEntry(this.cache, key, this.keys)}},
​mounted () {this.$watch('include', val => {pruneCache(this, name => matches(val, name))})this.$watch('exclude', val => {pruneCache(this, name => !matches(val, name))})},
​render() {/* 获取默认插槽中的第一个组件节点 */const slot = this.$slots.defaultconst vnode = getFirstComponentChild(slot)/* 获取该组件节点的componentOptions */const componentOptions = vnode && vnode.componentOptions
​if (componentOptions) {/* 获取该组件节点的名称，优先获取组件的name字段，如果name不存在则获取组件的tag */const name = getComponentName(componentOptions)
​const { include, exclude } = this/* 如果name不在inlcude中或者存在于exlude中则表示不缓存，直接返回vnode */if ((include && (!name || !matches(include, name))) ||// excluded(exclude && name && matches(exclude, name))) {return vnode}
​const { cache, keys } = this/* 获取组件的key值 */const key = vnode.key == null// same constructor may get registered as different local components// so cid alone is not enough (#3269)? componentOptions.Ctor.cid + (componentOptions.tag ? `::${componentOptions.tag}` : ''): vnode.key/*  拿到key值后去this.cache对象中去寻找是否有该值，如果有则表示该组件有缓存，即命中缓存 */if (cache[key]) {vnode.componentInstance = cache[key].componentInstance// make current key freshestremove(keys, key)keys.push(key)}/* 如果没有命中缓存，则将其设置进缓存 */else {cache[key] = vnodekeys.push(key)// prune oldest entry/* 如果配置了max并且缓存的长度超过了this.max，则从缓存中删除第一个 */if (this.max && keys.length > parseInt(this.max)) {pruneCacheEntry(cache, keys[0], keys, this._vnode)}}
​vnode.data.keepAlive = true}return vnode || (slot && slot[0])}
}

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

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

this.cache = {'key1':'组件1','key2':'组件2',// ...
}

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

function pruneCacheEntry (cache: VNodeCache,key: string,keys: Array<string>,current?: VNode
) {const cached = cache[key]/* 判断当前没有处于被渲染状态的组件，将其销毁*/if (cached && (!current || cached.tag !== current.tag)) {cached.componentInstance.$destroy()}cache[key] = nullremove(keys, key)
}

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

mounted () {this.$watch('include', val => {pruneCache(this, name => matches(val, name))})this.$watch('exclude', val => {pruneCache(this, name => !matches(val, name))})
}

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

function pruneCache (keepAliveInstance, filter) {const { cache, keys, _vnode } = keepAliveInstancefor (const key in cache) {const cachedNode = cache[key]if (cachedNode) {const name = getComponentName(cachedNode.componentOptions)if (name && !filter(name)) {pruneCacheEntry(cache, key, keys, _vnode)}}}
}

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

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

首先获取组件的key值：

const key = vnode.key == null? 
componentOptions.Ctor.cid + (componentOptions.tag ? `::${componentOptions.tag}` : '')
: vnode.key

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

/* 如果命中缓存，则直接从缓存中拿 vnode 的组件实例 */

if (cache[key]) {vnode.componentInstance = cache[key].componentInstance/* 调整该组件key的顺序，将其从原来的地方删掉并重新放在最后一个 */remove(keys, key)keys.push(key)
}

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

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

/* 如果没有命中缓存，则将其设置进缓存 */
else {cache[key] = vnodekeys.push(key)/* 如果配置了max并且缓存的长度超过了this.max，则从缓存中删除第一个 */if (this.max && keys.length > parseInt(this.max)) {pruneCacheEntry(cache, keys[0], keys, this._vnode)}
}

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

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

四、案例实现

缓存包裹在其中的动态切换组件

<KeepAlive> 包裹动态组件时，会缓存不活跃的组件实例，而不是销毁它们。

任何时候都只能有一个活跃组件实例作为 <KeepAlive> 的直接子节点。

完整案例：08_dynamic/52_keep-alive.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>动态组件</title>
</head>
<body><div id="app"><ul><li @click="currentTab='Home'">首页</li><li @click="currentTab='Kind'">分类</li><li @click="currentTab='Cart'">购物车</li><li @click="currentTab='User'">我的</li></ul><!-- 动态组件默认切换时 执行的是组件的 销毁 和 重新创建 --><!-- 可以使用 KeepAlive 保留组件的状态，避免组件的重新渲染 --><keep-alive><component :is="currentTab"></component></keep-alive></div>
</body>
<script src="../lib/vue.global.js"></script>
<script>const Home = {template: `<div>首页  <input placeholder="首页"/></div>`,created () { console.log('Home created') },mounted () { console.log('Home mounted') },unmounted () { console.log('Home unmounted') }}const Kind = {template: `<div>分类  <input placeholder="分类"/></div>`,created () { console.log('Kind created') },mounted () { console.log('Kind mounted') },unmounted () { console.log('Kind unmounted') }}const Cart = {template: `<div>购物车  <input placeholder="购物车"/></div>`,created () { console.log('Cart created') },mounted () { console.log('Cart mounted') },unmounted () { console.log('Cart unmounted') }}const User = {template: `<div>我的  <input placeholder="我的"/></div>`,created () { console.log('User created') },mounted () { console.log('User mounted') },unmounted () { console.log('User unmounted') }}
​Vue.createApp({data () {return {currentTab: 'Home'}},components: {Home,Kind,Cart,User}}).mount('#app')
</script>
</html>

当一个组件在 <KeepAlive> 中被切换时，它的 activated 和 deactivated 生命周期钩子将被调用，用来替代 mounted 和 unmounted。这适用于 <KeepAlive> 的直接子节点及其所有子孙节点。

activated、deactivated钩子

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>动态组件</title>
</head>
<body><div id="app"><ul><li @click="currentTab='Home'">首页</li><li @click="currentTab='Kind'">分类</li><li @click="currentTab='Cart'">购物车</li><li @click="currentTab='User'">我的</li></ul><!-- 动态组件默认切换时 执行的是组件的 销毁 和 重新创建 --><!-- 可以使用 KeepAlive 保留组件的状态，避免组件的重新渲染 --><keep-alive><component :is="currentTab"></component></keep-alive></div>
</body>
<script src="../lib/vue.global.js"></script>
<script>const Home = {template: `<div>首页  <input placeholder="首页"/></div>`,created () { console.log('Home created') },mounted () { console.log('Home mounted') },unmounted () { console.log('Home unmounted') },activated () { console.log('Home 显示')},deactivated () { console.log('Home 隐藏')}}const Kind = {template: `<div>分类  <input placeholder="分类"/></div>`,created () { console.log('Kind created') },mounted () { console.log('Kind mounted') },unmounted () { console.log('Kind unmounted') },activated () { console.log('Kind 显示')},deactivated () { console.log('Kind 隐藏')}}const Cart = {template: `<div>购物车  <input placeholder="购物车"/></div>`,created () { console.log('Cart created') },mounted () { console.log('Cart mounted') },unmounted () { console.log('Cart unmounted') },activated () { console.log('Cart 显示')},deactivated () { console.log('Cart 隐藏')}}const User = {template: `<div>我的  <input placeholder="我的"/></div>`,created () { console.log('User created') },mounted () { console.log('User mounted') },unmounted () { console.log('User unmounted') },activated () { console.log('User 显示')},deactivated () { console.log('User 隐藏')}}
​Vue.createApp({data () {return {currentTab: 'Home'}},components: {Home,Kind,Cart,User}}).mount('#app')
</script>
</html>

要不不缓存，要缓存都缓存了，这样不好

使用 include / exclude可以设置哪些组件被缓存，使用 max可以设定最多缓存多少个

<!-- 用逗号分隔的字符串，中间不要家空格 -->
<KeepAlive include="a,b"><component :is="view"></component>
</KeepAlive>
​
<!-- 正则表达式 (使用 `v-bind`) -->
<KeepAlive :include="/a|b/"><component :is="view"></component>
</KeepAlive>
​
<!-- 数组 (使用 `v-bind`) -->
<KeepAlive :include="['a', 'b']"><component :is="view"></component>
</KeepAlive>

组件如果想要条件性地被 KeepAlive 缓存，就必须显式声明一个 name 选项。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>动态组件</title>
</head>
<body><div id="app"><ul><li @click="currentTab='Home'">首页</li><li @click="currentTab='Kind'">分类</li><li @click="currentTab='Cart'">购物车</li><li @click="currentTab='User'">我的</li></ul><!-- 动态组件默认切换时 执行的是组件的 销毁 和 重新创建 --><!-- 可以使用 KeepAlive 保留组件的状态，避免组件的重新渲染 --><!-- 字符串逗号分隔，千万不要加空格 --><!-- <keep-alive include="home,user"><component :is="currentTab"></component></keep-alive> --><!-- 正则 --><!-- <keep-alive :include="/home|user/"><component :is="currentTab"></component></keep-alive> --><!-- 数组 --><keep-alive :include="['home', 'user']"><component :is="currentTab"></component></keep-alive></div>
</body>
<script src="../lib/vue.global.js"></script>
<script>
const Home = {name: 'home',template: `<div>首页  <input placeholder="首页"/></div>`,created () { console.log('Home created') },mounted () { console.log('Home mounted') },unmounted () { console.log('Home unmounted') },activated () { console.log('Home 显示')},deactivated () { console.log('Home 隐藏')}}const Kind = {name: 'kind',template: `<div>分类  <input placeholder="分类"/></div>`,created () { console.log('Kind created') },mounted () { console.log('Kind mounted') },unmounted () { console.log('Kind unmounted') },activated () { console.log('Kind 显示')},deactivated () { console.log('Kind 隐藏')}}const Cart = {name: 'cart',template: `<div>购物车  <input placeholder="购物车"/></div>`,created () { console.log('Cart created') },mounted () { console.log('Cart mounted') },unmounted () { console.log('Cart unmounted') },activated () { console.log('Cart 显示')},deactivated () { console.log('Cart 隐藏')}}const User = {name: 'user',template: `<div>我的  <input placeholder="我的"/></div>`,created () { console.log('User created') },mounted () { console.log('User mounted') },unmounted () { console.log('User unmounted') },activated () { console.log('User 显示')},deactivated () { console.log('User 隐藏')}}
​Vue.createApp({data () {return {currentTab: 'Home'}},components: {Home,Kind,Cart,User}}).mount('#app')
</script>
</html>

五、缓存后如何获取数据

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

  • beforeRouteEnter

  • actived

beforeRouteEnter

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

beforeRouteEnter(to, from, next){next(vm=>{console.log(vm)// 每次进入路由执行vm.getData()  // 获取数据})
},

actived

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

activated(){this.getData() // 获取数据
},

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

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.hqwc.cn/news/224721.html

如若内容造成侵权/违法违规/事实不符，请联系编程知识网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

MaaS/PaaS/SaaS

MaaS/PaaS/SaaS

生成式AI时代的AI Infra—从DevOps->MLOps->LLMOps - 知乎距离上次讲LLM相关的内容已经过去2个月了 LLM as Controller—无限拓展LLM的能力边界&#xff0c;本文想要从AI Infra的角度出发&#xff0c;从更宏观的角度看Generative AI对AI Infra生态产生的变化&#xff0c;…
阅读更多...
Ops实践 | 从零开始，在云原生环境下快速实现K8S集群可视化监控

Ops实践 | 从零开始，在云原生环境下快速实现K8S集群可视化监控

微信改版了&#xff0c;现在看到我们全凭缘分&#xff0c;为了不错过【全栈工程师修炼指南】重要内容及福利&#xff0c;大家记得按照上方步骤设置「接收文章推送」哦~ 关注回复【交流群】加入【SecDevOps】学习答疑群交流群! 原文链接&#xff1a;Ops实践 | 从零开始&#xff…
阅读更多...
【C++】探索C++模板编程

【C++】探索C++模板编程

文章目录 什么是C模板&#xff1f;模板的基本语法类型模板参数模板函数的示例类模板的示例总结 C模板是一种强大的编程工具&#xff0c;它可以实现泛型编程&#xff0c;使代码更加灵活和可重用。本篇博客将介绍C模板的基本语法、类型模板参数和模板函数的使用&#xff0c;并通过…
阅读更多...
Spring不再支持Java8了

Spring不再支持Java8了

在今天新建模块的时候发现了没有java8的选项了&#xff0c;结果一查发现在11月24日&#xff0c;Spring不再支持8了&#xff0c;这可怎么办呢&#xff1f;我们可以设置来源为阿里云https://start.aliyun.com/ 。 java8没了 设置URL为阿里云的地址
阅读更多...
端口被占用解决方法

端口被占用解决方法

1、查出被哪个进程占用&#xff1a; &#xff08;1&#xff09;开始---->运行---->cmd&#xff0c;或者是windowR组合键&#xff0c;调出命令窗口&#xff1b; &#xff08;2&#xff09;输入命令&#xff1a;netstat -ano&#xff0c;列出所有端口的级泥夏情况。在列表…
阅读更多...
Phpstudy v8.0/8.1添加 php-7.4.9

Phpstudy v8.0/8.1添加 php-7.4.9

1、官网下载最新的php版本 打开Windows版的官网下载&#xff0c;地址&#xff1a;PHP For Windows: Binaries and sources Releases 页面上有不同的PHP版本&#xff0c;这里我们下载的是64位nts版的PHP7.4.9&#xff0c;php-7.4.9-nts-Win32-vc15-x64.zip。 2、解压下载的文…
阅读更多...
【开发实践】网页预览excel表格原版样式

【开发实践】网页预览excel表格原版样式

一、需求分析 由于业务部门需要&#xff0c;在导出excel表格页面&#xff0c;不需要先下载&#xff0c;就可以直接在页面上预览该表格文件。 二、代码实现 使用Luckysheet实现&#xff1a; 什么是Luckysheet Luckysheet &#xff0c;一款纯前端类似excel的在线表格&#xff0…
阅读更多...
这些汽车托运套路你肯定不知道

这些汽车托运套路你肯定不知道

这些汽车托运套路你肯定不知道 这些套路你肯定不知道.. 学会这三招 汽车托运不怕吃亏 1 看营业执照 首先确定选择的托运公司是否有保障 要求公司出示营业执照和道路运输经营许可证 如果都没有 那就很有可能是无牌照的小作坊!! 这种出问题就肯定没保障 2 保险跟合同 一车一合同 …
阅读更多...
vue3父子组件通过$parent与ref通信

vue3父子组件通过$parent与ref通信

父组件 <template><div><h1>ref与$parents父子组件通信 {{ parentMoney }}</h1><button click"handler">点击我子组件的值会减20</button><hr><child ref"children"></child></div> </te…
阅读更多...
LeetCode（35）螺旋矩阵【矩阵】【中等】

LeetCode（35）螺旋矩阵【矩阵】【中等】

目录 1.题目2.答案3.提交结果截图 链接&#xff1a; 54. 螺旋矩阵 1.题目 给你一个 m 行 n 列的矩阵 matrix &#xff0c;请按照 顺时针螺旋顺序 &#xff0c;返回矩阵中的所有元素。 示例 1&#xff1a; 输入&#xff1a;matrix [[1,2,3],[4,5,6],[7,8,9]] 输出&#xff1a…
阅读更多...
Docker配置Halo搭建个人博客-快速入门

Docker配置Halo搭建个人博客-快速入门

Docker配置Halo搭建个人博客-快速入门 1 官方文档2 安装Halo2.1 创建Halo主目录2.2 远程下载配置文件2.3 编辑配置文件2.4 拉取最新镜像2.6 查看容器2.7 开放服务器的防火墙 3 运行3.1 运行项目3.2 停止项目 4 常见问题4.1 没有权限4.2 ommand netstart not found, did you mea…
阅读更多...
js moment时间范围拿到中间间隔时间

js moment时间范围拿到中间间隔时间

2023.11.27今天我学习了如何对只返回的开始时间和结束时间做处理&#xff0c;比如后端返回了&#xff1a; [time:{start:202301,end:202311}] 我们需要把中间的间隔渲染出来。 [202301,202302,202303,202304,202305,202306,202307,202308,202309,202310,202311] 利用moment…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023