Vue 中对 keep-alive的作用 及详解

目录：

1.首先什么是keep-alive？

keep-alive是一个抽象组件：它自身不会渲染一个DOM元素，也不会出现在
父组件链中；使用keep-alive包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。简单理解就是：keep-alive用来缓存组件,避免多次加载相应的组件,减少性能消耗。

2.keep-alive的作用

通过设置了keep-alive，可以简单理解为从页面1跳转到页面2后，然后后退到页面1，只会加载缓存中之前已经渲染好的页面1，而不会再次重新加载页面1，以及不会再触发页面中的created等类似的钩子函数，除非自己重新刷新该页面1。

3.keep-alive的参数

Keep-alive 组件提供了 include 和 exclude 两个属性，允许组件有条件的进行缓存。
include: 字符串或正则表达式。只有匹配的组件会被缓存。
exclude: 字符串或正则表达式。任何匹配的组件都不会被缓存。

4.什么时候用到keep-alive，并且怎么使用

• 什么时候用到 keep-alive ？

如果需要频繁切换路由，这个时候就可以考虑用keep-alive了，来达到避免数据的重复请求的目的。

怎么使用 keep-alive？

• 在vue-router中的应用

<keep-alive :include="whiteList" :exclude="blackList" :max="amount">

            <router-view> </router-view>
        	<!--这里是会被缓存的组件-->

</keep-alive>

• 在动态组件中的应用

<keep-alive :include="whiteList" :exclude="blackList" :max="amount">
     <component :is="currentComponent"></component>
</keep-alive>

include定义缓存白名单，keep-alive会缓存命中的组件；exclude定义缓存黑名单，被命中的组件将不会被缓存；max定义缓存组件上限，超出上限使用LRU的策略置换缓存数据。

5.生命周期 钩子函数

• keep-alive的生命周期
  activated：页面第一次进入的时候，钩子触发的顺序是
  created->mounted->activated
  deactivated: 页面退出的时候会触发deactivated，当再次前进或者后退的时候只触发activated

5.1 只执行一次的钩子

. 一般的组件，每一次加载都会有完整的生命周期，即生命周期里面对于的钩子函数都会被触发，为什么被keep-alive包裹的组件却不是呢？
. 被缓存的组件实例会为其设置keepAlive= true，而在初始化组件钩子函数中：

// src/core/vdom/create-component.js
const componentVNodeHooks = {
    init (vnode: VNodeWithData, hydrating: boolean): ?boolean{
        if (
         vnode.componentInstance &&       
         !vnode.componentInstance._isDestroyed &&
         vnode.data.keepAlive
        ) {
          // keep-alive components, treat as a patch
          const mountedNode:any = vnode
          componentVNodeHooks.prepatch(mountedNode, mountedNode)
        } else {
          const child = vnode.componentInstance = createComponentInstanceForVnode (vnode, activeInstance)
           
        }
    }
}

可以看出，当vnode.componentInstance和keepAlive同时为true时，不再进入$mount过程，那mounted之前的所有钩子函数（beforeCreate、created、mounted）都不再执行。

5.2 可重复的activated

在patch的阶段，最后会执行invokeInsertHook函数，而这个函数就是去调用组件实例（VNode）自身的insert钩子：

// src/core/vdom/patch.js
function invokeInsertHook (vnode, queue, initial) {
      if (isTrue(initial) && isDef(vnode.parent)) {
          vnode.parent.data,pendingInsert = queue
      } else {
         for(let i =0; i<queue.length; ++i) {
                queue[i].data.hook.insert(queue[i]) // 调用VNode自身的insert钩子函数
         }
      }
}

再看insert钩子：

const componentVNodeHooks = {
      // init()
     insert (vnode: MountedComponentVNode) {
           const { context, componentInstance } = vnode
           if (!componentInstance._isMounted) {
                 componentInstance._isMounted = true
                 callHook(componentInstance, 'mounted')
           }
           if (vnode.data.keepAlive) {
                 if (context._isMounted) {
                     queueActivatedComponent(componentInstance)
                 } else {
                      activateChildComponent(componentInstance, true/* direct */)
                 }
          }
         // ...
     }
}

在这个钩子里面，调用了activateChildComponent函数递归地去执行所有子组件的activated钩子函数：

// src/core/instance/lifecycle.js
export function activateChildComponent (vm: Component, direct?: boolean) {
  if (direct) {
    vm._directInactive = false
    if (isInInactiveTree(vm)) {
      return
    }
  } else if (vm._directInactive) {
    return
  }
  if (vm._inactive || vm._inactive === null) {
    vm._inactive = false
    for (let i = 0; i < vm.$children.length; i++) {
      activateChildComponent(vm.$children[i])
    }
    callHook(vm, 'activated')
  }
}

相反地，deactivated钩子函数也是一样的原理，在组件实例（VNode）的destroy钩子函数中调用deactivateChildComponent函数。