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) // 缓存虚拟domthis.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原理分析（一）相关推荐

Vue2.0源码解析——编译原理
Vue2.0源码解析--编译原理前言:本篇文章主要对Vue2.0源码的编译原理进行一个粗浅的分析,其中涉及到正则.高阶函数等知识点,对js的考察是非常的深的,因此我们来好好啃一下这个编译原理的部分. ...
Vue2.0源码解析 - 知其然知其所以然之Vue.use
前言小伙伴们大家好.用过Vue的小伙伴都知道,在我们进行Vue开发时,避免不了会使用一些第三方的库,比如说ElementUI组件库.当我们导入好这些组件库后会执行一个Vue.use函数,然后把导进来 ...
vue2.0源码解析(一)
1.先下载vue源码(当前版本为:2.6.11) 地址: git clone https://github.com/vuejs/vue.git 2.切换到package.json dev脚本中 -c ...
Vue2.0源码解析 - 知其然知其所以然之keep-alive
前言 [一天一个小知识,每天进步一点点]小伙伴们大家好,今天将要给大家分享是Vue中关于组件缓存的一个内置组件 - keep-alive 不知道小伙伴们有没有遇到这样一种情况,在我们的项目开发中,有时 ...
锚框、交并比和非极大值抑制（tf2.0源码解析)
锚框.交并比和非极大值抑制(tf2.0源码解析) 文章目录锚框.交并比和非极大值抑制(tf2.0源码解析) 一.锚框生成 1.锚框的宽高 2.锚框的个数 3.注意点(★★★) 4.tf2.0代码二 ...
前端进阶-手写Vue2.0源码（三）｜技术点评
前言今天是个特别的日子祝各位女神女神节快乐哈封面我就放一张杀殿的帅照表达我的祝福哈哈此篇主要手写 Vue2.0 源码-初始渲染原理上一篇咱们主要介绍了 Vue 模板编译原理它是 Vue ...
solrlucene3.6.0源码解析（三）
solr索引操作(包括新增更新删除提交合并等)相关UML图如下从上面的类图我们可以发现,其中体现了工厂方法模式及责任链模式的运用 UpdateRequestProcessor相当于责任链模式 ...
Heritrix 3.1.0 源码解析（八）
本文接着分析存储CrawlURI curi的队列容器,最重要的是BdbWorkQueue类及BdbMultipleWorkQueues类 BdbWorkQueue类继承自抽象类WorkQueue,抽象 ...
Heritrix 3.1.0 源码解析（六）
本文分析BdbFrontier对象的相关状态和方法 BdbFrontier类继承自WorkQueueFrontier类 WorkQueueFrontier类继承自AbstractFrontier类 ...
Heritrix 3.1.0 源码解析（十一）
上文分析了Heritrix3.1.0系统是怎么添加CrawlURI curi对象的,那么在系统初始化的时候,是怎么载入CrawlURI curi种子的呢? 我们回顾前面的文章,在我们执行采集任务的la ...

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

前言

keep-alive整体源码解读

总结

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

最新文章

热门文章