Vue2.0源码解析 - 知其然知其所以然之keep-alive原理分析(一)

189 阅读3分钟

小知识,大挑战!本文正在参与“程序员必备小知识”创作活动

本文同时参与「掘力星计划」,赢取创作大礼包,挑战创作激励金

前言

【一天一个小知识,每天进步一点点】小伙伴们大家好。上一篇文章Vue2.0源码解析 - 知其然知其所以然之keep-alive给大家分享了Vue2.0中关于内置组件keep-alive的作用和用法,通过学习让我们知道原来vue中的组件也是可以缓存的,不是每个组件都必须得销毁。那么知道了keep-alive的作用和用法了,不知有没有小伙伴好奇:它是怎么实现缓存的呢,它的原理又是怎样的?接下来即将为大家揭晓。

keep-alive整体源码解读

前面我们说过,keep-alive是vue中的一个内置组件,既然是组件那么肯定就有组件的共同特点。比如props,methods,data,生命周期函数等等。下面我们就分段对源码进行解读,看看它是如何实现缓存的。

源码路径:src/core/components/keep-alive.js 源码版本:2.6.12

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

  props: {
    include: [String, RegExp, Array], // 符合条件的组件都会被缓存起来
    exclude: [String, RegExp, Array], // 排除符合条件的组件,不会缓存
    max: [String, Number] // 缓存的组件实例的最大个数
  },
 
  methods: {
  	cacheVNode(){
  		//...
  	}
  },
  
  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.cacheVNode();
    // 实时监听黑白名单的变动
    this.$watch('include', val => {
      pruneCache(this, name => matches(val, name))
    })
    this.$watch('exclude', val => {
      pruneCache(this, name => !matches(val, name))
    })
  },
  updated(){
  	this.cacheVNode();
  },
  render () {
    // ...
  }
}

以上是keep-alive部分源码,我们先从简单开始一步步分析。

  • 首先我们看到了props中的include,exclude和max三个属性的定义,这就是我们之前使用keep-alive时提到的用于匹配缓存组件的属性,这就就不在赘述了
  • methods中有个用来缓存虚拟dom的方法cacheVNode,这里先不展开分析,后面会详细讲解
  • created:生命周期函数中创建了两个实例属性cache空对象和keys数组。分别用于保存虚拟dom的实例和虚拟dom的key
  • destroyed:在组件销毁后同时清空所有的缓存组件,pruneCacheEntry是本组件中定义的一个公共方法,后续详细分析
  • mounted:组件挂载后调用methods中定义的cacheVNode函数对虚拟dom进行缓存;同时对include和exclude进行监听,一旦这两个属性发生变化便立即执行pruneCache函数对缓存进行修改。pruneCache也是本组件中定义的一个公共方法,后续详细分析。
  • updated:组件更新后也会调用methods中定义的cacheVNode函数对虚拟dom进行缓存
  • render:在render函数中会获取将要被展示的组件对应的虚拟DOM,如果组件已被缓存则直接从缓存中读取,后续详细分析。

总结

为了循序渐进的掌握keep-alive的实现原理,本文并没有对每个函数进行详细的展开分析,对keep-alive源码的整体框架进行了一个简单的梳理,先让我们大概有个印象:keep-alive组件在每个不同阶段都做了哪些事,下一篇文章中我们将详细对每个函数进行展开分析,从而让我们彻底的掌握keep-alive的工作原理。希望小伙伴们多多支持。 喜欢的小伙伴欢迎点赞留言加关注哦!