保留组件状态，避免重新渲染

缓存不活动的组件实例
，能在组件切换过程中将状态保留在内存中，防止重复渲染DOM。
生命周期用的是
激活/停用
activated
deactivated
include 字符串或正则表达式，只有名称匹配的组件会被缓存
exclude 字符串或正则表达式，任何名称匹配的组件都不会被缓存
max 数字，最多可以缓存多少组件实例

<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>

<keep-alive :include="/a|b/">
//使用正则表达式，需使用v-bind<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>

结合router-view使用

<keep-alive><router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive"></router-view>
//router.js
export default new Router({routes: [{path: '/',name: 'Hello',component: Hello,meta: {keepAlive: false // 不需要缓存}},{path: '/page1',name: 'Page1',component: Page1,meta: {keepAlive: true // 需要被缓存}}]
})

如何解决keep-alive缓存

第一种

keep-alive生命周期钩子函数：activated、deactivated
activated： 页面第一次进入的时候，钩子触发的顺序是created->mounted->activated
deactivated:  页面退出的时候会触发deactivated，当再次前进或者后退的时候只触发activated使用<keep-alive>会将数据保留在内存中，
如果要在每次进入页面的时候获取最新的数据，
需要在activated阶段获取数据，
承担原来created钩子中获取数据的任务

第二种

{path: '/',name: 'A',component: A,meta: {keepAlive: true // 需要被缓存}
}export default {data() {return {};},methods: {},beforeRouteLeave(to, from, next) {// 设置下一个路由的 metato.meta.keepAlive = true;  // B 跳转到 A 时，让 A 缓存，即不刷新next();}
};export default {data() {return {};},methods: {},beforeRouteLeave(to, from, next) {// 设置下一个路由的 metato.meta.keepAlive = false; // C 跳转到 A 时让 A 不缓存，即刷新next();}
};

第三种

每次组件渲染的时候，都会执行beforeRouteEnter
beforeRouteEnter(to, from, next){next(vm=>{console.log(vm)// 每次进入路由执行vm.getData()  // 获取数据})
},

源码层面的理解

keep-alive属性及生命周期相关推荐

maven scope 属性和生命周期
2019独角兽企业重金招聘Python工程师标准>>> maven的dependency参数 scope的分类 1.compile:默认值他表示被依赖项目需要参与当前项目的编译,还 ...
Vue第四章过滤器、组件、插槽、props组件属性、生命周期、监听器(内含详细代码解释)
目录一.过滤器二.组件三.插槽四.props组件属性五.生命周期六.监听器每日一句一.过滤器新的配置项 filters: 用于存放过滤器, 配合 {{ value | 过滤器 }} ...
Vue01 vue基础、mvvm、ES6z知识点、计算属性、生命周期
Vue案例: <body> <div id="app"><fieldset><legend>inf ...
vue实践学习——keep-alive属性及生命周期
通过上一篇博客,大家已经熟知keep-alive是什么作用的组件以及其简单应用,那么接下来再来进一步的了解一下keep-alive props:官网链接https://cn.vuejs.org/v2/ ...
你还在问android横竖屏切换的生命周期？
本文原创,转载请注明来自xiaoQLu http://www.cnblogs.com/xiaoQLu/p/3324503.html 开源帮助android获得了飞速的发展,开源也导致了数不清的碎片问题 ...
ViewController的生命周期分析和使用
iOS的SDK中提供很多原生ViewController,大大提高了我们的开发效率,下面是我的一些经验. 一.结构按结构可以对iOS的所有ViewController分成两类: 1.主要用于展示内容 ...
viewController的生命周期
一.结构按结构可以对iOS的所有ViewController分成两类: 1.主要用于展示内容的ViewController,这种ViewController主要用于为用户展示内容,并与用户交互,如U ...
ts watch路由参数变化_TypeScript基础（六）：TS 在 Vue 中的用法，data，生命周期，methods，computed，props，watch，$emit...
其实 ts 在 vue 的环境下,我们经常用的一个东西就是上一篇博客讲的装饰器. 装饰器一般情况下有三种用途: 1,装饰整个类. 2,装饰某一个方法. 3,装饰某一个属性. 而这三种用途对 vue 来 ...
秒懂SpringBoot之Spring对象生命周期与扩展点浅尝辄止
[版权申明] 非商业目的注明出处可自由转载出自:shusheng007 文章目录概述 Bean的生命周期感受Bean生命周期具体说明扩展点容器级扩展点对象级扩展点多一点总结概述 I ...

keep-alive属性及生命周期

保留组件状态，避免重新渲染

结合router-view使用

如何解决keep-alive缓存

第一种

第二种

第三种

源码层面的理解

keep-alive属性及生命周期相关推荐

最新文章

热门文章