Introduction to the

This article is intended to be a brief introduction to keep-alive in Vue2.6

role

Keep-alive is mainly used for caching Vue components, so you can use keep-alive when you need to switch between multiple component views frequently. Keep-alive keeps the component alive and does not need to be rendered repeatedly for second or even multiple uses, which means no second life cycle function is performed. However, this also means that, without special processing, the cached component will always display the data as it was when it was first loaded.

Method of use

The keep-alive method is very simple. Just use the
tag to wrap the components that need to be cached. The following is an example:

<keep-alive> <component :is="componentName" /> </keep-alive> <router-view /> </keep-alive> .Copy the code

Life cycle function

The life cycle of a keep-alive wrapped component is different from that of a normal component. A component wrapped with keep-alive has two more life-cycles, that is, activated and deactivated. Call beforeCreate -> created -> beforeMount -> Mounted -> activated when accessing a keep-alive component for the first time. Because the component is cached, when you re-enter it, you don’t have to go through the create and mount process. BeforeDestroy and destroyed are no longer executed when a keep-alive component exits because the component is not destroyed and deactivated is executed when the corresponding component exits.

activated

Activated is triggered when the component enters (renders again)

deactivated

Deactivated is triggered when a component deactivates (deactivates, removes)

configuration

In use, especially when the route cache is carried out, there are always some components that need to be refreshed in real time and do not want it to be cached, so we can use include and exclude to match. Note that both configurations can be used in parallel. Exclude has a higher priority than include.

We can use Max to set the maximum number of cached components. When the maximum number is exceeded, the oldest component cache will be released.

Matching rules:

  1. Component/route name configuration;
  2. The key value of components in the parent component;

Note: Anonymous components cannot be matched.

include

As the name implies, matched components are cached and can be matched using strings (comma-separated), regular expressions, arrays, and more. The following is an example:

/ / string < keep alive - include = "name1 name2" > < the router - view / > < / keep alive - > / / array < keep alive: - include = "/ name1 | name2 /" > <router-view /> </keep-alive> // array <keep-alive :include="['name1', 'name2']"> <router-view /> </keep-alive>Copy the code

exclude

As the name implies, matched components are not cached and can be matched using strings (comma-separated), regular expressions, arrays, and other methods. The following is an example:

/ / string < keep alive - exclude = "name1 name2" > < the router - view / > < / keep alive - > / / array < keep - the alive: exclude = "/ name1 | name2 /" > <router-view /> </keep-alive> // array <keep-alive :exclude="['name1', 'name2']"> <router-view /> </keep-alive>Copy the code

max

The maximum number of cacheable components that need to be passed in numbers, which can be character or numeric data types. The following is an example:

// String <keep-alive Max ="5"> <router-view /> </keep-alive> // value <keep-alive: Max ="5"> <router-view /> </keep-alive>Copy the code

The routing configuration

When caching routes, you can also configure meta to determine whether routes need to be cached or not. The following is an example:

. {path: '/keep', name: 'keep', Component: keep, meta: {keepAlive: true // cache}}, {path: '/alive', name: 'Alive', Component: Alive, meta: {keepAlive: false // No cache}}...Copy the code

The end of the

That’s a brief description of Keep-alive. If it’s helpful, you can go to 👍.