Simple application of keep alive

Business scenario

The user browses a data list. When the number of data lists is large or there are many filter / search criteria, click View Details and then return. It is necessary to return to the state when leaving the list;

• If the amount of data is too large, the return speed and rendering speed of the interface will slow down, resulting in a long white screen or jamming on the page;
• If you need to save a large number of filter / search criteria, paging and other contents, you need to carry out more cumbersome operations (store the contents or pass them as parameters)

Using keep alive can easily solve these problems;

Keep alive introduction

Keep alive is a built-in component of vue. When wrapping dynamic components, inactive component instances will be cached rather than destroyed; And it is an abstract component: it does not render a DOM element itself, nor does it appear in the parent component chain of the component.

life cycle

• Activated: called when the component cached by keep alive is activated. This hook will not be called during server-side rendering;
• Deactivated: called when the component cached by keep alive is deactivated. This hook will not be called during server-side rendering;

tip: triggered only when the component is wrapped in keep alive

Props (acceptable parameters)

• include - string or regular expression. Only components with matching names are cached.
• exclude - string or regular expression. Any component whose name matches will not be cached.
• max - number. The maximum number of component instances that can be cached.

tip: include and exclude prop allow components to cache conditionally. Both can be represented by comma separated strings, regular expressions, or an array;

example

Find the page to be cached in the router file, and add an attribute keepAlive in the meta as the identification of whether to cache

// App.vue
<keep-alive :include="include">
  <!-- View components that need to be cached --> 
  <router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>
<!-- View components that do not require caching -->
<router-view v-if="!$route.meta.keepAlive"></router-view>

// router.js
export default new Router({
  routes: [
    {
      path:'/',
      name:'HelloWorld',
      meta: {
        keepAlive: true,
      }
    },
    {
      path:'/home',
      name:'home',
      meta: {
        keepAlive: false,
      }
    },
  ]
})

Problems arising

When the page has multiple data lists of the same level, and some of the lists can view the details, using the above code will cause the data lists of the same level to be switched before and cached;

However, in actual use, it is only necessary to cache when viewing details, and the data needs to be updated when switching the data list at the same level;

You need to use include or exclude for processing, as follows:

// App.vue
<keep-alive :include="include">
  <router-view></router-view>
</keep-alive>

// router.js
// Add a character level to the relevant page of the router file, and use this field to distinguish whether the page is a detail page or a data list page
export default new Router({
  routes: [
    {
      path:'/',
      name:'HelloWorld',
      meta: {
        keepAlive: true,
        level: 1,
      }
    },
    {
      path:'/home',
      name:'home',
      meta: {
        keepAlive: false,
        level: 2,
      }
    },
    {
      path:'/home2',
      name:'home2',
      meta: {
        keepAlive: false,
        level: 1,
      }
    },
  ]
})

export default {
  name: 'App',
  data() {
    return {
      include: [],
    }
  },
  watch: {
    $route(to, from) {
      console.log('to', to)
      console.log('from', from)
      

      // Scheme 1 classifies all routing addresses under the router according to the system (e.g. device management (1), device details (2)), and caches them from 1 - > 2
      // The implementation method adds a level field to the meta of router, such as 1, 2 and 3
      // Scheme 1 ---------------------------------------------- start
      // If the page to be entered needs keepAlive cache, push the name into the include array
      // if (to.meta.keepAlive) {
      //   if (!this.include.includes(to.name)) {
      //     this.include.push(to.name)
      //   }
      // }
      // If (from. Meta. Keepalive & & to. Meta. Level < = from. Meta. Level) {/ / if the operation is to return or jump to the same level, it will be cleared
      //   let index = this.include.indexOf(from.name);
      //   if (index !== -1) {
      //     this.include.splice(index, 1);
      //   }
      // }
      // Scheme 1 ---------------------------------------------- end

      // Scheme 2 directly determines whether to jump from to to from is the function of caching (for example, device management - > View)
      // Scenario 2 ---------------------------------------------- start
      if (to.meta.keepAlive) {
        if (!this.include.includes(to.name)) {
          this.include.push(to.name)
        }
      }
      if (from.meta.keepAlive && from.name === 'HelloWorld' && to.name !== 'home') {
        let index = this.include.indexOf(from.name);
        if (index !== -1) {
          this.include.splice(index, 1);
        }
      }
      // Scheme 2 ---------------------------------------------- end
    }
  }
}