频道栏目
首页 > 资讯 > HTML/CSS > 正文

vue项目通过keep-alive数据缓存优化教程

17-09-25        来源:[db:作者]  
收藏   我要投稿

通过vue提供的keep-alive减少对服务器的请求次数

VUE2.0中提供了一个keep-alive方法,可以用来缓存组件,避免多次加载相应的组件,减少性能的消耗。比如, 一个页面的数据包括图片、文字等用户都已经加载完了,然后用户通过点击跳转到了另外一个界面。然后从另外一个界面通过返回又回到了原先的界面。如果没有设置的话,那么原先界面的信息就要重新向服务器请求得到。而通过vue提供的keep-alive可以是页面的已经请求的数据得以保存,减少请求的次数,提高用户的体验程度。

缓存组件又分为两种,缓存整个站点的页面的组件或者缓存部分页面的组件。

1、缓存所有的页面,适用于每个页面都有请求的情况。方法如下,在需要缓存的router-view用keep-alive标签进行包裹起来。

将首次触发请求写到created钩子里边,就能实现缓存。比如从列表页,去了详情页,回来还是原来的页面。

2、缓存部分组件或者页面,使用router.meta这个属性通过判断的方法可以实现。方法如下:

router设置如下:

routers:[

{ path: '/home',

name: home,

meta:{keepAlive: true} // 设置为true表示需要缓存,不设置或者false表示不需要缓存 }

]

还可以通过新增的属性include/exclude来设置。见名思意,include包含的意思,exclude除了的意思。这里需要用到组件的名称即name来进行设置,所以name肯定就要加上了。 加入 a,b组件需要缓存,c,d组件不需要缓存。写法如下:

vue项目的优化还可以通过组件的按需加载来实现,就像图片的懒加载一样,如果客户根本就没有看到那些图片,而我们却在打开页面的时候全部给加载完了,这样会大大的增加请求的时间,降低用户的体验程度。懒加载在很多的网站都有用到,比如淘宝、京东等等这样的购物网站,上面的图片链接等等都很多,如果你把滚轴迅速的往下拉的时候,你可能会看到图片加载的情况。具体怎么使用,大家可以看我写的另外一个博客: vue项目优化之页面的按需加载(vue+webpack)

相关TAG标签
上一篇:编程开发练习题_Swap Nodes in Pairs
下一篇:Point类的定义
相关文章
图文推荐

关于我们 | 联系我们 | 广告服务 | 投资合作 | 版权申明 | 在线帮助 | 网站地图 | 作品发布 | Vip技术培训 | 举报中心

版权所有: 红黑联盟--致力于做实用的IT技术学习网站