vue中keep-alive的使用及详解

概念

keep-alive是vue内置抽象组件，他自身不会渲染成一个DOM组件，也不会出现父组件链中。使用keep-alive包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。

作用

在组件切换过程中将状态保留在内存中，防止重复渲染DOM，减少加载时间及性能消耗，提高用户体验性。

原理

在created 函数调用时将需要缓存的VNode节点保存在this.cache中/在render（页面渲染）时，如果VNode的name符合缓存条件(可以用include以及exclude控制)，则会从this.cache中取出之前缓存的VNode实例进行渲染。

export default {
  props: {
    include: patternTypes, // 允许组件有条件地进行缓存
    exclude: patternTypes,
    max: [String, Number] // 最多可以缓存多少组件实例
  },
  created () {
    this.cache = Object.create(null) // 创建一个cache对象，用来作为缓存容器，保存vnode节点
    this.keys = []
  },
  destroyed () {
    // 清除cache缓存中的所有组件实例
    for (const key in this.cache) {
      pruneCacheEntry(this.cache, key, this.keys)
    }
  },
}
function pruneCacheEntry (
  cache: VNodeCache,
  key: string,
  keys: Array<string>,
  current?: VNode
) {
  const cached = cache[key]
  if (cached && (!current || cached.tag !== current.tag)) {
    cached.componentInstance.$destroy()
  }
  cache[key] = null
  remove(keys, key)
}

Props

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

生命周期函数

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

1、activated
在keep-alive 组件激活时调用
该钩子函数在服务器端渲染期间不被调用

2、deactivated
在keep-alive 组件停用时调用
该钩子函数在服务器端渲染期间不被调用

使用keep-alive 会将数据保存在内存中，如果每次进入页面的时候需要获取最新数据，需要在activated 阶段获取数据，承担原来created 钩子函数中获取的数据

只有组件被keep-alive 包裹时，这两个生命周期才会被调用，如果作为正常组件，是不会被调用的。在服务器端渲染时，此钩子也不会被调用。

缓存所有页面

结合router.js页面 缓存部分页面

1、父组件页面

2、router.js 页面

根据条件 缓存页面

1、父组件页面

2、router.js 页面