前言
在 vuejs
中,我们经常需要缓存一些组件的状态,比如用户登录后,切换到其他页面,再切换回来,需要保留之前的登录状态,而不是重新登录。
或者在切换不同组件的时候,需要保留之前的组件状态,而不是重新加载。如果你什么都不设置
你会发现,之前已更改的状态都被重置了。
在切换时创建新的组件实例通常是有意义的,但在有些情况下,我们的确想要组件能在被“切走”的时候保留它们的状态。要解决这个问题,我们可以用 <KeepAlive>
内置组件将这些动态组件包装起来
代码示例
<!-- 非活跃的组件将会被缓存! -->
<KeepAlive>
<component :is="activeComponent" />
</KeepAlive>
包含(include)与排除(exclude)
<KeepAlive>
默认会缓存内部的所有组件实例,但我们可以通过 include
和 exclude
的prop
来控制组件的缓存与不缓存的。这两个 prop
的值都可以是一个以英文逗号分隔的字符串、一个正则表达式,或是包含这两种类型的一个数组
<!-- 以英文逗号分隔的字符串,a,b代表的是组件 -->
<KeepAlive include="a,b">
<component :is="view" />
</KeepAlive>
<!-- 正则表达式 (需使用 `v-bind`) -->
<KeepAlive :include="/a|b/">
<component :is="view" />
</KeepAlive>
<!-- 数组 (需使用 `v-bind`),如果有多个,可以用一个数组 -->
<KeepAlive :include="['a', 'b']">
<component :is="view" />
</KeepAlive>
它会根据组件的 name
选项进行匹配,所以组件如果想要条件性地被 KeepAlive
缓存,就必须显式声明一个 name
选项
注意事项
使用<script setup>
的单文件组件会自动根据文件名生成对应的 name
选项,无需再手动声明
![09ce05f1da4a4e16a4ee51e85324a3ed.jpeg](https://i-blog.csdnimg.cn/blog_migrate/cf32e00f26c42793483a26ff319d8e37.jpeg)
![161a6e4088c09c9dae83766228935b8a.jpeg](https://i-blog.csdnimg.cn/blog_migrate/79d9cc50189f3b7dd9071ad5736f10d5.jpeg)
vue3+vite安装element-plus报错解决-使用组件不起作用
![a1b047920cc29b81d45c8676a5655300.jpeg](https://i-blog.csdnimg.cn/blog_migrate/2dbc1f0a603a050beaff99fce55696e2.jpeg)
![5eb8baf6bd2a6de2d38cc2fad67bd4c6.jpeg](https://i-blog.csdnimg.cn/blog_migrate/003d203970f9420dc80606a20e74eeaf.jpeg)
![98e51bfde066aa70358ba8e674f008bb.jpeg](https://i-blog.csdnimg.cn/blog_migrate/7a3992207e1923741e1a053cd2f64d7f.jpeg)
![5d4a8fcefef918ea632cf74c98c81a99.jpeg](https://i-blog.csdnimg.cn/blog_migrate/973299961dd8be4b58542a0c785c59e3.jpeg)
![875196e8a369dc67ad0252eaedb0448e.jpeg](https://i-blog.csdnimg.cn/blog_migrate/94b350c8de44826707038a4be9042911.jpeg)