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 相关文章推荐
javascript 文档的编码问题解决
Mar 01 Javascript
javascript 写类方式之三
Jul 05 Javascript
封装的原生javascript弹出层代码
Sep 24 Javascript
JavaScript File API文件上传预览
Feb 02 Javascript
jQuery的层级查找方式分析
Jun 16 Javascript
解决拦截器对ajax请求的拦截实例详解
Dec 21 Javascript
jQuery实现搜索页面关键字的功能
Feb 16 Javascript
AngularJS创建一个上传照片的指令实例代码
Feb 24 Javascript
js正则取值的结果数组调试方法
Oct 10 Javascript
vue 组件销毁并重置的实现
Jan 13 Javascript
js实现选项卡效果
Mar 07 Javascript
详解JavaScript 高阶函数
Sep 14 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
强烈推荐:php.ini中文版(2)
2006/10/09 PHP
比较全面的PHP数组的使用方法小结
2010/09/23 PHP
gd库图片下载类实现下载网页所有图片的php代码
2012/08/20 PHP
Yii配置文件用法详解
2014/12/04 PHP
Yii Framework框架开发微信公众平台示例
2020/04/26 PHP
HR vs ForZe BO3 第二场 2.13
2021/03/10 DOTA
javascript 函数调用的对象和方法
2010/07/01 Javascript
原生javascript获取元素样式属性值的方法
2010/12/25 Javascript
jQuery对象数据缓存Cache原理及jQuery.data方法区别介绍
2013/04/07 Javascript
JS Jquery 遍历,筛选页面元素 自动完成(实现代码)
2013/07/08 Javascript
js代码实现无缝滚动(文字和图片)
2015/08/20 Javascript
深入理解js promise chain
2016/05/05 Javascript
Javascript中浏览器窗口的基本操作总结
2016/08/18 Javascript
总结Javascript中数组各种去重的方法
2016/10/04 Javascript
AngularJS入门示例之Hello World详解
2017/01/04 Javascript
javascript 中关于array的常用方法详解
2017/05/05 Javascript
如何解决vue2.0下IE浏览器白屏问题
2018/09/13 Javascript
小程序实现五星点评效果
2018/11/03 Javascript
详解使用uni-app开发微信小程序之登录模块
2019/05/09 Javascript
通过javascript实现段落的收缩与展开
2019/06/26 Javascript
2019年度web前端面试题总结(主要为Vue面试题)
2020/01/12 Javascript
详解JavaScript作用域、作用域链和闭包的用法
2020/09/03 Javascript
[01:20]PWL开团时刻DAY9——听说潮汐没用?
2020/11/10 DOTA
Python实现获取前100组勾股数的方法示例
2018/05/04 Python
Python 存储字符串时节省空间的方法
2019/04/23 Python
使用python库xlsxwriter库来输出各种xlsx文件的示例
2020/09/01 Python
用 Django 开发一个 Python Web API的方法步骤
2020/12/03 Python
CSS3文本换行word-wrap解决英文文本超过固定宽度不换行
2013/10/10 HTML / CSS
白宫黑市官网:White House Black Market
2016/11/17 全球购物
手工制作的意大利皮革运动鞋:KOIO
2020/01/05 全球购物
法律七进实施方案
2014/03/15 职场文书
课前一分钟演讲稿
2014/08/26 职场文书
竞选学委演讲稿
2014/09/13 职场文书
地雷战观后感
2015/06/09 职场文书
在职证明书模板
2015/06/15 职场文书
关于空气污染危害的感想
2015/08/11 职场文书