深入理解与使用keep-alive(配合router-view缓存整个路由页面)

2023-09-07 23:37:04 67

在搭建vue项目时，有某些组件没必要多次渲染，所以需要将组件在内存中进行‘持久化'，此时便可以派上用场了。可以使被包含的组件状态维持不变，即便是组件切换了，其内的状态依旧维持在内存之中。在下一次显示时，也不会重现渲染。

PS：与相似，只是一个抽象组件，它不会在DOM树中渲染(真实或者虚拟都不会)，也不在父组件链中存在，比如：你永远在this.$parent中找不到keep-alive。

1.keep-alive的基础使用

最基础的一般是结合动态组件去使用：





newVue({
el:'#app',
data(){
return{
currentView:Test//Test为引入的子组件
}
}
})

不过此种方式并无太大的实用意义。

2.生命周期钩子

被包含在中创建的组件，会多出两个生命周期的钩子:activated与deactivated

activated

在组件被激活时调用，在组件第一次渲染时也会被调用，之后每次keep-alive激活时被调用。

deactivated

在组件被停用时调用。

注意：只有组件被keep-alive包裹时，这两个生命周期才会被调用，如果作为正常组件使用，是不会被调用，以及在2.1.0版本之后，使用exclude排除之后，就算被包裹在keep-alive中，这两个钩子依然不会被调用！另外在服务端渲染时此钩子也不会被调用的。

3.配合router-view使用

有些时候可能需要将整个路由页面一切缓存下来，也就是将进行缓存。这种使用场景还是蛮多的。

在vue2.1.0之前，大部分是这样实现的：







//router配置
newRouter({
routes:[
{
name:'a',
path:'/a',
component:A,
meta:{
keepAlive:true
}
},
{
name:'b',
path:'/b',
component:B
}
]
})

这样配置路由的路由元信息之后，a路由的$router.meta.keepAlive便为true，而b路由则为false。
所以为true的将被包裹在keep-alive中，为false的则在外层。这样a路由便达到了被缓存的效果，如果还有想要缓存的路由，只需要在路由元中加入keepAlive:true即可。

4.在2.1.0版本之后

在vue2.1.0版本之后，keep-alive新加入了两个属性:include(包含的组件缓存生效)与exclude(排除的组件不缓存，优先级大于include)。

include和exclude属性允许组件有条件地缓存。二者都可以用逗号分隔字符串、正则表达式或一个数组来表示。
当使用正则或者是数组时，一定要使用v-bind!

有了include之后，再与router-view一起使用时便方便许多了:

5.需要注意的地方

先匹配被包含组件的name字段，如果name不可用，则匹配当前组件componetns配置中的注册名称。
不会在函数式组件中正常工作，因为它们没有缓存实例。
当匹配条件同时在include与exclude存在时，以exclude优先级最高(当前vue2.4.2version)。比如：包含于排除同时匹配到了组件A，那组件A不会被缓存。
包含在中，但符合exclude，不会调用activated和deactivated。

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

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

深入理解与使用keep-alive(配合router-view缓存整个路由页面)

热门推荐

随机推荐