Detailed explanation of how to use keepAlive in vue3 project

This article brings you a detailed explanation of how to use keepalive in the Vue project. Keepalive is a built-in component of Vue. Its function is to cache components in memory to prevent repeated rendering of the DOM, which consumes memory acquisition speed. I hope everyone has to help.

The common usage is to cache components or routes. There are some differences between the existing usage vue2.x and vue3.x. The following mainly describes the usage of keepaliev in vue3.0.

Usually we can configure the entire page cache or only allow a specific component to maintain cache information. If the keepalive route or component is configured, the created->mounted life cycle will only be executed when the page is initialized. Chapter 1 When you enter the page for the second time or later, the life cycle will not be changed, but the cache information will be read.

1. Router configuration cache

1)Step one: Configure App.vue
vue2.x and vue3.0 There are differences in App.vue configuration. The App.vue configuration information is as follows:
In vue2.x, router-view can be placed entirely in keepalive, as follows:

<template>
	<!-- vue2.x配置 -->
   <keep-alive>
    <router-view v-if="$route.meta.keepAlive" />
  </keep-alive>
  <router-view v-if="!$route.meta.keepAlive"/></template>

App.vue configuration of vue3.0 The method is as follows:

<template>
  <!-- vue3.0配置 -->
  <router-view v-slot="{ Component }">
    <keep-alive>
      <component :is="Component"  v-if="$route.meta.keepAlive"/>
    </keep-alive>
    <component :is="Component"  v-if="!$route.meta.keepAlive"/>
  </router-view> </template>

Here component is a special component in vue, :is is used to bind the specified component, here is the page binding corresponding to the route.

2) Second step: Add meta attribute
Add meta attribute on the corresponding route to set whether the page should use caching, as follows:

{
  path: "/keepAliveTest",
   name: "keepAliveTest",
   meta: {
       keepAlive: true //设置页面是否需要使用缓存
   },
   component: () => import("@/views/keepAliveTest/index.vue")
 },

to This can achieve simple caching of the page, but some scenarios require complex processing. For example, some information on the page does not need to be read from the cache. It needs to be processed every time it is entered. At this time, we can use the activated life cycle to solve the problem of partial page refresh. .

3)Realize partial page refresh
First understand the life cycle of vue, Components and pages wrapped by keepAlive, the life cycle executed when the page is entered is ：created->mounted->activated;
Among them, created->mounted will be executed only when the page is entered for the first time. The activated life cycle will be executed every time the page is entered, especially for keepAlive. A life cycle, so we can put the operations to be performed every time the page comes in into this life cycle.
The following code:

activated() {
	// 页面每次进入将手机动态验证码置为空
   this.$refs.mobPwdCode.inputValue = '';},

The function implemented is to set the dynamic verification code to empty every time the user enters. This function can also be implemented in other ways, such as putting the component out of the cache (see 2. component configuration cache).

4)Dynamic setting of the routing keepAlive attribute
Sometimes after we have used up the keepalive cache, we want to no longer keep the page cached, or set the next page keepalive. At this time we You can change the keepAlive value of meta to remove the page cache. Use beforeRouteEnter, beforeRouteUpdate, and beforeRouteLeave. The usage is as follows:

// to为即将跳转的路由，from为上一个页面路由beforeRouteLeave(to, from,+ next) {
    // 设置下一个路由的 meta
    to.meta.keepAlive = false;
    next();}

2. Component configuration cache

1) Usage scenarios

Usually we cache a page of Vue, but sometimes we only need to cache a certain component of the page, or we need to cache the component when using a dynamic component component to switch components.

2) Cache page specified components

When used in App.vue, the pages corresponding to all routes are the components corresponding to the project. The usage method is as follows:
In keep-alive Use the include or exclude attribute on the component, as follows: Use include
to cache the component named testKA.

// APP.vue文件，将页面作为组件缓存<router-view v-slot="{ Component }">
  <keep-alive include="testKA">
    <component :is="Component"/>
  </keep-alive></router-view>

In the page corresponding to the router, you need to set the name attribute, as follows:

export default {
    name:'testKA',// keep-alive中include属性匹配组件name
    data() {return {}},
    activated() {
        // keepalive缓存的页面每次进入都会进行的生命周期
    },}

In addition, include usage is as follows:

<!-- 逗号分隔字符串 --><keep-alive include="a,b">
  <component :is="view"></component></keep-alive><!-- 正则表达式 (使用 `v-bind`) --><keep-alive :include="/a|b/">
  <component :is="view"></component></keep-alive><!-- 数组 (使用 `v-bind`) --><keep-alive :include="[&#39;a&#39;, &#39;b&#39;]">
  <component :is="view"></component></keep-alive>

exclude usage is the same as include usage, representing components that are not cached. In addition, keep-alive also has a max attribute, which represents the maximum number of cached components. Once this number is reached, the instance of the cached component that has not been accessed for the longest time will be destroyed before a new instance is created.

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

When used for component switching on a certain page, the usage is the same as cache routing, but it only downgrades the page to a component, and the parent component is downgraded from App.vue to the corresponding routing page.

3) Summary

In the actual combat process, when the keepalive cache component is found, cannot be used across levels;, such as using the include attribute in App.vue for name= When "a" matches, it can only match the sub-component (routing page) with cache name "a", but cannot cache the grandson component (component referenced by the sub-page) with name "a".

If you want to cache the grandchild component, you can cache the entire subcomponent, or use keepalive in the subcomponent. For keepalive usage instructions, you can go to the official website to learn: https://v3.vuejs.org/guide/component-dynamic-async.html#dynamic-components-with-keep-alive

[Related recommendations: "vue.js tutorial"】

The above is the detailed content of Detailed explanation of how to use keepAlive in vue3 project. For more information, please follow other related articles on the PHP Chinese website!