keep-alive
在日常开发中,有部分组件没有必要屡次初始化,这时,咱们须要将组件进行持久化,使组件的状态维持不变,在下一次展现时,也不会进行从新初始化组件。html
也就是说,keepalive
是 Vue
内置的一个组件,能够使被包含的组件保留状态,或避免从新渲染 。也就是所谓的组件缓存vue
<keep-alive>
是Vue的内置组件,能在组件切换过程当中将状态保留在内存中,防止重复渲染DOM。git
<keep-alive>
包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们。和<transition>
类似,<keep-alive>
是一个抽象组件:它自身不会渲染一个DOM
元素,也不会出如今父组件链中。github
prop:正则表达式
keep-alive
的声明周期执行created-> mounted-> activated
,
退出时触发 deactivated
当再次进入(前进或者后退)时,只触发 activated
vue-router
mounted
中;组件每次进去执行的方法放在 activated
中;<!--被keepalive包含的组件会被缓存-->
<keep-alive>
<component><component />
</keep-alive>
复制代码
被keepalive
包含的组件不会被再次初始化,也就意味着不会重走生命周期函数
可是有时候是但愿咱们缓存的组件能够可以再次进行渲染,这时 Vue
为咱们解决了这个问题 被包含在 keep-alive
中建立的组件,会多出两个生命周期的钩子: activated
与 deactivated
:segmentfault
activated
当 keepalive
包含的组件再次渲染的时候触发deactivated
当 keepalive
包含的组件销毁的时候触发keepalive
是一个抽象的组件,缓存的组件不会被 mounted
,为此提供activated
和deactivated
钩子函数api
keepalive
能够接收3个属性作为参数进行匹配对应的组件进行缓存:数组
include
包含的组件(能够为字符串,数组,以及正则表达式,只有匹配的组件会被缓存)缓存
exclude
排除的组件(觉得字符串,数组,以及正则表达式,任何匹配的组件都不会被缓存)
max
缓存组件的最大值(类型为字符或者数字,能够控制缓存组件的个数)
注:当使用正则表达式或者数组时,必定要使用 v-bind
<!-- 将(只)缓存组件name为a或者b的组件, 结合动态组件使用 -->
<keep-alive include="a,b">
<component></component>
</keep-alive>
<!-- 组件name为c的组件不缓存(能够保留它的状态或避免从新渲染) -->
<keep-alive exclude="c">
<component></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>
<!-- 若是同时使用include,exclude,那么exclude优先于include, 下面的例子只缓存a组件 -->
<keep-alive include="a,b" exclude="b">
<component></component>
</keep-alive>
<!-- 若是缓存的组件超过了max设定的值5,那么将删除第一个缓存的组件 -->
<keep-alive exclude="c" max="5">
<component></component>
</keep-alive>
复制代码
vue-router
结合router
使用,缓存部分页面<keep-alive>
<router-view>
<!-- 全部路径匹配到的视图组件都会被缓存! -->
</router-view>
</keep-alive>
复制代码
router-view
里面的某个组件被缓存,怎么办?include
/exclude
meta
属性一、用 include
(exclude
例子相似)
缺点:须要知道组件的 name,项目复杂的时候不是很好的选择
<keep-alive include="a">
<router-view>
<!-- 只有路径匹配到的 include 为 a 组件会被缓存 -->
</router-view>
</keep-alive>
复制代码
二、使用 meta 属性
优势:不须要例举出须要被缓存组件名称
使用$route.meta的keepAlive属性:
<keep-alive>
<router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive"></router-view>
复制代码
须要在router
中设置router的元信息meta:
//...router.js
export default new Router({
routes: [
{
path: '/',
name: 'Hello',
component: Hello,
meta: {
keepAlive: false // 不须要缓存
}
},
{
path: '/page1',
name: 'Page1',
component: Page1,
meta: {
keepAlive: true // 须要被缓存
}
}
]
})
复制代码
假设这里有 3 个路由: A、B、C。
需求:
实现方式
{
path: '/',
name: 'A',
component: A,
meta: {
keepAlive: true // 须要被缓存
}
}
复制代码
export default {
data() {
return {};
},
methods: {},
beforeRouteLeave(to, from, next) {
// 设置下一个路由的 meta
to.meta.keepAlive = true; // 让 A 缓存,即不刷新
next();
}
};
复制代码
export default {
data() {
return {};
},
methods: {},
beforeRouteLeave(to, from, next) {
// 设置下一个路由的 meta
to.meta.keepAlive = false; // 让 A 不缓存,即刷新
next();
}
};
复制代码
这样便能实现 B 回到 A,A 不刷新;而 C 回到 A 则刷新。
1.keep-alive
先匹配被包含组件的 name
字段,若是 name
不可用,则匹配当前组件 components
配置中的注册名称。 2.keep-alive
不会在函数式组件中正常工做,由于它们没有缓存实例。
3.当匹配条件同时在 include
与 exclude
存在时,以 exclude
优先级最高(当前vue 2.4.2 version)。好比:包含于排除同时匹配到了组件A,那组件A不会被缓存。
4.包含在 keep-alive
中,但符合 exclude
,不会调用 activated
和 deactivated
。
感谢 iceuncle 分享的 《vue实现前进刷新,后退不刷新》。
路由大法不错,不须要关心哪一个页面跳转过来的,只要 router.go(-1) 就能回去,不须要额外参数。
在非单页应用的时候,keep-alive
并不能有效的缓存了= =
keep-alive生命周期钩子函数:activated、deactivated
使用<keep-alive>
会将数据保留在内存中,若是要在每次进入页面的时候获取最新的数据,须要在activated
阶段获取数据,承担原来created
钩子中获取数据的任务。
beforeCreate(){}
在执行的时候,data还有methods都没有被初始化
created(){}
data还有methods都被初始化好了,若是要调用 methods
方法或者操做 data
里面的数据,最先只能在 created
里面进行操做。
beforeMount(){}
表示模板已经在内存中编辑完成了,可是还没有渲染到模板页面中。即页面中的元素,没有被真正的替换过来,只是以前写的一些模板字符串。
mounted(){}
表示内存中模板已经真实的挂载到页面中去了,用户能够看到渲染好的界面了
注意这是一个生命周期函数的最后一个函数了,执行完这个函数表示 整个vue实例已经初始化完成了,组件脱离了建立阶段,进入运行阶段。
下面是运行期间的两个生命周期函数的钩子:
beforeUpdate(){}
表示咱们的界面还没更新 可是data里面的数据是最新的。即页面还没有和最新的data里面的数据保持同步。
updated(){}
表示页面和data里面的数据已经包吃同步了 都是最新的。
beforeDestory(){}
当执行这个生命周期钩子的时候 vue的实例从运行阶段进入销毁阶段 此时实例身上的data 还有 methods处于可用的状态。
destoryed(){}
表示组件已经彻底被销毁了 组件中全部的实例方法都是不能用了