keep-alive of vue development

concept

Keep alive is a built-in component of Vue. When it wraps dynamic components, it will cache inactive component instances instead of destroying them. Similar to transition, keep alive is an abstract component: it does not render itself as a DOM element or appear in the parent component chain.

Effect

                      

principle

                                  .

VNode: virtual DOM is actually a JS object

Props

  • include - a string or regular expression. Only components with matching names will be cached.
  • exclude - a string or regular expression. Any components with matching names will not be cached.
  • max - number. How many component instances can be cached at most.

Life cycle function

 1. activated
   called when the keep alive component is activated
   the hook function is not called during server-side rendering

 2. deactivated
   called when the keep alive component is disabled
   the hook is not called during server-side rendering

                        

                            .

   note: these two life cycle functions will be called only when the component is wrapped by keep alive. If they are used as normal components, they will not be called. After 2.1.0 and exclude, even if they are wrapped in keep alive, these two hook functions will not be called! In addition, this hook function will not be called when rendering on the server.

Cache all pages

   1. In App.vue

<template>
  <div id="app">
    <keep-alive>
      <router-view/>
    </keep-alive>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

Cache pages based on conditions

   1. In App.vue

<template>
  <div id="app">
    // 1. Cache components with name as test
    <keep-alive include='test'>
      <router-view/>
    </keep-alive>
    
    // 2. Use the component with cache name a or b in combination with dynamic component
    <keep-alive include='a,b'>
      <router-view/>
    </keep-alive>
    
    // 3. Using regular expressions, you need to use v-bind
    <keep-alive :include='/a|b/'>
      <router-view/>
    </keep-alive>   
    
    // 5. Dynamic judgment
    <keep-alive :include='includedComponents'>
      <router-view/>
    </keep-alive>
    
    // 5. Components with name test will not be cached
    <keep-alive exclude='test'>
      <router-view/>
    </keep-alive>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

Combined with Router, cache some pages

   1. In the index.js file under the router directory

import Vue from 'vue'
import Router from 'vue-router'
const Home = resolve => require(['@/components/home/home'], resolve)
const Goods = resolve => require(['@/components/home/goods'], resolve)
const Ratings = resolve => require(['@/components/home/ratings'], resolve)
const Seller = resolve => require(['@/components/home/seller'], resolve)

Vue.use(Router)

export default new Router({
  mode: 'history',
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home,
      redirect: 'goods',
      children: [
        {
          path: 'goods',
          name: 'goods',
          component: Goods,
          meta: {
            keepAlive: false // No cache required
          }
        },
        {
          path: 'ratings',
          name: 'ratings',
          component: Ratings,
          meta: {
            keepAlive: true  // Cache required
          }
        },
        {
          path: 'seller',
          name: 'seller',
          component: Seller,
          meta: {
            keepAlive: true  // Cache required
          }
        }
      ]
    }
  ]
})

   2. In App.vue

<template>
  <div id="app">
    <keep-alive>
      <router-view v-if="$route.meta.keepAlive"></router-view>
    </keep-alive>
    <router-view v-if="!$route.meta.keepAlive"></router-view>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

Use router.meta to expand

Suppose there are three routes: A, B, C.

Demand:
Default display A
       B jumps to A, A does not refresh
          C jumps to A, A refreshes

Implementation method:
   1. Set the meta attribute in route A

{
        path: '/',
        name: 'A',
        component: A,
        meta: {
            keepAlive: true // Need to be cached
        }
}

              2. Set beforeroutleave in B-component

export default {
        data() {
            return {};
        },
        methods: {},
        beforeRouteLeave(to, from, next) {
             // Set the meta of the next route
            to.meta.keepAlive = true;  // Let A cache, that is, not refresh
            next();
        }
};

    3. Set beforeroutleave in C component

export default {
        data() {
            return {};
        },
        methods: {},
        beforeRouteLeave(to, from, next) {
            // Set the meta of the next route
            to.meta.keepAlive = false; // Let A not cache, i.e. refresh
            next();
        }
};

   in this way, B will return to A, A will not refresh, and C will return to A to refresh.

max added in version 2.5.0

   how many component instances can be cached at most. Once this number is reached, the longest unreachable instance in the cached component will be destroyed before the new instance is created.

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

Be careful

   note that this < keep alive > requires that the component to be switched to have its own name, whether through the name option of the component or local / global registration.

Tags: Front-end Vue Attribute

Posted on Thu, 07 May 2020 02:55:11 -0400 by schandhok