A brief summary of vue keep-alive

1. Function

Mainly used to preserve component state or avoid re-rendering.

2. Usage

<keep-alive> When wrapping a dynamic component, inactive component instances are cached instead of being destroyed.

<keep-alive> is an abstract component: it does not render a DOM element itself, nor does it appear in the component's parent chain.

When a component is switched within <keep-alive>, its activated and deactivated lifecycle hook functions will be executed accordingly.

3. Props

include

include - a string or a regular expression. Only components with matching names will be cached.

exclude

exclude - a string or regular expression. Any components with matching names will not be cached.

The include and exclude props allow components to be conditionally cached. Both can be expressed as a comma-delimited string, a regular expression, or an array:

<!-- Comma separated string -->
<keep-alive include="a,b">
 <component :is="view"></component>
</keep-alive>

<!-- Regular expression (using `v-bind`) -->
<keep-alive :include="/a|b/">
 <component :is="view"></component>
</keep-alive>

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

Matching is first checked against the component's own name option, or if that is not available, against its locally registered name (the value of the parent component's components option key). Anonymous components cannot be matched.

max

max : a number. The maximum number of component instances that can be cached.

Once this number is reached, the cached component instance that has not been accessed in the longest time will be destroyed before a new instance is created.

<keep-alive :max="10">
 <component :is="view"></component>
</keep-alive>

The above is a brief analysis of the details of keep-alive in vue. For more information about keep-alive in vue, please pay attention to other related articles on 123WORDPRESS.COM!