道招

vue内置组件keep-alive源码解析

如果您发现本文排版有问题,可以先点击下面的链接切换至老版进行查看!!!

vue内置组件keep-alive源码解析

很简单,我们直接看vue的源码即可。 keep-alive组件支持三个属性。

props: {
    include: patternTypes,
    exclude: patternTypes,
    max: [String, Number]
},

其中patternTypes = [String, RegExp, Array]; 组件在created周期时初始化自己的记录集合

created: function created () {
    this.cache = Object.create(null); // 以组件实例的 key和vnode作为key-value存入其中
    this.keys = []; // 存储组件实例的 key
},

mounted周期里面开始注册自己的watch,watch自己的includeexclude属性进行pruneCache

mounted: function mounted () {
    var this$1 = this;

    this.$watch('include', function (val) {
      pruneCache(this$1, function (name) { return matches(val, name); });
    });
    this.$watch('exclude', function (val) {
      pruneCache(this$1, function (name) { return !matches(val, name); });
    });
},

里面的几个辅助函数主要是用来比较组件是否需要缓存和操作缓存的。

function getComponentName (opts) {
  return opts && (opts.Ctor.options.name || opts.tag) // 获取组件的名字或者tag
}

function matches (pattern, name) { // 支持多种格式的匹配
  if (Array.isArray(pattern)) {
    return pattern.indexOf(name) > -1
  } else if (typeof pattern === 'string') {
    return pattern.split(',').indexOf(name) > -1
  } else if (isRegExp(pattern)) {
    return pattern.test(name)
  }
  /* istanbul ignore next */
  return false
}

function pruneCache (keepAliveInstance, filter) {
  var cache = keepAliveInstance.cache; // 在keep-alive组件created时创建的
  var keys = keepAliveInstance.keys; // 同上
  var _vnode = keepAliveInstance._vnode;
  for (var key in cache) {
    var cachedNode = cache[key];
    if (cachedNode) {
      var name = getComponentName(cachedNode.componentOptions);
      if (name && !filter(name)) {
        pruneCacheEntry(cache, key, keys, _vnode);//  对于不符合include或exclude规则的组件实例调整对应的cache
      }
    }
  }
}

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; // 在cache对象和keys数组里面同步删除该key
  remove(keys, key);
}

复杂点的部分就是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))) ||
        // 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
        // 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 // 在原位置移除再重新推入,确保key在keys最后面(即最新的)
        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])
}
更新时间:
上一篇:以webpack为例来看微内核架构下一篇:Javascript去除内容格式并匹配目标格式粘贴

相关文章

vue多语言的解决方案不只是 vue-i18n,前端+后端完整解决方案

网上搜很多vue多语言的,一般都是介绍vue-i18n怎么使用,当然这是不错的,但是我们如果只是讲这个的话,只是解决了静态文字的多语言化。 这一部分我们也简单讲一下 npm install 阅读更多…

从vuecli3学习webpack记录(一)vue-cli-serve机制

最近看了看vuecli3,把自己的学习记录下来。 首先看入口 npm run dev 即是 vue-cli-service serve ,之所以能运行 vue-cli-service 命令,就是 阅读更多…

邮箱收件人组件(vue版)成长历程(一)

前期项目中需要优化原始的收件人、抄送、密送部分,换成更加现代化的样式和用户,当时将这部分抽象成一个组件了,最近的需求是发件人也要使用该组件,鉴于发件人比收件人等需要校验的地方和交互习惯变动点较多,进 阅读更多…

Vue同一路由跳转页面不刷新解决方案及注意事项之二

之前写过一个 《Vue同一路由跳转页面不刷新解决方案及注意事项》 ,在这篇文章里面鞋到了怎么解决这个问题,具体内容可以点击查看,这里简单说一下,就是利用将时间戳传给路由的query,也就导致 $ro 阅读更多…

el-table实现动态列el-table-column

element-ui的官网有el-table实现自定义表头的demo,没错,实现动态列就是用的这个。 假设我们有个这样的添加动态列的需求:将班上的同学(人数不固定)的各科成绩根据姓名横向展示出来 阅读更多…

Vue2.6.10源码分析(一)vue项目怎么神奇的跑起来的

先看index.html的代码吧 <!DOCTYPE html> <html lang="en"> <head> <meta 阅读更多…

关注道招网公众帐号
友情链接
消息推送
道招网关注互联网,分享IT资讯,前沿科技、编程技术,是否允许文章更新后推送通知消息。
允许
不用了