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

相关推荐
嘗_10 分钟前
手写自己的小型react
前端·javascript·react.js
嘀咕博客14 分钟前
h5游戏免费下载:HTML5拉杆子过关小游戏
前端·游戏·html5
Moonbit15 分钟前
MoonBit 推出 LLVM Debugger,核心用户数破十万
前端·编程语言·llvm
zuo-yiran22 分钟前
vue div标签可输入状态下实现数据双向绑定
前端·javascript·vue.js
qq_3168377522 分钟前
使用leader-line-vue 时垂直元素间距过小连线打转的解决
前端·javascript·vue.js
天天向上102424 分钟前
vue3使用ONLYOFFICE 实现在线Word,Excel等文档
前端·javascript·html
光影少年25 分钟前
React Native 第三章
javascript·react native·react.js
KoProject27 分钟前
发布30款App之后,我总结了这套GLM-4.6全自动化开发流
前端·后端·github
一川_31 分钟前
虚拟滚动的幽灵:从搜索失准到丝滑体验的救赎之旅
javascript
前端踩bug工程师34 分钟前
flutter项目
前端