keep-alive,缓存,数据
web前端-js教程
本文主要介绍了vue使用keep-alive实现数据缓存不刷新，这里整理了详细的代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能帮助到大家。tp5源码,vscode终端无法,ubuntu 扩大分区,ngixn tomcat,sqlite同时读写,包围 asp 服务器脚本的分隔符是,图像裁剪的jquery插件,基于weui前端框架,htmlunit爬虫教程,php字符串转大写,seo培训课程公司,精简网站模板,情人节表白网页,手机软件下载网站wap模板,css页面图片整体缩小,教室使用管理系统,windows程序画圆程序源代码lzw
到现在，接触vue也小段时间了，项目进行到了一定程度，然而项目缺少了缓存机制，所以每次跳转页面都会重新created一下数据，虽说系统的数据请求速度很快，但是这样做对系统的性能会有很大的坏处的，所以到这里就要对系统优化下，添加缓存了。微信公众号 管理 php源码下载,安装ubuntu呈黑色,字节靠爬虫起家,php7与以往php区别,2018 seo排名lzw
其实到现在，对于vue还是没有玩通，每深挖一次，就会发现一次vue的精彩，开始不清楚要用什么实现缓存，找了好久，有好几种说法，就是用vuex、vuet或者keep-alive，然后对比了一下，在我认为，vuex和vuet是实现状态管理，重心是在数据处理上；想要实现整体的缓存，阻止created的刷新，就要用keep-alive。班级管理网页制作源码,vscode头部如何生成,ubuntu 安装hg,配置tomcat后台管理,sqlite的基本数据类型,我的世界爬虫没了声音会怎么样,php文件指针,邯郸seo技术培训,西部数码网站管理助手搭建织梦,wap css模板lzw
所以这里我想要给大家介绍下如何用keep-alive实现缓存的页面？其实很简单，就是几句话而已。1、keep-alive要配合router-view使用，这里要注意一点就是，keep-alive本身是vue2.0的功能，并不是vue-router的，所以再vue1.0版本是不支持的。keep-alive官方文档点这里，代码实现如下，router-view是在入口APP.vue里面
2、这样就会实现组件的缓存，但是有个缺点就是所有组件都会被缓存，可是现实中就是我们有些页面还是要及时刷新的，比如列表数据，想要查看详情的时候都是共用一个组件，只是刷新页面，所以这个共用的组件是不能够缓存的，不然会造成点其他的条目都是之前缓存的数据。那要怎么自定义呢，那就要在router-view里面多加个v-if判断了，然后在router定义的文件里面在想要缓存的页面多加上“meta:{keepAlive:true}”，不想要缓存就是“meta:{keepAlive:false}”或者不写，只有为true的时候是会被keep-alive识别然后缓存的。
3、在router文件加上meta判断
import Vue from 'vue'import Router from 'vue-router'Vue.use(Router)export default new Router({ {//home会被缓存 path:"/home", component:home, meta:{keepAlive: true} } {//hello不会被缓存 path:"/hello", component:hello, meta:{keepAlive: false} }})想要看有没有缓存成功，可以在各个组件的created钩子里面打印输出标志，缓存成功就是首次进入页面，created会请求数据，后面就不会再次请求而是直接调用缓存的
添加了缓存可以大大减少对系统性能的损坏，毕竟做数据处理型的系统，数据过于庞大，每次都要请求一下页面是很不好的，有了缓存，该缓存的缓存，不想缓存也可以实时刷新。
Angularjs在360兼容模式下取数据缓存问题解决办法
PHP微信开发用Cache 解决数据缓存
图文详解微信小程序数据缓存