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数字格式化通用类 accounting.js使用
Aug 24 Javascript
关于JS管理作用域的问题
Apr 10 Javascript
关于jquery中全局函数each使用介绍
Dec 10 Javascript
图片翻转效果具体实现代码
Jan 09 Javascript
window resize和scroll事件的基本优化思路
Apr 29 Javascript
简介JavaScript中valueOf()方法的使用
Jun 05 Javascript
javascript禁止访客复制网页内容的实现代码
Aug 05 Javascript
模仿password输入框的实现代码
Jun 07 Javascript
js实现自定义进度条效果
Mar 15 Javascript
Vue2几种常见开局方式详解
Sep 09 Javascript
JS实现鼠标拖拽盒子移动及右键点击盒子消失效果示例
Jan 29 Javascript
详解JS预解析原理
Jun 16 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数据库类
2009/05/27 PHP
谷歌音乐搜索栏的提示功能php修正代码
2011/05/09 PHP
PHP实现自动对图片进行滚动显示的方法
2015/03/12 PHP
php字符串分割函数用法实例
2015/03/17 PHP
PHPExcel简单读取excel文件示例
2016/05/26 PHP
Laravel模型事件的实现原理详解
2018/03/14 PHP
PHP实现单条sql执行多个数据的insert语句方法
2019/10/11 PHP
仅IE不支持setTimeout/setInterval函数的第三个以上参数
2011/05/25 Javascript
JS字符串截取函数实例
2013/12/27 Javascript
原生JavaScript+LESS实现瀑布流
2014/12/12 Javascript
javascript运算符语法全面概述
2016/07/14 Javascript
AngularJS实现DOM元素的显示与隐藏功能
2016/11/22 Javascript
深入理解vue-loader如何使用
2017/06/06 Javascript
详解vue-router 路由元信息
2017/09/13 Javascript
JS判断数组四种实现方法详解
2020/06/29 Javascript
Python变量和数据类型详解
2017/02/15 Python
python爬虫爬取快手视频多线程下载功能
2018/02/28 Python
Python中staticmethod和classmethod的作用与区别
2018/10/11 Python
你正在寻找的CSS3 动画技术
2011/07/27 HTML / CSS
详解Html5 监听拦截Android返回键方法
2018/04/18 HTML / CSS
迪卡侬荷兰官网:Decathlon荷兰
2017/10/29 全球购物
Etam艾格英国官网:法国著名女装品牌
2019/04/15 全球购物
Calphalon美国官网:美国顶级锅具品牌
2020/02/05 全球购物
面试求职的个人自我评价
2013/11/16 职场文书
茶叶店创业计划书范文
2014/01/19 职场文书
环境整治工作方案
2014/05/18 职场文书
施工安全承诺书
2014/05/22 职场文书
寻找最美家庭活动方案
2014/08/20 职场文书
法院四风对照检查材料思想汇报
2014/10/06 职场文书
党员专题组织生活会发言材料
2014/10/17 职场文书
2014年小学安全工作总结
2014/12/04 职场文书
副总经理岗位职责范本
2015/04/08 职场文书
爱的教育读书笔记
2015/06/26 职场文书
详细了解MVC+proxy
2021/07/09 Java/Android
python字符串的一些常见实用操作
2022/04/06 Python
彻底弄懂Python中的回调函数(callback)
2022/06/25 Python