Example of usage of keep-alive component in Vue

Problem description (what is keep-alive)

• keep-alive As the name suggests, keep active. Who keeps active?
• First of all, we know that because vue is component-based programming, a .vue file is a component. Just like everything else, there is a life cycle from birth to death. The same is true for Vue components, which also have their own life cycle, such as create to create components, mounted to hang data on components, update to update the data hung on components, and destroy to destroy component instances.
• So using keep-alive is to keep the component active and will not be destroyed by destroy, so it will always be alive. If the component is not destroyed, the data mounted on the component still exists, so the state can be retained. Therefore, keep-alive can maintain the state of the component.
  

There is also a keep-alive in the request header of the http protocol to keep the http call, like this: Connection: keep-alive Although the functions are different, the idea is the same, that is, keep the state active

A small demo to see the effect of keep-alive

The demo is divided into the routing navigation part above and the content area part below. Click the route navigation above, and the route view renders the corresponding route component. The effect diagram is as follows:

Effect diagram without keep-alive

Corresponding code

// #App.vue in <template>
  <div class="box">
    <!-- Route Navigation-->
    <div class="nav">
      <router-link to="/">Go to the home page</router-link>
      <router-link to="/about">Go to about page</router-link>
      <router-link to="/detail">Go to detail page</router-link>
    </div>
    <!-- Content area corresponding to route navigation-->
    <main>
      <router-view></router-view>
    </main>
  </div>
</template>

// In home.vue, place a checkbox <el-checkbox v-model="checked">options</el-checkbox>

// In about.vue, place an input box <el-input v-model="input" placeholder="Please enter content"></el-input>

// A drop-down box in detail.vue <el-select v-model="value" placeholder="Please select">
  <el-option
    v-for="item in options"
    :key="item.value"
    :label="item.label"
    :value="item.value"
  >
  </el-option>
</el-select>

analyze

• We found that when we did not use the keep-alive component to wrap the router-view component, on the left, we checked the home page, entered the information on the about page, and selected the information by drop-down on the detail page. When we left the routing page and came back, we found that the operations we had performed before, such as checking, entering, and selecting the information by drop-down, no longer existed, and the previous status was gone. The reason is very simple. When you leave the routing page, the destroy hook method on the component corresponding to the routing page will be triggered, and then the component corresponding to the routing page will be destroyed. When the component is destroyed, the data mounted on the component will be gone.
• At the same time, we can see in the Vue.js devtools on the right that the router-view view layer always switches back and forth between the home, about, and detail components. The switching of components back and forth is actually the process of continuous creation and destruction of components. Next, let's look at the effect of using keep-alive.
  

Effect diagram of using keep-alive

Corresponding code

<template>
  <div class="box">
    <!-- Route Navigation-->
    <div class="nav">
      <router-link to="/">Go to the home page</router-link>
      <router-link to="/about">Go to about page</router-link>
      <router-link to="/detail">Go to detail page</router-link>
    </div>
    <!-- Content area corresponding to route navigation-->
    <main>
      <keep-alive> <!-- Wrap it with keep-alive and you can cache it -->
        <router-view></router-view>
      </keep-alive>
    </main>
  </div>
</template>

analyze

After we wrap the view layer component with keep-alive, we find that the content we checked, entered, and dropped down will not be lost when the route is switched back and forth, that is, keep-alive is used to save the previous component state.

At the same time, we can see that in the Vue.js devtools on the right, the corresponding component switched in the router-view view is already in the inactive state. Inactive means inactive and unused in English, that is, it has been cached and not destroyed. So the operations we performed on the component and the state of the component are cached, so what we checked, entered, and selected in the drop-down are still there.

Vue.js devtools is very useful and can be downloaded through Google. It is a good tool for vue development.

Raising questions

Seeing this, we find that if we add keep-alive directly, all components of the view under the router-view hierarchy will be cached. However, sometimes we only want to cache part of it and don’t want to cache all of it. What should we do? It doesn't matter, the big guys have already considered it and solved it for us in advance, that is, the include and exclude attributes in keep-alive

include and exclude specify whether to cache certain components

include attribute

include means to include. The value is a string or a regular expression or an array. Only components whose names are the same as the value of include will be cached, that is, you can specify which ones to cache. You can specify multiple ones to cache. Here we take a string as an example to specify multiple component caches. The syntax is to separate them with commas. as follows:

//Specify that the home component and about component are cached <keep-alive include="home,about" >
    <router-view></router-view>
</keep-alive>

exclude attribute

Exclude is equivalent to the antonym of include, which means except, which specifies which components are not cached. The usage is similar to include, as follows:

// Cache everything except the home and about components. In this example, only the detail component is cached <keep-alive exclude="home,about" >
    <router-view></router-view>
</keep-alive>

Take include="about,detail" as an example

The syntax means that only about and detail are cached, and other components are not cached. Looking at the Vue tool in the figure below, we can also see that the cached components will become inactive if they are not in the corresponding displayed route.

In addition to the include and exclude attributes, keep-alive also has a max attribute. This max attribute is generally not used too often. Its main purpose is to control the number of cached components. The later cached components will squeeze out the earlier cached components. This is also equivalent to a cache optimization strategy. After all, proper caching improves user experience, but excessive caching will cause the computer to become slower.

The attribute values ​​of include and exclude are the names of the components.

The attribute value of include and exclude is the name of the component, that is, the name attribute value of the component, that is, the name attribute value as shown below.

<script>
    export default {
      name: "App"
      // ...
    };
</script>

Raising questions

We know that there are corresponding logic js parts in components, and components need to send requests to obtain data. Generally, we send requests in create or mounted hooks to ask the big guys at the backend for data. Regarding the problem of the hook function of the component after using keep-alive, we need to pay attention to

Execution order of keep-alive hook functions

First, after using the keep-alive component, the activated hook and deactivated hook will be automatically added to the component.

• activated is triggered when the component is activated (used), which can be simply understood as triggering when entering this page
• deactivated is triggered when the component is not in use (inactive state), which can be simply understood as triggering when leaving this page
  

Entering and leaving component hook execution order

Assuming we only cache the home component, let's take a look at the code and then print out the corresponding order in the hook. You will know the order in which the hooks are executed, and you will be impressed by doing it yourself

The code is as follows

<template>
<div>
  <el-checkbox v-model="checked">Options</el-checkbox>
</div>
</template>
<script>
export default {
name: "home",
data() { return { checked: false } },
created() {
  console.log("I am the created hook");
},
mounted() {
  console.log("I am the mounted hook");
},
activated() {
  console.log("I am activated hook");
},
deactivated() {
  console.log("I am a deactivated hook");
},
beforeDestroy() {
  console.log("I am a beforeDestroy hook"); So we can conclude:
},
};
</script>

Enter the component and print the results as follows

I am the created hook I am the mounted hook I am the activated hook

The results of leaving the component print are as follows

I am the deactivated hook

Draw Conclusion

Initial entry and exit created ---> mounted ---> activated --> deactivated
Subsequent entry and exit activated --> deactivated

So we can do some logic processing in the activated and deactivated hooks. These two hooks are a bit similar to the mounted and beforeDestroy hooks, but they are still different. After all, using keep-alive will not destroy the component

Examples of keep-alive application scenarios

• When viewing the details page of a data item in a table, the status returned is still the previous one, such as the previous filter result or the previous number of pages, etc.
• The content of the filled-in form is still there after the route jumps back, such as the input box, the drop-down box, the switch switch, etc. The user has entered a lot of things, and it cannot be cleared after jumping back. You can't let the user write it again, right?
• Anyway, it just keeps the previous state. There are actually many specific application scenarios, which I will not go into detail here...
  

Replenish

In the above, we use the small case of keep-alive wrapping router-view to explain. In fact, keep-alive usually wraps either router-view or dynamic component component. The code is actually the same. The usage of wrapping dynamic components is as follows:

<keep-alive include="home" exclude="about">
     <component :is="whichComponent"></component>
</keep-alive>

The include and exclude attributes of keep-alive also support the syntax of v-bind, so it is also very flexible.

Summarize

This is the end of this article about the usage of keep-alive component in vue. For more relevant vue keep-alive component content, please search 123WORDPRESS.COM's previous articles or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!