彻底揭秘keep-alive原理(小结)

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

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

// src/core/components/keep-alive.js
export default {
 name: 'keep-alive',
 abstract: true, // 判断当前组件虚拟dom是否渲染成真是dom的关键

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

 created () {
  this.cache = Object.create(null) // 缓存虚拟dom
  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 () {
  // 先省略...
 }
}

// src/core/components/keep-alive.js
function pruneCacheEntry (
 cache: VNodeCache,
 key: string,
 keys: Array<string>,
 current"htmlcode">

 // src/core/components/keep-alive.js
 render () {
  const slot = this.$slots.default
  const vnode: VNode = getFirstComponentChild(slot) // 找到第一个子组件对象
  const componentOptions: "color: #ff0000">四、重头戏：渲染 

4.1 Vue的渲染过程
借一张图看下Vue渲染的整个过程：
 

Vue的渲染是从图中的 render 阶段开始的，但keep-alive的渲染是在patch阶段，这是构建组件树（虚拟DOM树），并将VNode转换成真正DOM节点的过程。
简单描述从 render 到 patch 的过程
我们从最简单的 new Vue 开始：


import App from './App.vue'

new Vue({
 render: h => h(App),
}).$mount('#app')



  
Vue在渲染的时候先调用原型上的 _render 函数将组件对象转化为一个VNode实例；而 _render 是通过调用 createElement 和 createEmptyVNode 两个函数进行转化；
  
createElement 的转化过程会根据不同的情形选择 new VNode 或者调用 createComponent 函数做VNode实例化；
  
完成VNode实例化后，这时候Vue调用原型上的 _update 函数把VNode渲染为真实DOM，这个过程又是通过调用 __patch__ 函数完成的（这就是pacth阶段了）

用一张图表达：
 

4.2 keep-alive组件的渲染 
我们用过keep-alive都知道，它不会生成真正的DOM节点，这是怎么做到的？


// src/core/instance/lifecycle.js
export function initLifecycle (vm: Component) {
 const options = vm.$options
 // 找到第一个非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
 // ...
}


Vue在初始化生命周期的时候，为组件实例建立父子关系会根据 abstract 属性决定是否忽略某个组件。在keep-alive中，设置了 abstract: true ，那Vue就会跳过该组件实例。
keep-alive包裹的组件是如何使用缓存的？
在 patch 阶段，会执行 createComponent 函数：


// src/core/vdom/patch.js
function createComponent (vnode, insertedVnodeQueue, parentElm, refElm) {
  let i = vnode.data
  if (isDef(i)) {
   const isReactivated = isDef(vnode.componentInstance) && i.keepAlive
   if (isDef(i = i.hook) && isDef(i = i.init)) {
    i(vnode, false /* hydrating */)
   }

   if (isDef(vnode.componentInstance)) {
    initComponent(vnode, insertedVnodeQueue)
    insert(parentElm, vnode.elm, refElm) // 将缓存的DOM（vnode.elm）插入父元素中
    if (isTrue(isReactivated)) {
     reactivateComponent(vnode, insertedVnodeQueue, parentElm, refElm)
    }
    return true
   }
  }
 }


在首次加载被包裹组件时，由 keep-alive.js 中的 render 函数可知， vnode.componentInstance 的值是 undefined ， keepAlive 的值是 true ，因为keep-alive组件作为父组件，它的 render 函数会先于被包裹组件执行；那么就只执行到 i(vnode, false /* hydrating */) ，后面的逻辑不再执行；
再次访问被包裹组件时， vnode.componentInstance 的值就是已经缓存的组件实例，那么会执行 insert(parentElm, vnode.elm, refElm) 逻辑，这样就直接把上一次的DOM插入到了父元素中。
五、不可忽视：钩子函数
 5.1 只执行一次的钩子
一般的组件，每一次加载都会有完整的生命周期，即生命周期里面对应的钩子函数都会被触发，为什么被keep-alive包裹的组件却不是呢？ 我们在 @ 源码剖析 章节分析到，被缓存的组件实例会为其设置 keepAlive = true ，而在初始化组件钩子函数中：


// src/core/vdom/create-component.js
const componentVNodeHooks = {
 init (vnode: VNodeWithData, hydrating: boolean): "htmlcode">

// 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 钩子：


// src/core/vdom/create-component.js
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"color: #ff0000">参考

 Vue技术揭秘|keep-alive 
Vue源码
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

            
            上一篇：解决ie11 SCRIPT5011:不能执行已释放Script的代码问题

            下一篇：M2实现Nodejs项目自动部署的方法步骤