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 相关文章推荐
前端开发部分总结[兼容性、DOM操作、跨域等](持续更新)
Mar 04 Javascript
A标签触发onclick事件而不跳转的多种解决方法
Jun 27 Javascript
谈谈JavaScript中function多重理解
Aug 28 Javascript
第七章之菜单按钮图标组件
Apr 25 Javascript
全面接触神奇的Bootstrap导航条实战篇
Aug 01 Javascript
JavaScript实现清空(重置)文件类型INPUT元素值的方法
Nov 17 Javascript
javascript中href和replace的比较(详解)
Nov 25 Javascript
浅谈vue中数据双向绑定的实现原理
Sep 14 Javascript
基于JavaScript实现表格隔行换色
May 08 Javascript
ES2020系列之空值合并运算符 '??'
Jul 22 Javascript
深入浅析React中diff算法
May 19 Javascript
vue中利用mqtt服务端实现即时通讯的步骤记录
Jul 01 Vue.js
通过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
一个阿拉伯数字转中文数字的函数
2006/10/09 PHP
PHP 八种基本的数据类型小结
2011/06/01 PHP
destoon复制新模块的方法
2014/06/21 PHP
PHP扩展模块memcached长连接使用方法分析
2014/12/24 PHP
extjs fckeditor集成代码
2009/05/10 Javascript
javascript入门基础之私有变量
2010/02/23 Javascript
jquery 模拟类搜索框自动完成搜索提示功能(改进)
2010/05/24 Javascript
动态加载脚本提升javascript性能
2014/02/24 Javascript
IE中JS跳转丢失referrer问题的2个解决方法
2014/07/18 Javascript
javascript正则表达式之search()用法实例
2015/01/19 Javascript
JS实现点击文字对应DIV层不停闪动效果的方法
2015/03/02 Javascript
jQuery解析XML与传统JavaScript方法的差别实例分析
2015/03/05 Javascript
jQuery子窗体取得父窗体元素的方法
2015/05/11 Javascript
js+css实现文字散开重组动画特效代码分享
2015/08/21 Javascript
jquery实现二级导航下拉菜单效果
2015/12/18 Javascript
jQuery联动日历的实例解析
2016/12/02 Javascript
微信小程序基于slider组件动态修改标签透明度的方法示例
2017/12/04 Javascript
JS判断用户用的哪个浏览器实例详解
2018/10/09 Javascript
小程序如何定位所在城市及发起周边搜索
2020/02/11 Javascript
JavaScript实现京东快递单号查询
2020/11/30 Javascript
[04:21]狐狸妈带你到现场 DOTA2 TI中国区预选赛线下赛路线指引
2014/05/22 DOTA
Python遍历目录并批量更换文件名和目录名的方法
2016/09/19 Python
Python+tkinter使用80行代码实现一个计算器实例
2018/01/16 Python
Python 实现使用dict 创建二维数据、DataFrame
2018/04/13 Python
Python3.5常见内置方法参数用法实例详解
2019/04/29 Python
FFrpc python客户端lib使用解析
2019/08/24 Python
python matplotlib如何给图中的点加标签
2019/11/14 Python
Python 操作 PostgreSQL 数据库示例【连接、增删改查等】
2020/04/21 Python
HTML5中判断用户是否正在浏览页面的方法
2014/05/03 HTML / CSS
阿根廷旅游网站:almundo阿根廷
2018/02/12 全球购物
总经理文秘岗位职责
2014/02/03 职场文书
县政府办公室领导班子对照检查材料思想汇报
2014/09/28 职场文书
2015年扫黄打非工作总结
2015/05/13 职场文书
python基于OpenCV模板匹配识别图片中的数字
2021/03/31 Python
分位数回归模型quantile regeression应用详解及示例教程
2021/11/02 Python
Spring中的@Transactional的工作原理
2022/06/05 Java/Android