Vue-3.1缓存组件keep-alive

问题:从首页卡片点到详情页,又点返回,数据重新加载了->希望回到原来的位置

原因:路由跳转后,组件被销毁了,返回回来组件又被重建了,所以数据重新被加载了

解决:利用keep-alive将组件缓存下来

keep-alive是什么

keep-alive是Vue的内置组件,当它包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们。

keep-alive是一个抽象组件:它自身不会渲染成一个DOM元素,也不会出现在父组件链中,只是一个容器。

keep-alive的优点

在组件切换过程中把切换出去的组件保留在内存中,防止重复渲染DOM,减少加载时间及性能消耗,提高用户体验性。

复制代码
<template>
    <div class="h5-wrapper">
        <keep-alive>
            <router-view></router-view>
        </keep-alive>
    </div>
</template>

问题:缓存了所有被切换的组件

keep-alive是三个属性

1)include:组件名数组,只有匹配的组件会被缓存

2)exclude:组件名数组,任何匹配的组件都不会被缓存

3)max:最多可以缓存多少组件实例

复制代码
<template>
    <div class="h5-wrapper" :include="['LayoutPage']">
        <keep-alive>
            <router-view></router-view>
        </keep-alive>
    </div>
</template>

组件名:name命名的,如果没有配置name,才会找文件名作为组件名

被缓存的组件会多两个生命周期钩子

1)actived:激活时,组件被看到时触发->进入页面时触发

2)deactived:失活时,组件看不见时触发->离开页面时触发

组件缓存了,就不会执行组件的created、mounted、destroyed等钩子,所以提供了actived和deactived

相关推荐
布列瑟农的星空21 分钟前
重学React——memo能防止Context的额外渲染吗
前端
FuckPatience21 分钟前
Vue 与.Net Core WebApi交互时路由初探
前端·javascript·vue.js
小小前端_我自坚强27 分钟前
前端踩坑指南 - 避免这些常见陷阱
前端·程序员·代码规范
lichenyang45328 分钟前
从零实现JSON与图片文件上传功能
前端
WebGirl31 分钟前
动态生成多层表头表格算法
前端·javascript
hywel1 小时前
一开始只是想整理下书签,结果做成了一个 AI 插件 😂
前端
傅里叶1 小时前
SchedulerBinding 的三个Frame回调
前端·flutter
小小前端_我自坚强1 小时前
React Hooks 使用详解
前端·react.js·redux
java水泥工1 小时前
基于Echarts+HTML5可视化数据大屏展示-车辆综合管控平台
前端·echarts·html5·大屏模版
aklry1 小时前
elpis之学习总结
前端·vue.js