Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”

This article also participated in the “Digitalstar Project” to win a creative gift package and creative incentive money

preface

Hello everyone, today I’m going to share with you a built-in component in Vue about component caching – Keep-Alive

Don’t know if friends have encountered such a situation, in our project development, sometimes use a pop-up box for some form submission, but sometimes fill in the fill the mouse don’t be careful the pop-up box blank place, cause the pop-up box is closed, when again to open the pop-up box, find the information before all gone, I mean, did you just lose your cool. This is where our built-in keep-Alive component comes in handy. Let’s take a look at what keep-Alive does and how it works.

Keep – what is alive

Keep-alive is a built-in abstract component that does not render a DOM element on its own and does not appear in the parent component chain; When a dynamic component is wrapped with keep-alive, inactive component instances are cached rather than destroyed.

Keep-alive is primarily used to preserve component state or avoid re-rendering. That is, if A component A is wrapped by keep-alive, component A will not be destroyed but cached after I switch component B. When we switch back to component A again, the data in component A will still be returned and will not be re-initialized.

Keep – the use of the alive

The use of keep-alive is also very simple. It can be used to wrap dynamic components or a router-view.

<! Wrap dynamic Components -->
<keep-alive>
  <component :is="view"></component>
</keep-alive>
<! - package router - the view - >
<keep-alive>
  <router-view></router-view>
</keep-alive>
Copy the code

These are the basic uses of keep-alive. Keep-alive also provides three attributes: include, exclude, and Max

  • Include: string, array, or regular expression. Only components with matching names are cached.
  • Exclude: indicates a string, array, or regular expression. Any component with a matching name will not be cached.
  • Max: number, maximum number of component instances that can be cached.

Include and Exclude Prop allow components to cache conditionally. Both can be represented as comma-delimited strings, regular expressions, or an array. A match is first checked for the component’s own name option, and if the name option is not available, its locally registered name (the key value of the parent component’s components option) is matched. The anonymous component could not be matched.

  • The view will only be cached if it is a or B
<! -- comma-separated string -->
<keep-alive include="a,b">
  <component :is="view"></component>
</keep-alive>

<! -- Regular expressions (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>
Copy the code
  • Components A and B are not cached
<! -- comma-separated string -->
<keep-alive include="a,b">
  <component :is="view"></component>
</keep-alive>
Copy the code

Max: Maximum number of component instances that can be cached. If Max Prop is specified, once this number is reached, the instance in the cached component that has not been accessed for the longest time is destroyed before a new instance is created. Usage:

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

A final note:

  • Keep-alive can render only one immediate child at a time, and does not work if keep-alive contains V-for.
  • If multiple direct child elements are included, keep-alive will render only the first child by default.

conclusion

In this article, we introduce today’s main character keep-alive with a dialog form scene, and introduce the function and usage of keep-alive in detail. We now know that keep-alive allows qualifying components to be cached without being destroyed. So how does it cache components, how does it work? We’ll find out in the next article. Like small partners welcome to praise the message plus attention oh!