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 相关文章推荐
window.onload 加载完毕的问题及解决方案(下)
Jul 09 Javascript
innerHTML 和 getElementsByName 在IE下面的bug 的解决
Apr 09 Javascript
JavaScript中Cookies的相关使用教程
Jun 04 Javascript
jquery获取css的color值返回RGB的方法
Dec 18 Javascript
JavaScript学习笔记整理_关于表达式和语句
Sep 19 Javascript
ajax 提交数据到后台jsp页面及页面跳转问题
Jan 19 Javascript
JS字符串按逗号和回车分隔的方法
Apr 25 Javascript
vue.js移动端tab组件的封装实践实例
Jun 30 Javascript
详解webpack打包时排除其中一个css、js文件或单独打包一个css、js文件(两种方法)
Oct 26 Javascript
Django模板继承 extend标签实例代码详解
May 16 Javascript
VUE的history模式下除了index外其他路由404报错解决办法
Aug 21 Javascript
JS秒杀倒计时功能完整实例【使用jQuery3.1.1】
Sep 03 jQuery
微信小程序使用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
Wordpress php 分页代码
2009/10/21 PHP
php获取textarea的值并处理回车换行的方法
2014/10/20 PHP
详解PHP+AJAX无刷新分页实现方法
2015/11/03 PHP
Opacity.js
2007/01/22 Javascript
一些mootools的学习资源
2010/02/07 Javascript
基于jquery的分页控件(C#)
2011/01/06 Javascript
js 事件处理函数间的Event物件是否全等
2011/04/08 Javascript
js中top/parent/frame概述及案例应用
2013/02/06 Javascript
DOM基础教程之事件对象
2015/01/20 Javascript
jQuery实现新消息闪烁标题提示的方法
2015/03/11 Javascript
jQuery插件EnPlaceholder实现输入框提示文字
2015/06/05 Javascript
JavaScript获取客户端IP的方法(新方法)
2016/03/11 Javascript
vue中实现先请求数据再渲染dom分享
2018/03/17 Javascript
M2实现Nodejs项目自动部署的方法步骤
2019/05/05 NodeJs
解决Layui数据表格的宽高问题
2019/09/28 Javascript
[56:00]DOTA2上海特级锦标赛主赛事日 - 4 胜者组决赛Secret VS Liquid第一局
2016/03/05 DOTA
Python中针对函数处理的特殊方法
2014/03/06 Python
Python读取图片EXIF信息类库介绍和使用实例
2014/07/10 Python
分享vim python缩进等一些配置
2018/07/02 Python
python 找出list中最大或者最小几个数的索引方法
2018/10/30 Python
对Python3中bytes和HexStr之间的转换详解
2018/12/04 Python
对python 生成拼接xml报文的示例详解
2018/12/28 Python
Python异常处理知识点总结
2019/02/18 Python
利用Tensorflow的队列多线程读取数据方式
2020/02/05 Python
python实现PCA降维的示例详解
2020/02/24 Python
python使用paramiko实现ssh的功能详解
2020/03/06 Python
Python字符串函数strip()原理及用法详解
2020/07/23 Python
天猫精选:上天猫,就够了
2016/09/21 全球购物
雷锋精神演讲稿
2014/05/13 职场文书
小学生读书活动总结
2014/06/30 职场文书
垃圾分类的活动方案
2014/08/15 职场文书
2014年医药代表工作总结
2014/11/22 职场文书
教师节感谢信
2015/01/22 职场文书
Python实现Telnet自动连接检测密码的示例
2021/04/16 Python
Go Plugins插件的实现方式
2021/08/07 Golang
python 详解turtle画爱心代码
2022/02/15 Python