完全搞懂Vue中keep-alive的魔法(下)

时间  2019-11-05
标签 完全 vue alive 繁體版
原文   原文链接

在上一节完全搞懂Vue中keep-alive的魔法(上)中，咱们对keep-alive组件的初始渲染流程以及组件的配置信息进行了源码分析。初始渲染流程最关键的一步是对渲染的组件Vnode进行缓存，其中也包括了组件的真实节点存储。有了第一次的缓存，当再次渲染组件时，keep-alive又拥有哪些魔法呢？接下来咱们将完全揭开这一层面纱。vue

13.5 准备工做

上一节对keep-alive组件的分析，是从我画的一个流程图开始的。若是不想回过头看上一节的内容，能够参考如下的简单总结。node

    1. keep-alive是源码内部定义的组件选项配置，它会先注册为全局组件供开发者全局使用，其中render函数定义了它的渲染过程
    1. 和普通组件一致，当父在建立真实节点的过程当中，遇到keep-alive的组件会进行组件的初始化和实例化。
    1. 实例化会执行挂载$mount的过程，这一步会执行keep-alive选项中的render函数。
    1. render函数在初始渲染时，会将渲染的子Vnode进行缓存。同时对应的子真实节点也会被缓存起来。

那么，当再次须要渲染到已经被渲染过的组件时，keep-alive的处理又有什么不一样呢？react

13.5.1 基础使用

为了文章的完整性，我依旧把基础的使用展现出来，其中加入了生命周期的使用，方便后续对keep-alive生命周期的分析。算法

<div id="app">
    <button @click="changeTabs('child1')">child1</button>
    <button @click="changeTabs('child2')">child2</button>
    <keep-alive>
        <component :is="chooseTabs">
        </component>
    </keep-alive>
</div>
var child1 = {
    template: '<div><button @click="add">add</button><p>{{num}}</p></div>',
    data() {
        return {
            num: 1
        }
    },
    methods: {
        add() {
            this.num++
        }
    },
    mounted() {
        console.log('child1 mounted')
    },
    activated() {
        console.log('child1 activated')
    },
    deactivated() {
        console.log('child1 deactivated')
    },
    destoryed() {
        console.log('child1 destoryed')
    }
}
var child2 = {
    template: '<div>child2</div>',
    mounted() {
        console.log('child2 mounted')
    },
    activated() {
        console.log('child2 activated')
    },
    deactivated() {
        console.log('child2 deactivated')
    },
    destoryed() {
        console.log('child2 destoryed')
    }
}

var vm = new Vue({
    el: '#app',
    components: {
        child1,
        child2,
    },
    data() {
        return {
            chooseTabs: 'child1',
        }
    },
    methods: {
        changeTabs(tab) {
            this.chooseTabs = tab;
        }
    }
})
复制代码
13.5.2 流程图

和首次渲染的分析一致，再次渲染的过程我依旧画了一个简单的流程图。vue-router

13.6 流程分析

13.6.1 从新渲染组件

再次渲染的流程从数据改变提及，在这个例子中，动态组件中chooseTabs数据的变化会引发依赖派发更新的过程(这个系列有三篇文章详细介绍了vue响应式系统的底层实现，感兴趣的同窗能够借鉴)。简单来讲，chooseTabs这个数据在初始化阶段会收集使用到该数据的相关依赖。当数据发生改变时，收集过的依赖会进行派发更新操做。api

其中，父组件中负责实例挂载的过程做为依赖会被执行，即执行父组件的vm._update(vm._render(), hydrating);。_render和_update分别表明两个过程，其中_render函数会根据数据的变化为组件生成新的Vnode节点，而_update最终会为新的Vnode生成真实的节点。而在生成真实节点的过程当中，会利用vitrual dom的diff算法对先后vnode节点进行对比，使之尽量少的更改真实节点，这一部份内容能够回顾深刻剖析Vue源码 - 来，跟我一块儿实现diff算法!，里面详细阐述了利用diff算法进行节点差别对比的思路。数组

patch是新旧Vnode节点对比的过程，而patchVnode是其中核心的步骤，咱们忽略patchVnode其余的流程，关注到其中对子组件执行prepatch钩子的过程当中。缓存

function patchVnode (oldVnode,vnode,insertedVnodeQueue,ownerArray,index,removeOnly) {
    ···
    // 新vnode  执行prepatch钩子
    if (isDef(data) && isDef(i = data.hook) && isDef(i = i.prepatch)) {
        i(oldVnode, vnode);
    }
    ···
}
复制代码

执行prepatch钩子时会拿到新旧组件的实例并执行updateChildComponent函数。而updateChildComponent会对针对新的组件实例对旧实例进行状态的更新，包括props,listeners等，最终会调用vue提供的全局vm.$forceUpdate()方法进行实例的从新渲染。bash

var componentVNodeHooks = {
    // 以前分析的init钩子 
    init: function() {},
    prepatch: function prepatch (oldVnode, vnode) {
        // 新组件实例
      var options = vnode.componentOptions;
      // 旧组件实例
      var child = vnode.componentInstance = oldVnode.componentInstance;
      updateChildComponent(
        child,
        options.propsData, // updated props
        options.listeners, // updated listeners
        vnode, // new parent vnode
        options.children // new children
      );
    },
}

function updateChildComponent() {
    // 更新旧的状态，不分析这个过程
    ···
    // 迫使实例从新渲染。
    vm.$forceUpdate();
}
复制代码

先看看$forceUpdate作了什么操做。$forceUpdate是源码对外暴露的一个api，他们迫使Vue实例从新渲染，本质上是执行实例所收集的依赖，在例子中watcher对应的是keep-alive的vm._update(vm._render(), hydrating);过程。app

Vue.prototype.$forceUpdate = function () {
    var vm = this;
    if (vm._watcher) {
      vm._watcher.update();
    }
  };
复制代码
13.6.2 重用缓存组件

因为vm.$forceUpdate()会强迫keep-alive组件进行从新渲染，所以keep-alive组件会再一次执行render过程。这一次因为第一次对vnode的缓存，keep-alive在实例的cache对象中找到了缓存的组件。

// keepalive组件选项
var keepAlive = {
    name: 'keep-alive',
    abstract: true,
    render: function render () {
      // 拿到keep-alive下插槽的值
      var slot = this.$slots.default;
      // 第一个vnode节点
      var vnode = getFirstComponentChild(slot);
      // 拿到第一个组件实例
      var componentOptions = vnode && vnode.componentOptions;
      // keep-alive的第一个子组件实例存在
      if (componentOptions) {
        // check pattern
        //拿到第一个vnode节点的name
        var name = getComponentName(componentOptions);
        var ref = this;
        var include = ref.include;
        var exclude = ref.exclude;
        // 经过判断子组件是否知足缓存匹配
        if (
          // not included
          (include && (!name || !matches(include, name))) ||
          // excluded
          (exclude && name && matches(exclude, name))
        ) {
          return vnode
        }

        var ref$1 = this;
        var cache = ref$1.cache;
        var keys = ref$1.keys;
        var key = vnode.key == null ? componentOptions.Ctor.cid + (componentOptions.tag ? ("::" + (componentOptions.tag)) : '')
          : vnode.key;
          // ==== 关注点在这里 ====
        if (cache[key]) {
          // 直接取出缓存组件
          vnode.componentInstance = cache[key].componentInstance;
          // keys命中的组件名移到数组末端
          remove(keys, key);
          keys.push(key);
        } else {
        // 初次渲染时，将vnode缓存
          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])
    }
}

复制代码

render函数前面逻辑能够参考前一篇文章，因为cache对象中存储了再次使用的vnode对象，因此直接经过cache[key]取出缓存的组件实例并赋值给vnode的componentInstance属性。可能在读到这里的时候，会对源码中keys这个数组的做用，以及pruneCacheEntry的功能有疑惑，这里咱们放到文章末尾讲缓存优化策略时解答。

13.6.3 真实节点的替换

执行了keep-alive组件的_render过程，接下来是_update产生真实的节点，一样的，keep-alive下有child1子组件，因此_update过程会调用createComponent递归建立子组件vnode,这个过程在初次渲染时也有分析过，咱们能够对比一下，再次渲染时流程有哪些不一样。

function createComponent (vnode, insertedVnodeQueue, parentElm, refElm) {
    // vnode为缓存的vnode
      var i = vnode.data;
      if (isDef(i)) {
        // 此时isReactivated为true
        var isReactivated = isDef(vnode.componentInstance) && i.keepAlive;
        if (isDef(i = i.hook) && isDef(i = i.init)) {
          i(vnode, false /* hydrating */);
        }
        if (isDef(vnode.componentInstance)) {
          // 其中一个做用是保留真实dom到vnode中
          initComponent(vnode, insertedVnodeQueue);
          insert(parentElm, vnode.elm, refElm);
          if (isTrue(isReactivated)) {
            reactivateComponent(vnode, insertedVnodeQueue, parentElm, refElm);
          }
          return true
        }
      }
    }
复制代码

此时的vnode是缓存取出的子组件vnode，而且因为在第一次渲染时对组件进行了标记vnode.data.keepAlive = true;,因此isReactivated的值为true,i.init依旧会执行子组件的初始化过程。可是这个过程因为有缓存，因此执行过程也不彻底相同。

var componentVNodeHooks = {
    init: function init (vnode, hydrating) {
      if (
        vnode.componentInstance &&
        !vnode.componentInstance._isDestroyed &&
        vnode.data.keepAlive
      ) {
        // 当有keepAlive标志时，执行prepatch钩子
        var mountedNode = vnode; // work around flow
        componentVNodeHooks.prepatch(mountedNode, mountedNode);
      } else {
        var child = vnode.componentInstance = createComponentInstanceForVnode(
          vnode,
          activeInstance
        );
        child.$mount(hydrating ? vnode.elm : undefined, hydrating);
      }
    },
}
复制代码

显然由于有keepAlive的标志，因此子组件再也不走挂载流程，只是执行prepatch钩子对组件状态进行更新。而且很好的利用了缓存vnode以前保留的真实节点进行节点的替换。

13.7 生命周期

咱们经过例子来观察keep-alive生命周期和普通组件的不一样。

在咱们从child1切换到child2,再切回child1过程当中，chil1不会再执行mounted钩子，只会执行activated钩子，而child2也不会执行destoryed钩子，只会执行deactivated钩子，这是为何？child2的deactivated钩子又要比child1的activated提早执行，这又是为何？

13.7.1 deactivated

咱们先从组件的销毁开始提及，当child1切换到child2时，child1会执行deactivated钩子而不是destoryed钩子，这是为何？ 前面分析patch过程会对新旧节点的改变进行对比，从而尽量范围小的去操做真实节点，当完成diff算法并对节点操做完毕后，接下来还有一个重要的步骤是对旧的组件执行销毁移除操做。这一步的代码以下：

function patch(···) {
  // 分析过的patchVnode过程
  // 销毁旧节点
  if (isDef(parentElm)) {
    removeVnodes(parentElm, [oldVnode], 0, 0);
  } else if (isDef(oldVnode.tag)) {
    invokeDestroyHook(oldVnode);
  }
}

function removeVnodes (parentElm, vnodes, startIdx, endIdx) {
  // startIdx,endIdx都为0
  for (; startIdx <= endIdx; ++startIdx) {
    // ch 会拿到须要销毁的组件
    var ch = vnodes[startIdx];
    if (isDef(ch)) {
      if (isDef(ch.tag)) {
        // 真实节点的移除操做
        removeAndInvokeRemoveHook(ch);
        invokeDestroyHook(ch);
      } else { // Text node
        removeNode(ch.elm);
      }
    }
  }
}
复制代码

removeAndInvokeRemoveHook会对旧的节点进行移除操做，其中关键的一步是会将真实节点从父元素中删除，有兴趣能够自行查看这部分逻辑。invokeDestroyHook是执行销毁组件钩子的核心。若是该组件下存在子组件，会递归去调用invokeDestroyHook执行销毁操做。销毁过程会执行组件内部的destory钩子。

function invokeDestroyHook (vnode) {
    var i, j;
    var data = vnode.data;
    if (isDef(data)) {
      if (isDef(i = data.hook) && isDef(i = i.destroy)) { i(vnode); }
      // 执行组件内部destroy钩子
      for (i = 0; i < cbs.destroy.length; ++i) { cbs.destroy[i](vnode); }
    }
    // 若是组件存在子组件，则遍历子组件去递归调用invokeDestoryHook执行钩子
    if (isDef(i = vnode.children)) {
      for (j = 0; j < vnode.children.length; ++j) {
        invokeDestroyHook(vnode.children[j]);
      }
    }
  }
复制代码

组件内部钩子前面已经介绍了init和prepatch钩子，而destroy钩子的逻辑更加简单。

var componentVNodeHooks = {
  destroy: function destroy (vnode) {
    // 组件实例
    var componentInstance = vnode.componentInstance;
    // 若是实例还未被销毁
    if (!componentInstance._isDestroyed) {
      // 不是keep-alive组件则执行销毁操做
      if (!vnode.data.keepAlive) {
        componentInstance.$destroy();
      } else {
        // 若是是已经缓存的组件
        deactivateChildComponent(componentInstance, true /* direct */);
      }
    }
  }
}
复制代码

当组件是keep-alive缓存过的组件，即已经用keepAlive标记过，则不会执行实例的销毁，即componentInstance.$destroy()的过程。$destroy过程会作一系列的组件销毁操做，其中的beforeDestroy,destoryed钩子也是在$destory过程当中调用，而deactivateChildComponent的处理过程却彻底不一样。

function deactivateChildComponent (vm, direct) {
  if (direct) {
    // 
    vm._directInactive = true;
    if (isInInactiveTree(vm)) {
      return
    }
  }
  if (!vm._inactive) {
    // 已经被停用
    vm._inactive = true;
    // 对子组件一样会执行停用处理
    for (var i = 0; i < vm.$children.length; i++) {
      deactivateChildComponent(vm.$children[i]);
    }
    // 最终调用deactivated钩子
    callHook(vm, 'deactivated');
  }
}
复制代码

_directInactive是用来标记这个被打上停用标签的组件是不是最顶层的组件。而_inactive是停用的标志，一样的子组件也须要递归去调用deactivateChildComponent,打上停用的标记。最终会执行用户定义的deactivated钩子。

13.7.2 activated

如今回过头看看activated的执行时机，一样是patch过程，在对旧节点移除并执行销毁或者停用的钩子后，对新节点也会执行相应的钩子。这也是停用的钩子比启用的钩子先执行的缘由。

function patch(···) {
  // patchVnode过程
  // 销毁旧节点
  {
    if (isDef(parentElm)) {
      removeVnodes(parentElm, [oldVnode], 0, 0);
    } else if (isDef(oldVnode.tag)) {
      invokeDestroyHook(oldVnode);
    }
  }
  // 执行组件内部的insert钩子
  invokeInsertHook(vnode, insertedVnodeQueue, isInitialPatch);
}

function invokeInsertHook (vnode, queue, initial) {
  // delay insert hooks for component root nodes, invoke them after the
  // 当节点已经被插入时，会延迟执行insert钩子
  if (isTrue(initial) && isDef(vnode.parent)) {
    vnode.parent.data.pendingInsert = queue;
  } else {
    for (var i = 0; i < queue.length; ++i) {
      queue[i].data.hook.insert(queue[i]);
    }
  }
}
复制代码

一样的组件内部的insert钩子逻辑以下：

// 组件内部自带钩子
  var componentVNodeHooks = {
    insert: function insert (vnode) {
      var context = vnode.context;
      var componentInstance = vnode.componentInstance;
      // 实例已经被挂载
      if (!componentInstance._isMounted) {
        componentInstance._isMounted = true;
        callHook(componentInstance, 'mounted');
      }
      if (vnode.data.keepAlive) {
        if (context._isMounted) {
          // vue-router#1212
          // During updates, a kept-alive component's child components may // change, so directly walking the tree here may call activated hooks // on incorrect children. Instead we push them into a queue which will // be processed after the whole patch process ended. queueActivatedComponent(componentInstance); } else { activateChildComponent(componentInstance, true /* direct */); } } }, } 复制代码

当第一次实例化组件时，因为实例的_isMounted不存在，因此会调用mounted钩子，当咱们从child2再次切回child1时，因为child1只是被停用而没有被销毁，因此不会再调用mounted钩子，此时会执行activateChildComponent函数对组件的状态进行处理。有了分析deactivateChildComponent的基础，activateChildComponent的逻辑也很好理解，一样的_inactive标记为已启用，而且对子组件递归调用activateChildComponent作状态处理。

function activateChildComponent (vm, direct) {
  if (direct) {
    vm._directInactive = false;
    if (isInInactiveTree(vm)) {
      return
    }
  } else if (vm._directInactive) {
    return
  }
  if (vm._inactive || vm._inactive === null) {
    vm._inactive = false;
    for (var i = 0; i < vm.$children.length; i++) {
      activateChildComponent(vm.$children[i]);
    }
    callHook(vm, 'activated');
  }
}
复制代码

13.8 缓存优化 - LRU

程序的内存空间是有限的，因此咱们没法无节制的对数据进行存储，这时候须要有策略去淘汰不那么重要的数据，保持最大数据存储量的一致。这种类型的策略称为缓存优化策略，根据淘汰的机制不一样，经常使用的有如下三类。

  • 1. FIFO： 先进先出策略，咱们经过记录数据使用的时间，当缓存大小即将溢出时，优先清除离当前时间最远的数据。

  • 2. LRU： 最近最少使用。LRU策略遵循的原则是，若是数据最近被访问(使用)过，那么未来被访问的概率会更高，若是以一个数组去记录数据，当有一数据被访问时，该数据会被移动到数组的末尾，代表最近被使用过，当缓存溢出时，会删除数组的头部数据，即将最不频繁使用的数据移除。

  • 3. LFU: 计数最少策略。用次数去标记数据使用频率，次数最少的会在缓存溢出时被淘汰。

这三种缓存算法各有优劣，各自适用不一样场景，而咱们看keep-alive在缓存时的优化处理，很明显利用了LRU的缓存策略。咱们看关键的代码

var keepAlive = {
  render: function() {
    ···
    if (cache[key]) {
      vnode.componentInstance = cache[key].componentInstance;
      remove(keys, key);
      keys.push(key);
    } else {
      cache[key] = vnode;
      keys.push(key);
      if (this.max && keys.length > parseInt(this.max)) {
        pruneCacheEntry(cache, keys[0], keys, this._vnode);
      }
    }
  }
}

function remove (arr, item) {
  if (arr.length) {
    var index = arr.indexOf(item);
    if (index > -1) {
      return arr.splice(index, 1)
    }
  }
}
复制代码

结合一个实际的例子分析缓存逻辑的实现。

    1. 有三个组件child1,child2,child3,keep-alive的最大缓存个数设置为2
    1. 用cache对象去存储组件vnode,key为组件名字，value为组件vnode对象，用keys数组去记录组件名字，因为是数组，因此keys为有序。
    1. child1,child2组件依次访问，缓存结果为
keys = ['child1', 'child2']
cache = {
  child1: child1Vnode,
  child2: child2Vnode
}
复制代码
    1. 再次访问到child1组件，因为命中了缓存，会调用remove方法把keys中的child1删除，并经过数组的push方法将child1推到尾部。缓存结果修改成
keys = ['child2', 'child1']
cache = {
  child1: child1Vnode,
  child2: child2Vnode
}
复制代码
    1. 访问到child3时，因为缓存个数限制，初次缓存会执行pruneCacheEntry方法对最少访问到的数据进行删除。pruneCacheEntry的定义以下
function pruneCacheEntry (cache,key,keys,current) {
    var cached$$1 = cache[key];
    // 销毁实例
    if (cached$$1 && (!current || cached$$1.tag !== current.tag)) {
      cached$$1.componentInstance.$destroy();
    }
    cache[key] = null;
    remove(keys, key);
  }

复制代码

删除缓存时会把keys[0]表明的组件删除，因为以前的处理，最近被访问到的元素会位于数组的尾部，因此头部的数据每每是最少访问的，所以会优先删除头部的元素。而且会再次调用remove方法，将keys的首个元素删除。

这就是vue中对keep-alive缓存处理的优化过程。


相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程