Vue中路由缓存及activated与deactivated的详解

news/2024/4/29 19:00:32/文章来源:https://blog.csdn.net/zxdznyy/article/details/128958001

前言

在Vue的使用中，为了提高应用的效率，我们可以使用路由缓存这方面的相关知识来解决遇到的问题。

本博客的内容则是对路由缓存及activated与deactivated的详解。期望能对读者有所帮助。

本篇博客需要有对路由相关知识的了解，如需复习可见博客Vue2路由的详细讲解。

一，路由缓存

本节内容讲解路由缓存相关知识，如果了解什么是路由缓存可以跳过引子部分。

1.1 引子

先看一下我的组件结构：
在这里插入图片描述
News和Messages是两个路由组件，可以在App中切换使用。

News组件：（News组件中有三个输入框，仅用作输入）

Messages组件：

了解了上述结构后，现在抛出疑问：如果我再News的输入框中输入一些数据，在我点击Messages后，输入框中的数据还在不在？

现在我们来实践一下：

输入数据：
在这里插入图片描述
点击messages：

如何判断输入框的数据还存不存在：如果点击News切换到News组件，输入框的内容还在，则代表数据还在，否在就是，随着路由组件的切换，组件中的内容也随之消失。

当我点击News后，数据消失了：
在这里插入图片描述
可以证明，如果不作过多处理，路由组件中的数据会随着路由的切换而消失。在实际的项目应用中如果我写了很多的数据，不小心切换了组件，数据消失了，这样做很影响效率。

因此，这里提出解决对策：路由缓存。

1.2 路由缓存的方法

1.2.1 keep-alive

路由缓存，需要借助一个标签：

<keep-alive></keep-alive>

这个标签中，放置相关的router-view结构：

    <keep-alive><router-view></router-view></keep-alive>

放置后，整个router-view中的数据都会缓存，数据不会随着组件的切换而消失。

那么再次切换路由，刚刚的引子案例中，输入框的内容不会消失。

1.2.2 keep-alive标签中的include属性

刚刚的做法，已经可以实现数据的缓存了，而且实现的是该组件中所有路由组件中数据的缓存。

但是，如果现在有十个路由组件需要切换，我只需要用到一个路由组件中的数据，可是用上述的方法存下的数据却远远多过我们需要的。这样会影响浏览器的工作效率。

所以，我们现在要做的是，只缓存个别路由组件中的数据。

方法是，在keep-alive标签中，配置include属性，include属性的内容是需要缓存数据的路由组件的组件名。

这里要注意的是，组件名是我们自己配置的name，而不是组件本身的名称。

了解做法，我们来实践，单独缓存News组件中的数据：

这里需要注意，News组件中是提前配置好了name的。News组件的组件文件名是News.vue，但是组件名是提前配置好的Name：New，如下图：
在这里插入图片描述
我们现在在App中的keep-alive中配置include：

做到这一步，News中的数据得到了缓存，并且只有News组件中的数据被缓存了。

1.2.3 include中多组件的配置

如果要缓存的不止一个组件中的数据，二十多个，该如何在include中配置？

其实很简单，给include一个v-bind绑定。一旦使用v-bind，则include中的数据是js语句，在include中可以配置数组类型的数据，把要缓存的组件的组件名称都写进数组即可：
在这里插入图片描述

二，activated与deactivated

2.1 引子

刚刚我们已经了解了路由缓存的相关知识。

现在我们有了新的需求：在上面已经写好的基础上（缓存了New和Message两个组件中的数据），利用好消息界面，写一个定时器，每隔五毫秒打印“消息来了”。当切换到别的组件时，打印停止。

现在我们先来试一下，看一下不做什么处理可不可以直接实现。

首先，这是我message的写法：
在这里插入图片描述
当我们打开项目时，下方还没有打印相关内容。因为，Message组件还没能被渲染：

接着，我点击Messages按钮切换出Messages组件，下方不断打印出“消息来了"：

然后我切换到News组件发现下面会一直打印：
在这里插入图片描述
出现此现象的本质原因：Message整个组件被缓存了。

那么，我们希望的是什么呢？我们希望点击News按钮后，Message组件的定时器能够被销毁。但是数据依旧被缓存。

这里为了说明问题我在message组件中加一个类似于News中的input框。我们的需求可以通过，定时器随着切换其他组建后被销毁的同时，Message中的数据依旧存在来体现。
在这里插入图片描述

2.2 介绍activated与deactivated

这里要介绍两个钩子函数（生命周期函数）：activated与deactivated。

这两个是专门用于路由组件的函数。

先介绍一下：

activated，可译为”激活的“，路由组件从未出现到出现时运行。

deactivated：可译为“失活的”，路由组件被切换走时运行。

我们可以来测试一下是不是如此，代码：
在这里插入图片描述
点击Messages按钮：

把Messages切换走：

回到需求，通过这两个生命周期函数，我们可以通过两个组件的生命周期函数实现：在messages组件出现时激活定时器，在messages组件被切走时销毁定时器。

2.3 解决需求

利用钩子函数，在路由组件activated（激活）时候，设置定时器，在路由组件deactivated（被切换走）的时候销毁定时器：
在这里插入图片描述
利用此方法，缓存不会受影响。

现在整体代码写完，我们来看一下效果：
messages未出现：
在这里插入图片描述
点击messages按钮后，message在激活时定时器被创建，开始打印”消息来啦！“。且此时在输入框中缓存数据。

在点击News按钮，Messages被切换走，定时器被销毁，控制台不再打印内容，但数据依旧缓存：
在这里插入图片描述
实现需求。

三，整体代码

读者可以使用关键代码，然后进行实践。

router中index.js的配置：

import VueRouter from 'vue-router'//引入一级路由
import News from '../pages/News'
import Messages from '../pages/Messages'export default new VueRouter({routes: [{path: '/news',component: News},{path: '/messages',component: Messages}]
})

App组件：

<template><div><router-link to="/news"><button>News</button></router-link><router-link to="/messages"><button>Messages</button></router-link><keep-alive :include="['New', 'Message']"><router-view></router-view></keep-alive></div>
</template><script>
export default {name: 'App'
}
</script><style scoped></style>

News组件：

<template><div><h1>News</h1><ul><li v-for="n in news" :key="n.id">{{ n.title }} <input type="text"></li></ul></div>
</template><script>
export default {name: 'New',data() {return {news: [{id: 1, title: '消息1'},{id: 2, title: '消息2'},{id: 3, title: '消息3'}]}}
}
</script><style scoped></style>

Messages组件：

<template><div><h1>Messages</h1><input type="text"></div>
</template><script>export default {name: 'Message',activated() {this.timer = setInterval(() => {console.log('消息来啦！')}, 500)},deactivated() {clearInterval(this.timer)}}
</script><style scoped></style>