使用vue中缓存数据keep-alive时遇到的坑--------

最新推荐文章于 2024-08-12 11:00:57 发布

灿若～星辰

最新推荐文章于 2024-08-12 11:00:57 发布

阅读量469

点赞数

分类专栏：问题类文章标签： vue.js

本文链接：https://blog.csdn.net/nwj0106/article/details/110856479

版权

问题类专栏收录该内容

3 篇文章 0 订阅

订阅专栏

本文探讨了Vue中keep-alive组件的优缺点。keep-alive在缓存数据和避免重复计算方面表现出色，尤其在路由跳转时保持状态。然而，它可能导致列表页固定头部无法正常工作。作者通过在第二次进入页面时让页面自动下移1px解决了这个问题。文章鼓励读者分享遇到的类似问题和解决方案。

摘要由CSDN通过智能技术生成

1.首先来说这个东西的好处，针对于缓存数据，keep-alive确实好用，例如，路由跳转(从列表页跳到具体某一项的详情页)，在路由返回的时候，可以把上一个列表页输入的数据缓存下来，进而达到目的，其次还可以利用keep-alive的专属函数actived函数去进行操作，相当于第二次进来列表页的时候不回去执行created和mounted，直接去执行了actived函数，然后你可以在这个函数里进行你想要进行的操作。

下面来说一下具体的坑，，，，，

目前只遇到过一个方面的，就是list页中table的header，现在的效果是让它滑动到顶部的时候会固定在顶部。如果使用keep-alive的话，因为你给当前list加上了keep-alive所以他会进行数据缓存，然后再跳回来的时候head就下不来，如下图：
在这里插入图片描述