vue项目优化之通过keep-alive数据缓存的方法


Posted in Javascript onDecember 11, 2017

<keep-alive>是Vue的内置组件,能在组件切换过程中将状态保留在内存中,防止重复渲染DOM。

<keep-alive> 包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们。和 <transition> 相似,<keep-alive> 是一个抽象组件:它自身不会渲染一个 DOM 元素,也不会出现在父组件链中。

prop:

  1. include: 字符串或正则表达式。只有匹配的组件会被缓存。
  2. exclude: 字符串或正则表达式。任何匹配的组件都不会被缓存。

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

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

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

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

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

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

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

<keep-alive v-if="$route.meta.keepAlive">
<router-view></router-view>
</keep-alive>
<router-view v-if="! $route.meta.keepAlive">
</router-view>

router设置如下:

routers:[
      {  path: '/home',
        name: home,
        meta:{keepAlive: true}   // 设置为true表示需要缓存,不设置或者false表示不需要缓存                    }
     ]

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

<keep-alive include="a,b">
<component></component>
</keep-alive>   
<keep-alive exclude="c,d">
<component></component>
</keep-alive>

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
一个简单的JavaScript 日期计算算法
Sep 11 Javascript
jQuery 开天辟地入门篇一
Dec 09 Javascript
node.js中的fs.symlinkSync方法使用说明
Dec 15 Javascript
jQuery检测返回值的数据类型
Jul 13 Javascript
详解jQuery中的deferred对象的使用(一)
May 27 Javascript
Javascript随机标签云代码实例
Jun 21 Javascript
JSON与JS对象的区别与对比
Mar 01 Javascript
jquery实现的table排序功能示例
Mar 10 Javascript
为JQuery EasyUI 表单组件增加焦点切换功能的方法
Apr 13 jQuery
浅入深出Vue之自动化路由
Aug 06 Javascript
原生js实现ajax请求和JSONP跨域请求操作示例
Mar 14 Javascript
uni-app实现获取验证码倒计时功能
Nov 01 Javascript
微信小程序使用input组件实现密码框功能【附源码下载】
Dec 11 #Javascript
浅谈vue项目优化之页面的按需加载(vue+webpack)
Dec 11 #Javascript
微信小程序使用radio显示单选项功能【附源码下载】
Dec 11 #Javascript
详解webpack编译多页面vue项目的配置问题
Dec 11 #Javascript
微信小程序使用checkbox显示多项选择框功能【附源码下载】
Dec 11 #Javascript
浅谈webpack编译vue项目生成的代码探索
Dec 11 #Javascript
微信小程序使用picker实现时间和日期选择框功能【附源码下载】
Dec 11 #Javascript
You might like
GBK的页面输出JSON格式的php函数
2010/02/16 PHP
php数组函数序列之each() - 获取数组当前内部指针所指向元素的键名和键值,并将指针移到下一位
2011/10/31 PHP
ThinkPHP的截取字符串函数无法显示省略号的解决方法
2014/06/25 PHP
php基于mcrypt的加密解密实例
2014/10/27 PHP
php+mysql实现的二级联动菜单效果详解
2016/05/10 PHP
使用php从身份证号中获取一系列线索(星座、生肖、生日等)
2016/05/11 PHP
jquery实现的缩略图预览滑块实例
2015/06/25 Javascript
再谈javascript常见错误及解决方法
2016/09/16 Javascript
纯JS打造网页中checkbox和radio的美化效果
2016/10/13 Javascript
解决webpack打包速度慢的解决办法汇总
2017/07/06 Javascript
Angular4实现动态添加删除表单输入框功能
2017/08/11 Javascript
Vee-Validate的使用方法详解
2017/09/22 Javascript
Angular 开发学习之Angular CLI的安装使用
2017/12/31 Javascript
webpack v4 从dev到prd的方法
2018/04/02 Javascript
vue-router的使用方法及含参数的配置方法
2018/11/13 Javascript
[01:24:09]Ti4 冒泡赛第二轮DK vs C9 1
2014/07/14 DOTA
可用于监控 mysql Master Slave 状态的python代码
2013/02/10 Python
简单了解OpenCV是个什么东西
2017/11/10 Python
python实现RabbitMQ的消息队列的示例代码
2018/11/08 Python
Python告诉你木马程序的键盘记录原理
2019/02/02 Python
python实现局域网内实时通信代码
2019/12/22 Python
pytorch 常用线性函数详解
2020/01/15 Python
解决echarts中饼图标签重叠的问题
2020/05/16 Python
Python第三方包PrettyTable安装及用法解析
2020/07/08 Python
HTML5 CSS3打造相册效果附源码下载
2014/06/16 HTML / CSS
调用HTML5的Canvas API绘制图形的快速入门指南
2016/06/17 HTML / CSS
加拿大时装零售商:Influence U
2018/12/22 全球购物
Lulu Guinness露露·吉尼斯官网:红唇包
2019/02/03 全球购物
DNA基因检测和分析:23andMe
2019/05/01 全球购物
澳大利亚礼品篮网站:Macarthur Baskets
2019/10/14 全球购物
人力资源部培训专员岗位职责
2014/01/02 职场文书
超级搞笑检讨书
2014/01/15 职场文书
学校卫生检查制度
2014/02/03 职场文书
秋季校运动会广播稿
2014/02/23 职场文书
目标责任书格式
2014/07/28 职场文书
2019森林防火宣传标语大全!
2019/07/03 职场文书