Vue 系列之 keep-alive组件

前言

最近项目中使用到keep-alive组件，遇到一点坑，于是就翻开vue 源码看了一下keep-alive组件的具体实现，下面给大家详细介绍一下keep-alive组件的用法以及源码分析。

阅读完本文你将获得以下收获：

• keep-alive 组件基础用法
• keep-alive 源码解析
• 动态组件上使用keep-alive

keep-alive 简介

keep-alive 是vue 提供的抽象组件，它自身不会渲染成一个DOM元素，也不会出现在父组件链中，使用keep-alive包裹动态组件时，会缓存不活动的组件实例。

keep-alive 使用场景

用户在A组件中，使用过滤条件搜索列表，点击列表单个元素跳转至B组件查看详情，这时候当用户返回至组件A时，希望刚才输入的过滤条件不被重置且检索结果保持不变，这个时候我们就可以考虑使用keep-alive对A组件进行包裹，可以达到用户期望效果，同时避免组件返回创建和渲染。

keep-alive 用法

Props:

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

基本用法

<!-- 基本 -->
<keep-alive>
  <component :is="view"></component>
</keep-alive>

new Vue({
  el: '#app',
  data(){
    return {
      view: List // List为引入的子组件
    }
  }
})

配合动态路由使用

1、vue 版本低于V2.1.0

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

// router 配置
routes: [
    {
      name: 'a',
      path: '/a',
      component: A,
      meta: {
        keepAlive: true
      }
    },
    {
      name: 'b',
      path: '/b',
      component: B,
      meta: {
        keepAlive: false
      }
    }
]

避坑指南 ！！！

此方法不可通过动态改变keepAlive变量来实现动态缓存效果，因为缓存组件创建后会存在vue的内存中。而动态修改keepAlive变量并不会销毁以及重新创建，缓存的组件还是一开始创建在内存中的那个，并不因为变量而改变。

2、vue 版本大于（包含）v2.1.0

vue 在v2.1.0 之后新增include 和 exclude 两个属性，允许组件有条件地缓存。二者都可以用逗号分隔字符串、正则表达式或一个数组来表示。当使用正则或者是数组时，一定要使用 v-bind !

<!-- 逗号分隔字符串 -->
<keep-alive include="a,b"> 
    <component :is="view"></component>
</keep-alive>

<!-- 正则表达式 (使用 `v-bind`) --> 
<keep-alive :include="/a|b/"> 
    <component :is="view"></component> 
</keep-alive>

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

搭配 router-view

<!-- 通过 include 属性指定缓存组件 -->
<keep-alive :include="keepAlives"> 
    <router-view></router-view>
</keep-alive>

<script>
    export default {
        data() {
            return {
                keepAlives: this.$store.state.keepAlives
            }
        },
        watch:{
          $route:{ //监听路由变化
            handler:function (to,from) {
              this.cached = this.$store.state.keepAlives
            }
          }
        }
    }
</script>

通过以上方式，A 组件跳转至B组件时时可动态的改变store.keepAlives将A组件 name 添加进去，这样即可做到动态缓存。

避坑指南 ！！！

• <keep-alive> 先匹配被包含组件的 name 字段，如果 name 不可用，则匹配当前组件 componetns 配置中的注册名称。
• <keep-alive> 不会在函数式组件中正常工作，因为它们没有缓存实例。
• 当匹配条件同时在 include 与 exclude 存在时，以 exclude 优先级最高(当前vue 2.4.2 version)。比如：包含于排除同时匹配到了组件A，那组件A不会被缓存。
• 包含在 <keep-alive> 中，但符合 exclude ，不会调用activated 和 deactivated。

源码解析

源码部分，通过注释的方式来给大家解读，可能个人理解存在出入，烦请大佬评论区指出

keep-alive.js

src\core\components\keep-alive.js

export default {
  name: 'keep-alive',
  abstract: true, // 渲染时会有用到

  props: {
    include: patternTypes, // 缓存白名单
    exclude: patternTypes, // 缓存黑名单
    max: [String, Number] // 最大缓存组件实例数
  },

  created () {
    this.cache = Object.create(null) // 初始化虚拟DOM key - value
    this.keys = [] // 缓存虚拟DOM 键集合
  },

  destroyed () {
    // 组件销毁，删除所有的缓存
    for (const key in this.cache) {
      pruneCacheEntry(this.cache, key, this.keys)
    }
  },

  mounted () {
    // 监听白名单列表变化
    this.$watch('include', val => {
      pruneCache(this, name => matches(val, name))
    })
    // 监听黑名单列表变化
    this.$watch('exclude', val => {
      pruneCache(this, name => !matches(val, name))
    })
  },
  
    render () {
    const slot = this.$slots.default // 插槽
    const vnode: VNode = getFirstComponentChild(slot) // 获取插槽的首个子组件
    const componentOptions: ?VNodeComponentOptions = vnode && vnode.componentOptions
    if (componentOptions) {
      // check pattern
      // 获取组件名称，来匹配黑白名单
      const name: ?string = getComponentName(componentOptions)
      const { include, exclude } = this
      if (
        // not included
        (include && (!name || !matches(include, name))) ||
        // excluded
        (exclude && name && matches(exclude, name))
      ) {
        return vnode
      }

      const { cache, keys } = this
      // 生成 key 值
      const key: ?string = vnode.key == null
        // same constructor may get registered as different local components
        // so cid alone is not enough (#3269)
        ? componentOptions.Ctor.cid + (componentOptions.tag ? `::${componentOptions.tag}` : '')
        : vnode.key
        // 如果当前组件key 存在缓存中，则更新缓存虚拟DOM，否则直接将虚拟DOM添加到缓存中去
      if (cache[key]) {
        vnode.componentInstance = cache[key].componentInstance
        // make current key freshest
        remove(keys, key)
        keys.push(key)
      } else {
        cache[key] = vnode
        keys.push(key)
        // prune oldest entry
        if (this.max && keys.length > parseInt(this.max)) {
          pruneCacheEntry(cache, keys[0], keys, this._vnode)
        }
      }

      vnode.data.keepAlive = true
    }
    return vnode || (slot && slot[0])
  }
}

keep-alive渲染

前面有介绍，keep-alive 组件不会生成具体的DOM节点，作者时如何做到的呢？请看下面一段源码解析

src\core\instance\lifecycle.js

export function initLifecycle (vm: Component) {
  const options = vm.$options

  // locate first non-abstract parent
  // vue在初始化生命周期的时候，为组件实例建立父子关系会根据abstract属性决定是否忽略某个组件
  let parent = options.parent
  if (parent && !options.abstract) {
    while (parent.$options.abstract && parent.$parent) {
      parent = parent.$parent
    }
    parent.$children.push(vm)
  }

  vm.$parent = parent
  vm.$root = parent ? parent.$root : vm

  vm.$children = []
  vm.$refs = {}

  vm._watcher = null
  vm._inactive = null
  vm._directInactive = false
  vm._isMounted = false
  vm._isDestroyed = false
  vm._isBeingDestroyed = false
}

生命周期函数

前面 vnode.data.keepAlive = true 至关重要！！！

• 仅执行一次的钩子函数

   const componentVNodeHooks = {
    init (vnode: VNodeWithData, hydrating: boolean): ?boolean {
      if (
        vnode.componentInstance &&
        !vnode.componentInstance._isDestroyed &&
        vnode.data.keepAlive
      ) {
        // kept-alive components, treat as a patch
        const mountedNode: any = vnode // work around flow
        componentVNodeHooks.prepatch(mountedNode, mountedNode)
      } else {
        const child = vnode.componentInstance = createComponentInstanceForVnode(
          vnode,
          activeInstance
        )
        child.$mount(hydrating ? vnode.elm : undefined, hydrating)
      }
  },
  

• 可多次执行的钩子函数 - activated/deactivated

不过多赘述，见源码， 如果 vnode.data.keepAlive = true，会触发activated 钩子函数

src/core/vdom/create-component.js

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 */)
      }
    }
}

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')
  }
}

总结

年底忙于各种总结报告，时间有限，源码部分些许粗糙，还请各位见谅，截取keep-alive组件关键代码段落，相信大家认真看完代码，会有所收获，详细代码可移步至vuejs