本文共 1675 字，大约阅读时间需要 5 分钟。

什么是keep-alive

keep-alive是Vue提供的一个内置组件，用于在路由切换时保存组件的状态。它可以帮助开发者在切换路由时保持组件的可见状态和数据，避免重新初始化带来的状态丢失问题。

当组件使用keep-alive后，会新增两个生命周期hook：activated()和deactivated()。开发者可以在切换路由时，通过这些生命周期钩子保存组件的状态。例如，当用户从列表页面切换到详情页面时，可以通过keep-alive保存列表滚动的位置；反之，当用户返回列表页面时，可以通过keep-alive恢复之前的滚动位置。

简单理解

在路由切换过程中，keep-alive可以用来控制哪些组件需要缓存。例如：

• 从首页进入列表页，列表页进入详情页，详情页返回列表页（需要缓存），再返回首页（需要缓存），最后再次进入列表页（不需要缓存）。这种情况下，keep-alive可以灵活地控制哪些组件需要缓存。

参数理解

keep-alive组件接收三个参数用于匹配对应的组件进行缓存：

• include：指定需要缓存的组件，可以是单个组件名称、数组或正则表达式。如果匹配的组件满足条件，则会被缓存。
• exclude：指定不需要缓存的组件，可以是单个组件名称、数组或正则表达式。如果匹配的组件满足条件，则不会被缓存。
• max：设置缓存组件的最大数量，可以控制缓存组件的个数。

注意事项

当使用正则表达式或数组时，必须使用v-bind语法来确保组件匹配正确。

代码示例

例如，只缓存组件名称为"a"或"b"的组件：

或者，排除组件名称为"c"的组件：

如果同时使用include和exclude，那么exclude具有优先级。例如，include设置为"a,b"，exclude设置为"b"，那么只缓存组件"a"。

此外，如果缓存的组件数量超过max设定的值，则会移除最早缓存的组件。

配合router使用

在路由切换时，keep-alive可以与router-view组件结合使用。将router-view包裹在keep-alive中，则所有路径匹配到的视图组件都会被缓存。

示例

这种方式下，所有路由视图组件都会被缓存。例如，首页、列表页和详情页都会被缓存，直到被替换或刷新。

如何只缓存router-view中的某个组件

如果需要控制router-view中某个特定组件的缓存，可以通过以下方式：

• 使用include和exclude
• 使用meta属性

1. 使用include和exclude

例如，只缓存名称为"a"的组件：

这样，匹配到名称为"a"的组件会被缓存，其他组件不会。

2. 使用meta属性

在路由配置中，可以通过meta属性指定是否需要缓存。例如：

这样，配置meta.keepAlive为true的组件会被缓存，false的组件不会。

组合使用

可以将meta属性和keep-alive组件一起使用。例如：

这样，只有配置了keepAlive为true的组件会被缓存。

小结

1. keep-alive主要通过匹配组件的名称来决定是否缓存。如果组件名称不可用，则会匹配组件的注册名称。

2. keep-alive组件在函数式组件中通常不会正常工作，因为函数式组件没有实例缓存。

3. 如果同时使用include和exclude，exclude具有优先级。例如，既在include中匹配到了组件A，又在exclude中匹配到了组件A，那么组件A不会被缓存。

4. 在keep-alive组件中被排除的组件不会调用activated和deactivated生命周期hook。

转载地址：http://zhue.baihongyu.com/