vue 指定组件缓存实例详解


Posted in Javascript onApril 01, 2018

keep-alive 简介

keep-alive 是 Vue 内置的一个组件,可以使被包含的组件保留状态,或避免重新渲染。

用法也很简单:

<keep-alive>
 <component>
 <!-- 该组件将被缓存! -->
 </component>
</keep-alive>

props

include - 字符串或正则表达,只有匹配的组件会被缓存
exclude - 字符串或正则表达式,任何匹配的组件都不会被缓存

// 组件 a
export default {
 name: 'a',
 data () {
 return {}
 }
}
<keep-alive include="a">
 <component>
 <!-- name 为 a 的组件将被缓存! -->
 </component>
</keep-alive>可以保留它的状态或避免重新渲染
<keep-alive exclude="a">
 <component>
 <!-- 除了 name 为 a 的组件都将被缓存! -->
 </component>
</keep-alive>可以保留它的状态或避免重新渲染

<keep-alive include="test-keep-alive">
 <!-- 将缓存name为test-keep-alive的组件 -->
 <component></component>
</keep-alive>

<keep-alive include="a,b">
 <!-- 将缓存name为a或者b的组件,结合动态组件使用 -->
 <component :is="view"></component>
</keep-alive>

<!-- 使用正则表达式,需使用v-bind -->
<keep-alive :include="/a|b/">
 <component :is="view"></component>
</keep-alive>

<!-- 动态判断 -->
<keep-alive :include="includedComponents">
 <router-view></router-view>
</keep-alive>

<keep-alive exclude="test-keep-alive">
 <!-- 将不缓存name为test-keep-alive的组件 -->
 <component></component>
</keep-alive>

遇见 vue-router

router-view 也是一个组件,如果直接被包在 keep-alive 里面,所有路径匹配到的视图组件都会被缓存:

<keep-alive>
 <router-view>
 <!-- 所有路径匹配到的视图组件都会被缓存! -->
 </router-view>
</keep-alive>

然而产品汪总是要改需求,拦都拦不住...

问题

如果只想 router-view 里面某个组件被缓存,怎么办?

使用 include/exclude
增加 router.meta 属性
使用 include/exclude

// 组件 a
export default {
 name: 'a',
 data () {
 return {}
 }
}
<keep-alive include="a">
 <router-view>
 <!-- 只有路径匹配到的视图 a 组件会被缓存! -->
 </router-view>
</keep-alive>

exclude 例子类似。

缺点:需要知道组件的 name,项目复杂的时候不是很好的选择

增加 router.meta 属性

// routes 配置
export default [
 {
 path: '/',
 name: 'home',
 component: Home,
 meta: {
 keepAlive: true // 需要被缓存
 }
 }, {
 path: '/:id',
 name: 'edit',
 component: Edit,
 meta: {
 keepAlive: false // 不需要被缓存
 }
 }
]
<keep-alive>
 <router-view v-if="$route.meta.keepAlive">
 <!-- 这里是会被缓存的视图组件,比如 Home! -->
 </router-view>
</keep-alive>

<router-view v-if="!$route.meta.keepAlive">
 <!-- 这里是不被缓存的视图组件,比如 Edit! -->
</router-view>

优点:不需要例举出需要被缓存组件名称

【加盐】使用 router.meta 拓展

假设这里有 3 个路由: A、B、C。

需求:

默认显示 A
B 跳到 A,A 不刷新
C 跳到 A,A 刷新
实现方式

在 A 路由里面设置 meta 属性:

{
 path: '/',
 name: 'A',
 component: A,
 meta: {
 keepAlive: true // 需要被缓存
 }
}

在 B 组件里面设置 beforeRouteLeave:

export default {
 data() {
 return {};
 },
 methods: {},
 beforeRouteLeave(to, from, next) {
  // 设置下一个路由的 meta
 to.meta.keepAlive = true; // 让 A 缓存,即不刷新
 next();
 }
};

在 C 组件里面设置 beforeRouteLeave:

export default {
 data() {
 return {};
 },
 methods: {},
 beforeRouteLeave(to, from, next) {
 // 设置下一个路由的 meta
 to.meta.keepAlive = false; // 让 A 不缓存,即刷新
 next();
 }
};

这样便能实现 B 回到 A,A 不刷新;而 C 回到 A 则刷新。

总结

路由大法不错,不需要关心哪个页面跳转过来的,只要 router.go(-1) 就能回去,不需要额外参数。

然而在非单页应用的时候,keep-alive 并不能有效的缓存了= =

Javascript 相关文章推荐
JS写的数字拼图小游戏代码[学习参考]
Oct 29 Javascript
JQuery下的Live方法和$.browser方法使用代码
Jun 02 Javascript
JavaScript自定义事件介绍
Aug 29 Javascript
将HTML格式的String转化为HTMLElement的实现方法
Aug 07 Javascript
node.js中的fs.link方法使用说明
Dec 15 Javascript
JavaScript实现图片轮播的方法
Jul 31 Javascript
基于jQuery实现中英文切换导航条效果
Sep 18 Javascript
node.js爬取中关村的在线电瓶车信息
Nov 13 Javascript
微信小程序常用赋值方法小结
Apr 30 Javascript
解决Vue-cli3没有vue.config.js文件夹及配置vue项目域名的问题
Dec 04 Vue.js
js 实现验证码输入框示例详解
Sep 23 Javascript
uniapp开发打包多端应用完整方法指南
Dec 24 Javascript
通过vue提供的keep-alive减少对服务器的请求次数
Apr 01 #Javascript
vue-cli项目优化方法- 缩短首屏加载时间
Apr 01 #Javascript
vuejs项目打包之后的首屏加载优化及打包之后出现的问题
Apr 01 #Javascript
Vue项目使用CDN优化首屏加载问题
Apr 01 #Javascript
对Angular中单向数据流的深入理解
Mar 31 #Javascript
jQuery中复合选择器简单用法示例
Mar 31 #jQuery
jQuery中内容过滤器简单用法示例
Mar 31 #jQuery
You might like
PHP4 与 MySQL 数据库操作函数详解
2006/12/06 PHP
Dedecms常用函数解析
2008/02/01 PHP
PHP下编码转换函数mb_convert_encoding与iconv的使用说明
2009/12/16 PHP
PHP Array交叉表实现代码
2010/08/05 PHP
针对thinkPHP5框架存储过程bug重写的存储过程扩展类完整实例
2018/06/16 PHP
javascript 跨浏览器开发经验总结(五) js 事件
2010/05/19 Javascript
javascript基础知识大全 便于大家学习,也便于我自己查看
2012/08/17 Javascript
禁止iframe脚本弹出的窗口覆盖了父窗口的方法
2014/09/06 Javascript
cocos2dx骨骼动画Armature源码剖析(三)
2015/09/08 Javascript
JavaScript中数组的合并以及排序实现示例
2015/10/24 Javascript
轻松实现JavaScript图片切换
2016/01/12 Javascript
基于HTML模板和JSON数据的JavaScript交互(移动端)
2016/04/06 Javascript
JS简单获取当前年月日星期的方法示例
2017/02/07 Javascript
jquery.flot.js简单绘制折线图用法示例
2017/03/13 Javascript
利用js的闭包原理做对象封装及调用方法
2017/04/07 Javascript
nodeJS实现路由功能实例代码
2017/06/08 NodeJs
简单谈谈关于Angular Cli打包的事
2017/09/05 Javascript
js数组方法reduce经典用法代码分享
2018/01/07 Javascript
AngularJS实现与后台服务器进行交互的示例讲解
2018/08/13 Javascript
微信小程序实现列表的横向滑动方式
2020/07/15 Javascript
使用Vue-scroller页面input框不能触发滑动的问题及解决方法
2020/08/08 Javascript
跟老齐学Python之list和str比较
2014/09/20 Python
详解Python的Django框架中inclusion_tag的使用
2015/07/21 Python
python实现简单的单变量线性回归方法
2018/11/08 Python
使用Django xadmin 实现修改时间选择器为不可输入状态
2020/03/30 Python
CSS3 圆角效果
2009/07/15 HTML / CSS
CSS3实现DIV圆角效果完整代码
2012/10/10 HTML / CSS
JD Sports马来西亚:英国领先的运动鞋和运动服饰零售商
2018/03/13 全球购物
印度尼西亚手表和包包商店:Urban Icon
2019/12/12 全球购物
西安当代医院管理研究院笔试题
2015/12/11 面试题
往来会计岗位职责
2013/12/19 职场文书
25岁生日感言
2014/01/13 职场文书
2014新生大学四年计划书
2014/09/21 职场文书
班主任经验交流材料
2014/12/16 职场文书
自荐信格式模板
2015/03/27 职场文书
孟佩杰观后感
2015/06/17 职场文书