深入理解Vue keep-alive及实践总结

2023-08-16 21:34:04 71

什么是keep-alive

在平常开发中，有部分组件没有必要多次初始化，这时，我们需要将组件进行持久化，使组件的状态维持不变，在下一次展示时，也不会进行重新初始化组件。

也就是说，keepalive是Vue内置的一个组件，可以使被包含的组件保留状态，或避免重新渲染。也就是所谓的组件缓存
是Vue的内置组件，能在组件切换过程中将状态保留在内存中，防止重复渲染DOM。

包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。和相似，是一个抽象组件：它自身不会渲染一个DOM元素，也不会出现在父组件链中。

prop:

include:字符串或正则表达式。只有匹配的组件会被缓存。
exclude:字符串或正则表达式。任何匹配的组件都不会被缓存。

keep-alive的声明周期执行

页面第一次进入，钩子的触发顺序

created->mounted->activated，退出时触发deactivated

当再次进入（前进或者后退）时，只触发activated

事件挂载的方法等，只执行一次的放在mounted中；组件每次进去执行的方法放在activated中；

基本用法

被keepalive包含的组件不会被再次初始化，也就意味着不会重走生命周期函数
但是有时候是希望我们缓存的组件可以能够再次进行渲染，这时Vue为我们解决了这个问题
被包含在keep-alive中创建的组件，会多出两个生命周期的钩子:activated与deactivated：

activated当keepalive包含的组件再次渲染的时候触发
deactivated当keepalive包含的组件销毁的时候触发

keepalive是一个抽象的组件，缓存的组件不会被mounted,为此提供activated和deactivated钩子函数

参数理解

keepalive可以接收3个属性做为参数进行匹配对应的组件进行缓存:

include包含的组件(可以为字符串，数组，以及正则表达式,只有匹配的组件会被缓存)
exclude排除的组件(以为字符串，数组，以及正则表达式,任何匹配的组件都不会被缓存)
max缓存组件的最大值(类型为字符或者数字,可以控制缓存组件的个数)

注：当使用正则表达式或者数组时，一定要使用v-bind

遇见vue-router结合router使用，缓存部分页面

所有路径下的视图组件都会被缓存

如果只想要router-view里面的某个组件被缓存，怎么办？

使用include/exclude
使用meta属性

1、用include(exclude例子类似)

缺点：需要知道组件的name，项目复杂的时候不是很好的选择

2、使用meta属性

优点：不需要例举出需要被缓存组件名称

使用$route.meta的keepAlive属性：

需要在router中设置router的元信息meta：

//...router.js
exportdefaultnewRouter({
routes:[
{
path:'/',
name:'Hello',
component:Hello,
meta:{
keepAlive:false//不需要缓存
}
},
{
path:'/page1',
name:'Page1',
component:Page1,
meta:{
keepAlive:true//需要被缓存
}
}
]
})

【加盐】使用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：

exportdefault{
data(){
return{};
},
methods:{},
beforeRouteLeave(to,from,next){
//设置下一个路由的meta
to.meta.keepAlive=true;//让A缓存，即不刷新
next();
}
};

在C组件里面设置beforeRouteLeave：

exportdefault{
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优先级最高(当前vue2.4.2version)。比如：包含于排除同时匹配到了组件A，那组件A不会被缓存。
4.包含在keep-alive中，但符合exclude，不会调用activated和deactivated。

实现前进刷新，后退不刷新

感谢iceuncle分享的《vue实现前进刷新，后退不刷新》。

总结

路由大法不错，不需要关心哪个页面跳转过来的，只要router.go(-1)就能回去，不需要额外参数。

在非单页应用的时候，keep-alive并不能有效的缓存了==

keep-alive生命周期钩子函数：activated、deactivated

使用会将数据保留在内存中，如果要在每次进入页面的时候获取最新的数据，需要在activated阶段获取数据，承担原来created钩子中获取数据的任务。

附录

生命周期函数：就是vue在某个时间段会自动执行的函数

beforeCreate(){}在执行的时候，data还有methods都没有被初始化
created(){}data还有methods都被初始化好了，如果要调用methods方法或者操作data里面的数据，最早只能在created里面进行操作。
beforeMount(){}表示模板已经在内存中编辑完成了，但是尚未渲染到模板页面中。即页面中的元素，没有被真正的替换过来，只是之前写的一些模板字符串。
mounted(){}表示内存中模板已经真实的挂载到页面中去了，用户可以看到渲染好的界面了

注意这是一个生命周期函数的最后一个函数了，执行完这个函数表示整个vue实例已经初始化完成了，组件脱离了创建阶段，进入运行阶段。

下面是运行期间的两个生命周期函数的钩子：

beforeUpdate(){}表示我们的界面还没更新但是data里面的数据是最新的。即页面尚未和最新的data里面的数据保持同步。

update(){}表示页面和data里面的数据已经包吃同步了都是最新的。

beforeDestory(){}当执行这个生命周期钩子的时候vue的实例从运行阶段进入销毁阶段此时实例身上的data还有methods处于可用的状态。

Destoryed(){}表示组件已经完全被销毁了组件中所有的实例方法都是不能用了

参考：

issues#811
vue#keep-alive
vue2.0keep-alive最佳实践

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

深入理解Vue keep-alive及实践总结

热门推荐

随机推荐