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

迷南。 2022-09-16 00:29 86阅读 0赞

### 前言 ###

> 【一天一个小知识，每天进步一点点】小伙伴们大家好。上一篇文章[Vue2.0源码解析 - 知其然知其所以然之keep-alive][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的工作原理。希望小伙伴们多多支持。  
> 喜欢的小伙伴欢迎点赞留言加关注哦！

[Vue2.0_ - _keep-alive]: https://blog.csdn.net/lixiaosenlin/article/details/120744938