关于javascript:Vue-keepalive源码解析

9次阅读

共计 4313 个字符，预计需要花费 11 分钟才能阅读完成。

1.keep-alive 组件的 props:

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

2.keep-alive 是 vue 的内建组件，所有组件能够通过 components 获取 keep-alive 组件选项（内建组件是以原型的模式保留在 components 对象上，而不是间接保留在 components 上），依据获取到的组件选项创立 keep-alive 组件。

// keep-alive 组件选项
var KeepAlive = {
    name: 'keep-alive',
    abstract: true, // 形象组件
    props: {...},
    created: function created() {this.cache = Object.create(null);// 缓存组件
        this.keys = [];// 缓存组件标识},
    mouted: {...},
    render: {...}
};

3.keep-alive 组件渲染页面调用 render 函数时，先获取 keep-alive 组件标签内的组件标签节点（默认插槽生成的节点，VNode 实例）。再依据组件名称判断节点是否满足缓存的条件，如果不满足间接返回节点，否则判断该节点是否曾经缓存。如果曾经缓存，间接读取之前缓存的组件（Vue 实例），保留到以后节点上，而后返回以后节点。如果未缓存，则缓存以后节点后再返回。缓存的内容是组件，组件本身蕴含了数据状态，依据数据渲染页面，所以组件激活时可能放弃之前的状态。

// keep-alive render 函数
render: function render() {
  var slot = this.$slots.default; // 获取组件内标签节点
  var vnode = getFirstComponentChild(slot);
  var componentOptions = vnode && vnode.componentOptions;
  if (componentOptions) {
    // check pattern
    var name = getComponentName(componentOptions); // 获取组件名称
    var ref = this;
    var include = ref.include;
    var exclude = ref.exclude;
    if (
      // not included
      (include && (!name || !matches(include, name))) || // include 中没有 name
      // excluded
      (exclude && name && matches(exclude, name)) // exclude 中有 name
    ) {return vnode; // 不缓存间接返回}

    var ref$1 = this;
    var cache = ref$1.cache;
    var keys = ref$1.keys;
    var key =
      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;
    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)) {// 超出最大数量限度，销毁最先换成的节点实例(max 为字符串 0 时会报错)
        pruneCacheEntry(cache, keys[0], keys, this._vnode);
      }
    }

    vnode.data.keepAlive = true; // 组件缓存标识，保障组件不被销毁
  }
  return vnode || (slot && slot[0]);
}

4. 缓存组件激活（节点 DOM 插入到页面）时，调用 activated 组件生命周期函数。当缓存组件标签切换，组件节点销毁时，因为组件节点标识 keepAlive 为 true，并不会调用 &dollar;destory 销毁组件，而是解冻组件并触发 deactivated 组件生命周期函数，同时将组件对应的 DOM 从文档中移除。

// 节点生命周期
var componentVNodeHooks = {
    ...
    insert: function insert (vnode) {
        var context = vnode.context;
        var componentInstance = vnode.componentInstance;
        if (!componentInstance._isMounted) {
        componentInstance._isMounted = true;
        callHook(componentInstance, 'mounted');// 插入到 DOM 后触发
        }
        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 */);// 激活组件
        }
        }
    },
    ...
    destroy: function destroy (vnode) {// 节点销毁时的生命周期函数
        var componentInstance = vnode.componentInstance;
        if (!componentInstance._isDestroyed) {if (!vnode.data.keepAlive) {// 是不是 keep-alive 中的缓存组件
            componentInstance.$destroy();} else {deactivateChildComponent(componentInstance, true /* direct */);
        }
        }
    }
};
// 激活组件
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');
  }
}
// 解冻组件
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]);// 解冻子组件
    }
    callHook(vm, 'deactivated');// 调用组件解冻生命周期函数
  }
}

5.keep-alive 是通过 include 和 exclude 判断组件是否缓存。在 keep-alive 组件 mounted 生命周期函数中，通过组件内置的 &dollar;watch 办法监测 include 和 exclude 值的变动，当发生变化时，依据变动后的值判断以后曾经缓存的组件哪些不满足缓存条件，不满足缓存条件的革除组件缓存。通过 include 和 exclude 能够实现动静缓存，例如人员列表页面跳转到车辆列表页面不缓存，然而跳转到人员详情页缓存，就能够页面跳转前更改 include 或者 exclude 值，更新缓存条件，实现动静缓存。

// keep-alive props
props: {
    include: patternTypes,
    exclude: patternTypes,
    max: [String, Number],
}

// keep-alive mouted 生命周期函数
mounted: function mounted() {
  var this$1 = this;

  this.$watch("include", function (val) {
    // 监测 include 属性值变动
    pruneCache(this$1, function (name) {return matches(val, name);
    }); // 当组件不满足缓存条件时销毁
  });
  this.$watch("exclude", function (val) {
    // 监测 exclude 属性值变动
    pruneCache(this$1, function (name) {return !matches(val, name);
    }); // 当组件不满足缓存条件时销毁
  });
}

6.keep-alive组件销毁时，同时也会销毁缓存的组件。

// keep-alive destroyed 生命周期函数
destroyed: function destroyed() {for (var key in this.cache) {pruneCacheEntry(this.cache, key, this.keys); // 销毁组件
  }
}

正文完