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加密解密7种方法总结分析
Oct 07 Javascript
一个简单的jquery进度条示例
Apr 28 Javascript
javascript实现动态改变层大小的方法
May 14 Javascript
Clipboard.js 无需Flash的JavaScript复制粘贴库
Oct 02 Javascript
微信小程序 Audio API详解及实例代码
Sep 30 Javascript
原生js实现弹出层效果
Jan 20 Javascript
jQuery操作之效果详解
May 19 jQuery
微信小程序picker组件下拉框选择input输入框的实例
Sep 20 Javascript
axios post提交formdata的实例
Mar 16 Javascript
Angular 容器部署的方法
Apr 17 Javascript
通过一次报错详细谈谈Point事件
May 17 Javascript
Vue使用vue-recoure + http-proxy-middleware + vuex配合promise实现基本的跨域请求封装
Oct 21 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
虹吸壶是谁发明的?煮出来的咖啡好喝吗
2021/03/04 冲泡冲煮
PHP遍历文件夹与文件类及处理类用法实例
2014/09/23 PHP
php选择排序法实现数组排序实例分析
2015/02/16 PHP
php求一个网段开始与结束IP地址的方法
2015/07/09 PHP
PHP 年月日的三级联动实例代码
2017/05/24 PHP
Laravel模糊查询区分大小写的实例
2019/09/29 PHP
30个最佳jQuery Lightbox效果插件分享
2011/04/11 Javascript
javascript 原型继承介绍
2011/08/30 Javascript
Javascript和Java获取各种form表单信息的简单实例
2014/02/14 Javascript
js隐式全局变量造成的bug示例代码
2014/04/22 Javascript
javascript中slice(),splice(),split(),substring(),substr()使用方法
2015/03/13 Javascript
js实现交换运动效果的方法
2015/04/10 Javascript
基于jQuery实现页面搜索功能
2020/03/26 Javascript
浅谈jQuery操作类数组的工具方法
2016/12/23 Javascript
基于模板引擎Jade的应用(详解)
2017/12/12 Javascript
echarts整合多个类似option的方法实例
2018/07/10 Javascript
微信小程序之事件交互操作实例分析
2018/12/03 Javascript
vue+echarts实现可拖动节点的折线图(支持拖动方向和上下限的设置)
2019/04/12 Javascript
Vue页面渲染中key的应用实例教程
2021/01/12 Vue.js
Python实现针对中文排序的方法
2017/05/09 Python
浅谈Python基础之I/O模型
2017/05/11 Python
浅谈Python由__dict__和dir()引发的一些思考
2017/10/30 Python
解决pycharm的Python console不能调试当前程序的问题
2019/01/20 Python
在django中,关于session的通用设置方法
2019/08/06 Python
python 利用turtle模块画出没有角的方格
2019/11/23 Python
python获取网络图片方法及整理过程详解
2019/12/20 Python
python 密码学示例——理解哈希(Hash)算法
2020/09/21 Python
Miller Harris官网:英国小众香水品牌
2020/09/24 全球购物
你在项目中用到了xml技术的哪些方面?如何实现的?
2014/01/26 面试题
学生打架检讨书1000字
2014/01/16 职场文书
财务简历的自我评价
2014/03/05 职场文书
大学生党员自我评价范文
2014/04/09 职场文书
院党委组织查摆问题对照检查材料思想汇报2014
2014/10/08 职场文书
2015年教务主任工作总结
2015/07/22 职场文书
大学生先进个人主要事迹材料
2015/11/04 职场文书
大学军训口号大全
2015/12/24 职场文书