Simple application of keep-alive

The business scenario

User browsing a list of data, when the list of data is large or there are many filter/search conditions, click to view details and then return, need to go back to the state when left the list;

If the amount of data is too large, the interface return speed and rendering speed will be slow, resulting in a long white screen or page lag.
If you need to save a lot of filter/search criteria, paging, etc., then you need to do a bit more work (storing or passing the content as a parameter)

These problems can be solved more easily with keep-alive;

Keep alive – introduction

Keep-alive is one of vue’s built-in components that cache inactive component instances when wrapping dynamic components instead of destroying them. And is an abstract component: it does not render a DOM element by itself, nor does it appear in the chain of parent components of the component.

The life cycle

Activated: called when the keep-alive component is activated. This hook is not called during server-side rendering.
Deactivated: called when a component cached by keep-Alive is disabled. This hook is not called during server-side rendering.

Tip: Triggers only if the component is wrapped in keep-alive

Props (acceptable parameter)

Include – a string or regular expression. Only components with matching names are cached.
Exclude – indicates a string or regular expression. Any component with a matching name is not cached.
Max – Numbers. Maximum number of component instances that can be cached.

Tip: Include and exclude Prop allow components to conditionally cache. Both can be represented as comma-separated strings, regular expressions, or arrays;

example

Find the page that needs to be cached in the router file and add a keepAlive attribute in the meta to indicate whether the page needs to be cached

// App.vue <keep-alive :include="include"> <! <router-view v-if="$route.meta. KeepAlive "></router-view> </keep-alive> <! <router-view v-if="! $route.meta.keepAlive"></router-view>Copy the code

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

Problems arising

When the page has multiple lists of data at the same level, and some of the lists can be viewed in detail, using the above code will cause the list of data at the same level to be cached before switching;

However, in actual use, the cache is required only when viewing details, and the data needs to be updated when the data list of the same level is switched;

Use include or exclude for processing, as follows:

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

// router.js
// Add a character level to the relevant page of the router file. Use this field to distinguish between a detail page and 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,}},]})Copy the code

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

      // Solution 1 classifs all routing addresses under the router according to the system (for example, device management (1) and device details (2))
      // add a level field to the meta of the router, such as 1,2,3
      / / scheme 1 -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- start
      // Push the name into the include array if the page to which you want to enter requires a keepAlive cache
      // if (to.meta.keepAlive) {
      // if (! this.include.includes(to.name)) {
      // this.include.push(to.name)
      / /}
      // }
      KeepAlive && to.meta. Level <= from.meta. Level) {// Clear if the operation is a return or peer jump
      // let index = this.include.indexOf(from.name);
      // if (index ! = = 1) {
      // this.include.splice(index, 1);
      / /}
      // }
      / / scheme 1 -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- the end

      // Option 2 directly determines whether to switch from to to implement cache function (for example, device management -> view)
      / / scheme 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 -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- the end}}}Copy the code

Simple application of keep-alive