0. Intro

KeepAlive | Vue.js (vuejs.org) API reference

<KeepAlive> 是一个原生 component，让我们在动态切换多个 component 的时候能根据条件 cache component instances。

1. Basic Usage

In the Component Basics chapter, we introduced the syntax for Dynamic Components , using the <component> special element.

<component :is="activeComponent" />

默认情况下，任何 active component instance 都会在切换掉的时候被 unmount，这会导致 component 里面的 changed state 丢失。我们需要 wrap dynamic component with <KeepAlive> 来保存 state。

Creating fresh component instance on switch is normally useful behavior, but in this case, we’d really like the two component instances to be preserved even when they are inactive. To solve this problem, we can wrap our dynamic component with the <KeepAlive> built-in component.

Example

<!-- Inactive components will be cached! -->
<KeepAlive>
  <component :is="activeComponent" />
</KeepAlive>

When used in DOM templates , it should be referenced as <keep-alive>.

2. Include / Exclude

默认情况下，<KeepAlive> 会 cache 所有的 component instance，我们可以用 include 和 exclude props 来自定义。

需要自定义 cache 方式的 component 必须有 name option。

By default, <KeepAlive> will cache any component instance inside. We can customize this behavior via the include and exclude props. Both props can be a comma-delimited string, a RegExp, or an array containing either types.

Example

<!-- comma-delimited string -->
<KeepAlive include="a,b">
  <component :is="view"></component>
</KeepAlive>

<!-- regex (use `v-bind`) -->
<KeepAlive :include="/a|b/">
  <component :is="view"></component>
</KeepAlive>

<!-- Array (use `v-bind`) -->
<KeepAlive :include="['a', 'b']">
  <component :is="view"></component>
</KeepAlive>

The match is checked against the component’s name option, so components that need to be conditionally cached by KeepAlive must explicitly declare a name option.

3. Max Cached Instances

我们可以用 max prop 来限制 component instances that can be cached.

当有 max value 时， <KeepAlive> behaves like an LRU cache (达到最大值时，丢弃最老的 instance)。

if the number of cached instances is about to exceed the specified max count, the least recently accessed cached instance will be destroyed to make room for the new one.

Example

<KeepAlive :max="10">
  <component :is="activeComponent" />
</KeepAlive>

4. Lifecycle of Cached Instance

当一个 component instance 被移出 DOM 但被 cache 时，它会进入 deactivated state，而不是 unmounted。

当它从 cached tree 被插入到 DOM 时，就被激活了（activated）。

KeepAlive component 可以用 activated 和 deactivated hooks 来 register lifecycle hooks。

When a component instance is removed from the DOM but is part of a component tree cached by <KeepAlive>, it goes into a deactivated state instead of being unmounted. When a component instance is inserted into the DOM as part of a cached tree, it is activated. A kept-alive component can register lifecycle hooks for these two states using activated and deactivated hooks.

Example

export default {
  activated() {
    // called on initial mount
    // and every time it is re-inserted from the cache
  },
  deactivated() {
    // called when removed from the DOM into the cache
    // and also when unmounted
  }
}

Note

• activated is also called on mount, and deactivated on unmount.
• Both hooks work for not only the root component cached by <KeepAlive>, but also descendent components in the cached tree.