(What is keep-alive?)

  • Keep-alive means to stay active. Keep who active?
  • First we know that because Vue is componentized programming, a.vue file is a component. Just like everything else, vUE components have their own life cycle. For example, create creates a component, Mounts data to a component, Update updates data to a component, and destroy destroys component instances.
  • The keep-alive function keeps the component alive by not destroying the component. If the component is not destroyed, the data attached to the component is still alive and the state of the component is preserved.

The HTTP request header also has a keep-alive in it to hold the HTTP call. The Connection: keep-alive function is different, but the idea is the same

A small demo to see how keep-alive works

The demo is divided into the navigation section and the content section. Click the route navigation above and the route view renders the corresponding route component. The renderings are as follows:

Renderings of keep-alive not used

The corresponding code

/ / # App. Vue<template>
  <div class="box">
    <! -- Routing navigation -->
    <div class="nav">
      <router-link to="/">Go to the home page</router-link>
      <router-link to="/about">Go to the about page</router-link>
      <router-link to="/detail">Go to the detail page</router-link>
    </div>
    <! -- Route navigation corresponding content area -->
    <main>
      <router-view></router-view>
    </main>
  </div>
</template>// home.vue, place a check box<el-checkbox v-model="checked">Alternatives to the</el-checkbox>// In about.vue, place an input box<el-input v-model="input" placeholder="Please enter the content"></el-input>// detail.vue is a drop-down box<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>
Copy the code

Analysis of the

  • We found that when we did not wrap the router-view component with the Keep-alive component, the left ~ we were inGo to the home pageYes, it isGo to the about pageEntered, inGo to the detail pageWe pull it down, we leave the routing page, and when we come back, we find that everything that we did before, check, enter, and pull it down, is gone. The reason for this is simple: leaving the routed page triggers the destroy hook method on the component of the routed page, and the component is then destroyed, leaving no data attached to the component.
  • At the same time, we can see the one on the rightVue.js devtoolsIn the tool, the router-view layer is always only home, About, detail components switch back and forth, components switch back and forth, in fact, components are constantly created and destroyed process. Add it down to see the effect of using keep-alive.

Use a rendering of keep-Alive

The corresponding code

<template>
  <div class="box">
    <! -- Routing navigation -->
    <div class="nav">
      <router-link to="/">Go to the home page</router-link>
      <router-link to="/about">Go to the about page</router-link>
      <router-link to="/detail">Go to the detail page</router-link>
    </div>
    <! -- Route navigation corresponding content area -->
    <main>
      <keep-alive> <! Keep-alive (); keep-alive ();
        <router-view></router-view>
      </keep-alive>
    </main>
  </div>
</template>
Copy the code

Analysis of the

  • After we use keep-alive to wrap the view-layer components, we find that the selected, input, and dropdown contents will not be lost during route switching, that is, keep-alive is used to preserve the previous component state
  • At the same time, we can see the one on the rightVue.js devtoolsIn the tool, the corresponding switch component in the router-view is already ininactiveInactive means inactive in EnglishNot active or in use, that is, cached, not destroyed. So what we did on the component, the state of the component is cached, so what we checked, what we typed, what we pulled down is still there.

Vue. Js DevTools is a great tool for Vue development and can be downloaded from Google

Which leads to the problem

If we add keep-alive to the router-view, we will cache all the components of the router-view. If we cache only parts of the router-view, we will cache all the components. The include and exclude attributes in keep-alive are included and excluded

Include and exclude specify whether certain components are cached

Include property

Include means include. The value is a string or regular expression or array. Only components whose name is the same as the value of the include will be cached. Using strings as an example, specify multiple component caches, separated by commas. As follows:

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

Exclude attributes

Exclude is the opposite of include. Exclude specifies which components are not to be cached. It is used similarly to include as follows:

// Cache everything except the home and about components, in this case only the detail component
<keep-alive exclude="home,about" >
    <router-view></router-view>
</keep-alive>
Copy the code

A rendering using include=”about,detail” as an example

The syntax means that only the about and detail are cached, not the other components. If we look at the vUE tool below, we can also see that cached components will become inactive if they are not under the displayed route.

In addition to include and exclude attributes, another attribute of keep-alive is the Max attribute. The Max attribute is usually not used too much. The main purpose of keep-alive is to control the number of cached components. After all, proper caching improves user experience, cache transition, and computer card.

Include and exclude attribute values are component names

Include and exclude attribute values are the name of the component, which is the name attribute value of the component, which is the following name attribute value.

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

Which leads to the problem

A created or Mounted hook is used to create a request for a keep-alive component. A created or Mounted hook is used to create a request for a keep-alive component. A created or Mounted hook is created for a keep-alive component

Use keep-alive hook function execution order problem

When a keep-alive component is first used, the component automatically adds the Activated and deactivated hooks.

  • Activated Triggers when a component is activated. This can be simply interpreted as triggered when the page is entered
  • Deactivated Trigger when a component is not used (inactive state) can simply be interpreted as trigger when leaving the page

Enter component and leave component hook execution sequence

Assuming we only cache the home component, let’s take a look at the code and print out the sequence in the hook. You know the order of the hook execution, do it yourself very impressive

  • The following code

    <template>
  <div>
    <el-checkbox v-model="checked">Alternatives to the</el-checkbox>
  </div>
</template>
<script>
export default {
  name: "home".data() { return { checked: false}},created() {
    console.log("I'm a Created hook");
  },
  mounted() {
    console.log("I am a mounted hook.");
  },
  activated() {
    console.log(I'm the Activated hook.);
  },
  deactivated() {
    console.log("I'm a Deactivated hook.");
  },
  beforeDestroy() {
    console.log("I am beforeDestroy hook"); So we can come to the conclusion:},};</script>
Copy the code

  • After entering the component, the following result is displayed

    I'm a created hook I'm a Mounted hook I'm a Activated hookCopy the code

  • Leave the component and print the following result

    I'm a Deactivated hookCopy the code

  • Come to the conclusion

    Created -> Mounted > activated -> deactivated - Created -> activated -> deactivated - Created -> Activated -> Deactivated -Copy the code

    So we can do some logic in activated and deactivated hooks, which are similar to Mounted and beforeDestroy hooks, but not the same. After all, using keep-alive does not destroy components

Examples of keep-alive application scenarios

  • View a data detail page of the table and return the previous state, such as the previous screening result or the previous page number
  • The content of the form is still returned, such as the input box, drop-down drop-down box, switch switch, etc. After the user inputs a lot of things, the jump back cannot be cleared, can’t let the user write again, is it old iron
  • Anyway, it is to retain the previous state, there are many specific application scenarios, I will not repeat here…

supplement

We used the small case of keep-alive wrapping router-view. In fact, keep-alive usually wraps either router-View or dynamic components. The code is essentially the same. Wrapping dynamic components can be used as follows:

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

The keep-alive include and exclude attributes also support the V-bind syntax, so they are also flexible.