Vue-3.1缓存组件keep-alive

小沐°2023-10-15 21:31

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

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

解决：利用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