vue中keep-alive组件
1、介绍
keep-alive是vue内置组件,keep-alive包裹动态组件component时,会缓存不活动的组件,而不是销毁,在组件切换的时候将状态保留在内存中,防止重复渲染DOM
2、属性
可以通过include/exclude指定组件名的方式指定需要被缓存或者被排除的组件,include/exclude可以直接直接传入英文逗号分隔的字符串,也可以使用v-bind绑定正则表达式或数组
max:指定最大缓存数
3、vue2和vue3的区别
结合vue-router时,在vue3中时router-view包裹keep-alive,而在vue2中是keep-alive包裹router-view
4、缓存后如何获取数据
方案一:使用组件内的路由守卫beforeRouteEnter,因为进入路由前都会触发路由导航守卫
方案二:使用actived钩子,因为在keep-alive缓存的组件被激活的时候都会触发actived钩子