What is thekeep-alive?

In normal development, some components do not need to be initialized more than once. In this case, we need to persist the components so that the state of the components remains the same and the components will not be re-initialized in the next presentation.

That is, kee-Alive is a component built into Vue that can keep contained components in state or avoid re-rendering. This is known as component caching

Basic usage

<keep-alive> <component /> </keep-alive>Copy the code

Components contained in keep-alive are not initialized again, meaning that the lifecycle function is not reinitialized. However, sometimes we want our cached components to be rendered again. Vue solves this problem for us. Activated and deactivated:

  • activated 当 keep-aliveTriggered when the contained component is rendered again
  • deactivated 当 keep-aliveTriggered when the contained component is destroyed

keep-aliveIs an abstract component. Cached components will not bemountedTo this endactivatedanddeactivatedHook function

After version 2.1.0keep-aliveTwo new attributes have been added:include(The contained component cache takes effect) andexcludeExcluded components are not cached and have a priority greater thaninclude).

Parameters to understand

Keep-alive can receive three attributes as parameters for matching and cache corresponding components:

  • Include components (can be strings, arrays, and regular expressions; only matching components are cached)

  • Exclude components (strings, arrays, and regular expressions that match are not cached)

  • Max Maximum number of cache components (characters or numbers can be used to control the number of cache components)

Note: This is mandatory when using regular expressions or arraysv-bind

Code examples:

// Cache only components whose name is a or b <keep-alive include="a,b"> <component /> </keep-alive> // Components whose name is C are not cached (can preserve their state or avoid re-rendering) <keep-alive exclude="c"> <component /> </keep-alive> // Exclude takes precedence over include if both include and exclude are used. The following example only cashes the a component <keep-alive include="a,b" exclude="b"> <component /> </keep-alive> // If the number of cached components exceeds the Max value of 5, the first cached component <keep-alive exclude= will be deleted"c" max="5"> 
  <component />
</keep-alive>
Copy the code

Cooperate withrouteruse

Router-view is also a component. If it is wrapped directly in keepalive, all router-view components matched by the path will be cached as follows:

<keep-alive> <router-view> <! All view components that match paths are cached! --> </router-view> </keep-alive>Copy the code

If you just wantrouter-viewIf a component is cached, what should I do?

  • useinclude/exclude
  • usemetaattribute

1. Use include (exclude example is similar)

<keep-alive include= // Only components whose name is A will be cached"a">
    <router-view></router-view>
</keep-alive>
Copy the code

2. Use meta attributes

/ / routes configurationexport default [
  {
    path: '/',
    name: 'home',
    component: Home,
    meta: {
      keepAlive: true// Need to be cached}}, {path:'/profile',
    name: 'profile',
    component: Profile,
    meta: {
      keepAlive: false// do not need to cache}}]Copy the code
<keep-alive>
    <router-view v-if="$route.meta.keepAlive"> <! -- Here are the view components that will be cached, such as Home! --> </router-view> </keep-alive> <router-view v-if=! ""$route.meta.keepAlive"> <! Here are view components that are not cached, such as profiles! --> </router-view>Copy the code

Pit prevention guidelines

1. Keep-alive matches the name field of the contained component first. If name is not available, it matches the registered name in the current component components configuration. 2. Keep-alive does not work properly in functional components because they do not cache instances. 3. If the matching conditions include include and exclude, exclude has the highest priority (current Vue 2.4.2 version). For example, if the inclusion and exclusion matches component A, then component A will not be cached. 4. It is included in keep-alive, but complies with exclude and does not invoke activated and deactivated.

^ _ <