What is keep alive?

In normal development, some components do not need to be initialized many times. At this time, we need to persist the components to keep the state of the components unchanged. In the next presentation, we will not reinitialize the components.

In other words, Kee alive is a built-in component of Vue, which can keep the contained components in the state or avoid re rendering. This is called component caching

Basic Usage

//Components contained by keep alive are cached
<keep-alive>
    <component />
</keep-alive>
Copy code

The components contained in keep alive will not be initialized again, which means that the life cycle function will not be revisited
However, sometimes it is hoped that the cached components can be rendered again. At this time, Vue solves this problem for us
Components created in keep alive will have two more life cycle hooks: activated and deactivated:

• activated triggered when the component contained in keep alive is rendered again
• deactivated triggered when the component contained in keep alive is destroyed

Keep alive is an abstract component. Cached components will not be mounted. Therefore, activated and deactivated hook functions are provided

After version 2.1.0, keep alive added two new attributes: include (the included components are cached effectively) and exclude (the excluded components are not cached, and the priority is greater than include).

Parameter understanding

Keep alive can receive three attributes as parameters to match and cache the corresponding components:

• include contains components (can be strings, arrays, and regular expressions. Only matching components will be cached)

• exclude excluded components (for strings, arrays, and regular expressions, any matching components will not be cached)

• max is the maximum value of cache components (the type is character or number, and the number of cache components can be controlled)

Note: when using regular expressions or arrays, be sure to use v-bind

Code example:

// Only cache components with component name a or b
<keep-alive include="a,b"> 
  <component />
</keep-alive>

// Components with component name c are not cached (you can keep its state or avoid re rendering)
<keep-alive exclude="c"> 
  <component />
</keep-alive>

// If include and exclude are used at the same time, exclude takes precedence over include. The following example only caches component a
<keep-alive include="a,b" exclude="b"> 
  <component />
</keep-alive>

// If the cached component exceeds the value of 5 set by max, the first cached component is deleted
<keep-alive exclude="c" max="5"> 
  <component />
</keep-alive>
Copy code

Use with router

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

<keep-alive>
    <router-view>
        <!-- All view components that match the path will be cached! -->
    </router-view>
</keep-alive>
Copy code

What if you only want a component in router view to be cached?

• Use include/exclude
• Using meta properties

1. Use include (the example of exclude is similar)

//Only the component with name a that matches the path will be cached
<keep-alive include="a">
    <router-view></router-view>
</keep-alive>
Copy code

2. Use meta attribute

// routes configuration
export default [
  {
    path: '/',
    name: 'home',
    component: Home,
    meta: {
      keepAlive: true // Need to be cached
    }
  }, {
    path: '/profile',
    name: 'profile',
    component: Profile,
    meta: {
      keepAlive: false // No need to be cached
    }
  }
]
Copy 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 will not be cached, such as Profile! -->
</router-view>
Copy code

Pit Prevention Guide

1. Keep alive first matches the name field of the included component. If name is unavailable, it matches the registered name in the current component components configuration.
2. Keep alive does not work in functional components because they do not have cached instances.
3. When the matching conditions exist in both include and exclude, the priority of exclude is the highest (current vue 2.4.2 version). For example, if component A is included in the exclusion and matched at the same time, component a will not be cached.
4. It is included in keep alive, but complies with exclude. activated and deactivated will not be called.

Author: YXi
Link: https://juejin.cn/post/6844903918313406472
Source: rare earth Nuggets
The copyright belongs to the author. For commercial reprint, please contact the author for authorization, and for non-commercial reprint, please indicate the source.