Vue uses keep alive to cache page optimization projects

One 、 Concept

keep-alive yes  Vue  Built in components of , When it wraps dynamic components , An inactive component instance is cached , Instead of destroying them . and transition be similar ,keep-alive It's an abstract component ： It doesn't render itself as a DOM Elements , It also doesn't appear in the parent component chain

Two 、 effect

During component switching Keep the switched components in memory , Prevent duplicate rendering DOM, Reduce loading time and performance consumption , Improve user experience

3、 ... and 、 principle

stay created Hook function call will need to cache VNode The node is saved in this.cache in ／ stay render（ Page rendering ） when , If VNode Of name Meet cache conditions （ It can be used include as well as exclude control ）, Will follow this.cache Take out the previously cached VNode Instance rendering .

Parameters （Props）

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

For life cycle function changes

Be included in keep-alive Components created in , There will be two more life cycle hooks : activated And deactivated

1. activated

stay keep-alive Called when the component is activated

2. deactivated

stay keep-alive Call... When the component leaves

 Normal life cycle ：beforeRouteEnter --> created --> mounted --> updated -->destroyed

 Use keepAlive Post life cycle ：
 Enter the cache page for the first time ：beforeRouteEnter --> created --> mounted --> activated --> deactivated
 Go to the cache page again ：beforeRouteEnter --> activated --> deactivated

 notes ：
1、 there activated Very useful , Because when a page is cached ,created,mounted And so on , If you want to do something , So it can be activated Finish in ( Here's a chestnut ： The list page goes back to where it was last viewed )
2、activated   keep-alive Called when the component is activated , This hook is not called during server-side rendering . 
3、deactivated   keep-alive Called when the component is disabled , This hook is not called during server-side rendering .

Cache entire project

stay App.vue in

 If you need to cache the entire project , Set as follows ( Direct wrapping root router-view that will do )：
<template>
  <div id="app">
  	<keep-alive>
      <router-view/>
    </keep-alive>
  </div>
</template> Use keepAlive What changes have taken place in the post life cycle 



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

  combination Router, Cache some pages

1、 stay App.vue Set in ：（ Switch the mode according to whether the cache is needed ）
<keep-alive>
    <router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive"></router-view>

2、 stay router.js Routing page settings ：
new Router({
  mode: 'history',
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home,
      redirect: 'goods',
      children: [
        {
          path: 'goods',
          name: 'goods',
          component: Goods,
          meta: {
        	keepAlive: false //  No need to cache 
      	  }
        },
        {
          path: 'ratings',
          name: 'ratings',
          component: Ratings,
          meta: {
        	keepAlive: true  //  Cache required 
      	  }
        },
        {
          path: 'seller',
          name: 'seller',
          component: Seller,
          meta: {
        	keepAlive: true  //  Cache required 
      	  }
        }
      ]
    }
  ]
})

Configured with keepAlive The page of , No re rendering on re-entry , Similarly, the components in this page will not be rendered again . This may lead to related operations within the component （ Those operations that need to re render the page every time ： Such as value transfer between parent and child components ） No longer valid . This may lead to some inexplicable and unverifiable bug

Use the new attribute include/exclude, Cache some pages

vue2.1.0  Added include,exclude Two properties , Allow components to cache conditionally . Both can be comma separated strings 、 Regular expressions or an array to represent .
    <!--  Comma separated strings  -->
    <keep-alive include="a,b">
        <component :is="view"></component>
    </keep-alive>
 
    <!--  Regular expressions  ( need  `v-bind` binding ) -->
<keep-alive :include="/a|b/">
    <component :is="view"></component>
</keep-alive>
 
    <!--  Array  ( need  `v-bind` binding ) -->
<keep-alive :include="['a', 'b']">
    <component :is="view"></component>
</keep-alive>

 notes ： Match first checks the component's own  name  Options , If  name  Option not available , Then match its local registration name  ( Parent component  components  Key value of option ). Anonymous components cannot be matched .