Vue内置组件之keep-alive详情解析、用法及遇到的“坑”

概念

    keep-alive 是 Vue 的内置组件，当它包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。

作用

    在组件切换过程中将状态保留在内存中，防止重复渲染DOM，减少加载时间及性能消耗，提高用户体验性。主要用在缓存表单，一些商城商品的加载......

Props

• include - 字符串或正则表达式。只有名称匹配的组件会被缓存。
• exclude - 字符串或正则表达式。任何名称匹配的组件都不会被缓存。
• max - 数字。最多可以缓存多少组件实例。

缓存所有页面

在 App.vue 里面直接写

<keep-alive>
     <router-view />
</keep-alive>

根据条件判断缓存部分页面

一、根据meta属性来判断

 1.在router.js里给路由增加meta属性         

export default new Router({
  routes: [
    {
      path: '/home',
      name: 'Home',
      component: Home,
      meta:{
      	keepAlive:true
      }
    },
     {
      path: '/cart',
      name: 'Cart',
      component: Cart,
      meta:{
      	keepAlive:false
      }
    },
     {
      path: '/my',
      name: 'My',
      component:My,
      meta:{
      	keepAlive:false
      }
    }
  ]
})

2.在App.vue里判断router-view是否被包裹

<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>

二、根据name来判断，许多小伙伴遇到此时缓存不了的问题（注意！此时的name必须是页面中与data和methods同级的name，而不是router.js里的name）

1.在需要缓存的页面中添加name

<script>
    export default {
        name: 'index',
        data(){
            return {
              
            }
        },
        methods: {
            
        },
    }
</script>

2.在App.vue里添加include写入你的name 

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

更加深入的条件缓存

<template>
  <div id="app">
  	// 1. 将缓存 name 为 test 的组件
  	<keep-alive include='test'>
      <router-view/>
    </keep-alive>
	
	// 2. 将缓存 name 为 a 或者 b 的组件，结合动态组件使用
	<keep-alive include='a,b'>
  	  <router-view/>
	</keep-alive>
	
	// 3. 使用正则表达式，需使用 v-bind
	<keep-alive :include='/a|b/'>
  	  <router-view/>
	</keep-alive>	
	
	// 5.动态判断
	<keep-alive :include='includedComponents'>
  	  <router-view/>
	</keep-alive>
	
	// 5. 将不缓存 name 为 test 的组件
	<keep-alive exclude='test'>
  	  <router-view/>
	</keep-alive>
  </div>
</template>

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

生命周期函数

    被包含在 keep-alive 中创建的组件，会多出两个生命周期的钩子: activated 与 deactivated。

  1. activated

           页面第一次进入的时候，钩子触发的顺序是created->mounted->activated
      该钩子函数在服务器端渲染期间不被调用

   2. deactivated

      页面退出的时候会触发deactivated，当再次前进或者后退的时候只触发activated
      该钩子在服务器端渲染期间不被调用