keep-alive

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

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

使用场景

使用原则：当我们在某些场景下不需要让页面重新加载时我们可以使用keepalive

例如:

当我们从首页–>列表页–>商详页–>再返回，这时候列表页应该是需要keep-alive

从首页–>列表页–>商详页–>返回到列表页(需要缓存)–>返回到首页(需要缓存)–>再次进入列表页(不需要缓存)，这时候可以按需来控制页面的keep-alive

使用方式1：结合include和exclude

keep-alive可以设置以下props属性：

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

注意: include/exclude 值是组件中的 name 命名，而不是路由中的组件 name 命名

// router.js
{
  path: '/home',
  name: 'home',
  component: () => import('../views/home.vue')
},
{ 
  path: '/test',
  name: 'test',
  component: () => import('../views/test.vue')
},

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

----------------------------------------------------------------------------------------------------------------
补充： include/exclude 值的多种形式。

// 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>	
	
// 4.动态判断
<keep-alive :include='includedComponents'>
  <router-view/>
</keep-alive>
	
// 5. 将不缓存 name 为 test 的组件
<keep-alive exclude='test'>
  <router-view/>
</keep-alive>

// 6. 和 `<transition>` 一起使用
<transition>
  <keep-alive>
    <router-view/>
  </keep-alive>
</transition>

// 7. 数组 (使用 `v-bind`)
<keep-alive :include="['a', 'b']">
  <component :is="view"></component>
</keep-alive>

使用方式2：通过路由中的 meta 属性控制是否需要缓存

将 test 路由中的 meta 添加 keepAlive 属性为 true，表示当前路由组件要进行缓存。

在路由中设置keepAlive属性判断是否需要缓存

// router.js
{
  path: '/home',
  name: 'home',
  component: () => import('../views/home.vue')
},
{ 
  path: '/test',
  name: 'test',
  meta:{
    keepAlive:true
  },
  component: () => import('../views/test.vue')
},

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

使用方式3：结合路由守卫来实现

实际开发中，我们可以结合路由守卫来实现需要缓存组件的缓存。

export default {
  beforeRouteLeave(to, from, next) {
    to.meta.keepAlive = true;
    next();
  }
}

生命周期函数

设置了 keep-alive 缓存的组件，会多出两个生命周期钩子（activated与deactivated）：

• 首次进入组件时：beforeRouteEnter > beforeCreate > created> mounted > activated > … … > beforeRouteLeave > deactivated
• 再次进入组件时：beforeRouteEnter >activated > … … > beforeRouteLeave > deactivated