问题
我们知道一个组件的生命周期是从创建到销毁的这个过程,当从一个页面跳转到另一个页面的时候,其实组件已经经历了一个生命周期
在浏览器被打开的时候是一个创建的过程,跳转到另一个页面又经历了销毁的过程,所以当我们从A页面跳转到B页面的时候,A页面已经被销毁了,假如在跳转之前我们对A页面进行了一个操作,接着我们从B页面再返回到A页面,发现原先在A页面上的操作没有了,但是假如我们想保存A页面原来的操作,我们应该怎么做呢?
可以利用vue的Keep-alive缓存组件
Keep-alive
使用keep-alive包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们,避免组件被返回后浏览器对它进行再度渲染,当组件在 内被切换,它的 activated 和 deactivated 这两个生命周期钩子函数将会被对应执行。
activated 和 deactivated
activated :该生命周期钩子会在组件被重新激活时调用
deactivated:该声明周期钩子会在组件被停用的时候调用
使用keep-alive会将数据保存在内存中,如果要每次进入页面时得到最新的数据,就要在activated里面重新请求获取数据,承担原来在created钩子和mounted钩子里获取数据的职责
Props:
include - 字符串或正则表达式。只有名称匹配的组件会被缓存。
exclude - 字符串或正则表达式。任何名称匹配的组件都不会被缓存。
max - 数字。最多可以缓存多少组件实例
keep-alive中只能有一个根节点
使用方法
//第一种:直接在组件外面套keep-alive 组件A和组件B内容都会被缓存
<keep-alive>
<component :is="flag"></component>
</keep-alive>
//第二种:include 此时只有组件A内容会被缓存 若有多个可用逗号分隔include="testA,testB"
<keep-alive include="testA">
<component :is="flag"></component>
</keep-alive>
//第三种:include+正则表达式或者数组 这种情况必须用v-bind (:include="")
<keep-alive :include="['testA']">
<component :is="flag"></component>
</keep-alive>
//第四种:exclude 此时组件A内容不会被缓存,组件B内容会被缓存
<keep-alive exclude="testA">
<component :is="flag"></component>
</keep-alive>
//特殊情况:若include和exclude同时出现 exclude的优先级是高于include的此时只缓存组件B
<keep-alive include="testA,testB" exclude="testA">
<component :is="flag"></component>
</keep-alive>
结合Router使用
在router中为路由添加一个meta属性,设置 keepAlive:false/true
{
path: '/tab',
name: 'tab',
meta:{
keepAlive:true //需要缓存
},
component: () => import('../views/Tab.vue')
},
{
path: '/banner',
name: 'banner',
meta:{
keepAlive:false //不需要缓存
},
component: () => import('../views/Banner.vue')
}
然后在App.vue中使用keep-alive包裹使用路由显示的入口**()**
//此处是为添加了keepAlive=true 的路由添加缓存
//会缓存路由出口的所有页面
<keep-alive>
<router-view> <router-view/>
</keep-alive>
//此处是为添加了keepAlive=true 的路由添加缓存
<keep-alive>
<router-view v-if="$route.meta.keepAlive"/>
</keep-alive>
//此处是为添加了keepAlive=false 的路由默认不缓存
<keep-alive>
<router-view v-if="!$route.meta.keepAlive"/>
</keep-alive>
使用场景
- 多级路由切换:当你在应用程序中设置了多层嵌套路由,用户频繁地在不同层级之间切换时,keep-alive可以显著提高性能。因为它避免了在用户返回上一层路由时重新加载整个组件树的过程,减少了资源消耗和等待时间,提升了用户体验。
- 复杂组件或大型应用:对于含有大量计算、数据绑定、DOM操作或依赖于特定环境状态的组件,重新构建和渲染可能导致性能下降。keep-alive通过缓存这些组件实例,减少不必要的重新初始化过程,提高了应用的整体性能。
- 用户界面需要保留状态:在需要维持组件间状态一致性的情况下,比如聊天应用中历史消息的滚动查看,或者表单填写等场景,使用 keep-alive可以保证用户离开页面后再回来仍能接收到其输入的内容,而不需要重新填充初始状态。
- 移动设备访问:移动网络环境通常较慢,频繁加载页面会导致更高的流量消耗和更长的响应时间。通过利用 keep-alive缓存组件,可以在一定程度上减轻对移动设备的网络负担,提升移动端应用的流畅度。
- 高频率操作界面:在一些操作需要快速响应的界面设计中,如日历选择、搜索结果页等,频繁的切换操作可以借助 keep-alive 提升界面切换速度,提供更好的用户体验
- 分页浏览:在数据密集型的应用中,如列表页面分页展示数据,用户频繁点击下一页或上一页时,使用 keep-alive可以避免重复加载数据,仅更新当前视图的部分内容。