Small knowledge, big challenge! This paper is participating in theEssentials for programmers”Creative activities

This paper has participated inProject DigginTo win the creative gift package and challenge the creative incentive money

Idle time to have a tight mind, busy time to have leisure fun

directory

  • preface

  • The body of the

    • I. Introduction of keep-alive
    • Keep -alive
    • 3. Precautions for the use of keep-alive

  • conclusion

  • Reference documentation

preface

Returns the directory

As a front end to the vUE’s main technology stack, keep-Alive is a common built-in component. Let’s take a look at its use and precautions.

The body of the

I. Introduction of keep-alive

Returns the directory

Keep – what is alive

Keep-alive is an abstract component: it 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. Primarily used to preserve component state or avoid re-rendering.

Usage scenarios

The user selects filter criteria on a list page to filter out a list of data. The list page leads to the data details page, and then returns to the list page. If the keep-alive component is not used, the page will still be re-rendered when the page is rolled back. We want:

  • Click the product in the list page to jump to the details, and the original information will still be displayed after the return, reserving the user’s screening (or selected) state

Keep-alive is designed to solve this scenario.

Of course, keep-Alive does more than just save page/component states. It also improves system performance by avoiding repeated component creation and rendering. In general, keep-alive is used to save the render state of the component.

Keep -alive

Returns the directory

Three parameters of keep-alive

  • Include – string | RegExp | Array: define the cache white list, only the name matching components will be cached (2.1.0 version).

  • Exclude – string | RegExp | Array: define the cache list, any name that matches the component will not be cached, priority is greater than the include (2.1.0 version).

  • Max – number | string: the definition cache component limit, beyond the limit to use the strategy of LRU replacement cached data.

Application in dynamic components

<keep-alive :include="whiteList" :exclude="blackList" :max="amount">
    <component :is="currentComponent"></component>
</keep-alive>
Copy the code

But this approach does not make much practical sense.

Application in VUe-Router

  • In VUe2, you can wrap it directly
<keep-alive>
    <router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>
<router-view v-if=! "" $route.meta.keepAlive"></router-view>
Copy the code
  • In VUe3, the syntax of the old version is invalid, and the new version is recommended:

Transition and keep-alive must now be used inside the RouterView via the V-slot API:

<router-view v-slot="{ Component }">
    <transition>
        <keep-alive>
            <component :is="Component" />
        </keep-alive>
    </transition>
</router-view>
Copy the code

Keep-alive life cycle

  • First entry:

  1. Trigger Setup > beforeCreate > Created > beforeMount > Mounted > Activated

  2. Deactivated is triggered after exit

  • Enter again:

  1. Trigger beforeUpdate > Updated > Activated

  2. Deactivated is triggered after exit

Generally, a component has a complete life cycle every time it is loaded, that is, the corresponding hook function in the life cycle will be triggered.

This is not the case for a keep-alive component. The $mount process is no longer implemented. All beforeCreate, created, and Mounted hook functions preceding mounted are no longer executed. It has its own unique life cycle of two:

  • Actived fires when a keep-alive component is rendered again.
  • Deactived Triggered when a keep-alive component is destroyed

Therefore, when keep-alive is used, the keep-alive is executed only once in Mounted. The method that the component executes each time it goes in is placed in Activated.

3. Precautions for the use of keep-alive

Returns the directory

The include invalid

  1. Check the version

It is 2.1+ that determines the current vUE version, because include and exclude are two attributes added to VUe2.1.0.

Check the package. The json

"vue": "^ 2.5.2." ".Copy the code
  1. Check the name

Note that it is not the name in router.js, but the name attribute in a single Vue component.

It is recommended that the name in router.js be consistent with the name of the Vue component.

export default {
    name: "index"
}
Copy the code
  1. Multilayer nested

If there are more than two router-views and the relationship is parent and child, add keep-alive to the keep-alive function. If only one router-view is added, the keep-alive function does not take effect.

// app.vue

// other.vue

conclusion

Returns the directory

With your mutual encouragement, for their own refueling!

Reference documentation

  • keep-alive | vue.js
  • Keep of the Vue – the use of the alive, to achieve page caching | the nuggets – Zfh94165
  • The complete revelation principle of keep alive – | the nuggets – became clear

Postscript: Hello friends, if you think this article is good, remember to give a thumbs-up or star, your thumbs-up and star is my motivation to write more and richer articles!Making the address

Document agreement

Db’s document library is licensed by DB under the Creative Commons Attribution – Non-commercial use – Share alike 4.0 International License. Based on works on github.com/danygitgit. Outside of this license agreement authorized access can be from creativecommons.org/licenses/by… Obtained.