vue缓存

最新推荐文章于 2024-07-16 10:29:46 发布

长安城中一市民

最新推荐文章于 2024-07-16 10:29:46 发布

阅读量1.5k

点赞数

分类专栏：笔记文章标签： vue 缓存

本文链接：https://blog.csdn.net/wmingcsdn/article/details/87257572

版权

本文介绍了Vue中的缓存组件keep-alive的使用，强调了它并非vue-router特性，而在Vue 2.0中引入。通过在路由配置中设置meta字段控制组件是否被缓存，如在/home路由设置meta:{keepAlive: true}。缓存成功后，组件的created钩子不会多次触发，从而避免不必要的数据请求，提高系统性能。对于数据处理型应用，合理利用缓存至关重要。

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

1、keep-alive要配合router-view使用，这里要注意一点就是，keep-alive本身是vue2.0的功能，并不是vue-router的，所以再vue1.0版本是不支持的。keep-alive官方文档点这里，代码实现如下，router-view是在入口APP.vue里面

<keep-alive>
  <router-view></router-view>
</keep-alive>

<!--这里是其他的代码-->

2、这样就会实现组件的缓存，但是有个缺点就是所有组件都会被缓存，可是现实中就是我们有些页面还是要及时刷新的，比如列表数据，想要查看详情的时候都是共用一个组件，只是刷新页面，所以这个共用的组件是不能够缓存的，不然会造成点其他的条目都是之前缓存的数据。那要怎么自定义呢，那就要在router-view里面多加个v-if判断了，然后在router定义的文件里面在想要缓存的页面多加上“meta:{keepAlive:true}”，不想要缓存就是“meta:{keepAlive:false}”或者不写，只有为true的时候是会被keep-alive识别然后缓存的。