今天研究下如果需要缓存组件，vue提供的解决方式keep-alive
一、Keep-alive 是什么？
🍕🍕🍕内部实现的内置组件，解决的场景是 在组件切换过程中可以将状态保留在内存中，防止重复渲染 DOM，从防止重复渲染 DOM这个方面来看，是一种优化机制。
可以设置一下三个属性：
- include -字符串或正则表达式。只有名称匹配的组件才会被缓存
- exclude-字符串或正则表达式。任何名称匹配的组件都不会被缓存
- max -数字。最多可以缓存多少组件实例。
🌭🌭🌭基本用法
<keep-alive>
<component :is="view"></component>
</keep-alive>
使用 include和exclude
<keep-alive include="a,b">
<component :is="view"></component>
</keep-alive>
//正则表达式(使用v-bind)
<keep-alive :include="/a|b/">
<component :is="view"></component>
</keep-alive>
// 数组(使用v-bind)
<keep-alive>
<component is="view"></component>
</keep-alive>
🍟匹配机制 首先检查组件自身的name选项，如果name选项不可用，则匹配它的局部注册名称，匿名组件不能被匹配。
设置了keep-alive缓存的组件，会多出两个生命周期钩子，activated与deactivated
- 首次进入组件时：beforeRouteEnter>beforeCreate>created>mounted>activated>beforeRouteLeave>deactivated
- 再次进入组件时：beforeRouteEnter>activated>beforeRouteLeave>deactivated
二、使用场景
🍔当我们在某些场景下不需要让页面重新加载时我们可以使用keep-alive
例如：
首页>列表页>商品页>返回。
此时列表页是需要缓存的，按需来控制页面的 keep-alive
在路由中设置keep-alive属性判断是否缓存
{
path:'list',
name:'itemList',
component(resolve){
require(['@/pages/item/list'],resolve)
},
meta:{
keepAlive:true,
title:'列表页'
}
}
使用
<div id="app" class="">
<keep-alive>
//需要缓存的视图组件
<router-view v-if="$route.meta.keepAlive"></router-view>
// 不需要缓存的视图组件
<router-view v-if="!$route.meta.keepAlive"></router-view>
</keep-alive>
</div>
缓存后如何获取数据
两种
- beforeRouteEnter
- actived
beforeRouteEnter
🍕 每次组件渲染时，会执行此函数
beforeRouteEnter(to,from,next){
next(vm=>{
console.log(vm)
vm.getData()//获取数据
})
}
actived
在 缓存的组件被激活时，会执行 actived函数
actived(){
this.getData()
}
注意:服务器端渲染期间 actived 不被调用。
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/163279.html
