A Brief Summary of vue keep alive

1. Role

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

2. Usage

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

　　 < keep-alive > Is an abstract component: It does not render an DOM element by itself, nor does it appear in the parent chain of the component.

When the component is in the < keep-alive > Is switched, its activated and deactivated lifecycle hook functions will be executed correspondingly.

3. Props

include

include-A string or regular expression. Only components with matching names are cached.

exclude

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

include and exclude prop allow components to be cached conditionally. Both of them can be represented by comma-separated strings, regular expressions, or an array:

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

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

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

Matching first checks the component's own name option, and if the name option is not available, matches its local registration name (the key value of the parent component's components option). Anonymous components cannot be matched.

max

max-Digital. How many component instances can be cached at most.

Once this number is reached, the longest unaccessed instances of the cached component are destroyed before a new instance is created.

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

The above is the detailed content of keep-alive in vue. Please pay attention to other related articles on this site for more information about keep-alive in vue!