keep-alive组件的作用

最新推荐文章于 2024-10-02 23:10:36 发布

理论帝

最新推荐文章于 2024-10-02 23:10:36 发布

阅读量407

点赞数

分类专栏：笔记文章标签： vue.js

本文链接：https://blog.csdn.net/weixin_47400344/article/details/111508976

版权

本文介绍了Vue.js中的keep-alive组件，用于在组件切换时保持组件状态。通过使用keep-alive，可以避免组件被卸载并重新加载，从而实现页面状态的保留。文章详细阐述了使用keep-alive的原因，其作用以及包括include、exclude和max在内的属性配置。同时，还提到了组件的activated和deactivated生命周期钩子，这两个钩子在组件激活和非激活状态时触发，帮助开发者处理状态管理和逻辑处理。

摘要由CSDN通过智能技术生成

1. keep-alive组件的作用

1.为什么使用keep-alive？

在Vue中，我们使用component内置组件或者vue-router切换视图的时候，由于Vue会主动卸载不使用的组件，所以我们不能保存组件之前的状态，而我们经常能遇到需要保存之前状态的需求，例如搜索页（保存搜索记录），列表页（保存之前的浏览记录）等等

2.keep-alive的作用？

keep-alive是一个Vue的内置组件，它能将不活动的组件保存下来，而不是直接销毁，当我们再次访问这个组件的时候，会先从keep-alive中存储的组件中寻找，如果有缓存的话，直接渲染之前缓存的，如果没有的话，再加载对应的组件。
作为抽象组件，keep-alive是不会直接渲染在DOM中的

3.keep-alive的属性？

keep-alive提供了三个可选属性

1.include - 字符串或数组或正则表达式。只有名称匹配的组件会被缓存。

	 // **字符串**只缓存a组件
 <keep-alive include="a">
       <component :is="componentName"></component>
 </keep-alive>
 // **字符串**只缓存a组件和b组件
 <keep-alive include="a,b">
       <component :is="componentName">