聊聊 keep-alive 组件的使用及其实现原理

简介: 聊聊 keep-alive 组件的使用及其实现原理

keep-alive

keep-alive是Vue.js的一个内置组件。它能够不活动的组件实例保存在内存中,而不是直接将其销毁,它是一个抽象组件,不会被渲染到真实DOM中,也不会出现在父组件链中。

它提供了include与exclude两个属性,允许组件有条件地进行缓存。

具体内容可以参考官网

使用

用法

<keep-alive>
    <component></component>
</keep-alive>

这里的component组件会被缓存起来。

举个栗子

<keep-alive>
    <coma v-if="test"></coma>
    <comb v-else></comb>
</keep-alive>
<button @click="test=handleClick">请点击</button>
export default {
    data () {
        return {
            test: true
        }
    },
    methods: {
        handleClick () {
            this.test = !this.test;
        }
    }
}

在点击button时候,coma与comb两个组件会发生切换,但是这时候这两个组件的状态会被缓存起来,比如说coma与comb组件中都有一个input标签,那么input标签中的内容不会因为组件的切换而消失。

props

keep-alive组件提供了include与exclude两个属性来允许组件有条件地进行缓存,二者都可以用逗号分隔字符串、正则表达式或一个数组来表示。

<keep-alive include="a">
  <component></component>
</keep-alive>

将缓存name为a的组件。

<keep-alive exclude="a">
  <component></component>
</keep-alive>

name为a的组件将不会被缓存。

生命钩子

keep-alive提供了两个生命钩子,分别是activated与deactivated。

因为keep-alive会将组件保存在内存中,并不会销毁以及重新创建,所以不会重新调用组件的created等方法,需要用activated与deactivated这两个生命钩子来得知当前组件是否处于活动状态。


深入keep-alive组件实现

说完了keep-alive组件的使用,我们从源码角度看一下keep-alive组件究竟是如何实现组件的缓存的呢?

created与destroyed钩子

created钩子会创建一个cache对象,用来作为缓存容器,保存vnode节点。

created () {
    /* 缓存对象 */
    this.cache = Object.create(null)
},

destroyed钩子则在组件被销毁的时候清除cache缓存中的所有组件实例。

/* destroyed钩子中销毁所有cache中的组件实例 */
destroyed () {
    for (const key in this.cache) {
        pruneCacheEntry(this.cache[key])
    }
},

render

接下来是render函数。

render () {
    /* 得到slot插槽中的第一个组件 */
    const vnode: VNode = getFirstComponentChild(this.$slots.default)

    const componentOptions: ?VNodeComponentOptions = vnode && vnode.componentOptions
    if (componentOptions) {
        // check pattern
        /* 获取组件名称,优先获取组件的name字段,否则是组件的tag */
        const name: ?string = getComponentName(componentOptions)
        /* name不在inlcude中或者在exlude中则直接返回vnode(没有取缓存) */
        if (name && (
        (this.include && !matches(this.include, name)) ||
        (this.exclude && matches(this.exclude, name))
        )) {
            return vnode
        }
        const key: ?string = 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
        /* 如果已经做过缓存了则直接从缓存中获取组件实例给vnode,还未缓存过则进行缓存 */
        if (this.cache[key]) {
            vnode.componentInstance = this.cache[key].componentInstance
        } else {
            this.cache[key] = vnode
        }
        /* keepAlive标记位 */
        vnode.data.keepAlive = true
    }
    return vnode
}

首先通过getFirstComponentChild获取第一个子组件,获取该组件的name(存在组件名则直接使用组件名,否则会使用tag)。接下来会将这个name通过include与exclude属性进行匹配,匹配不成功(说明不需要进行缓存)则不进行任何操作直接返回vnode,vnode是一个VNode类型的对象,不了解VNode的同学可以参考笔者的另一篇文章《VNode节点》 .

/* 检测name是否匹配 */
function matches (pattern: string | RegExp, name: string): boolean {
  if (typeof pattern === 'string') {
    /* 字符串情况,如a,b,c */
    return pattern.split(',').indexOf(name) > -1
  } else if (isRegExp(pattern)) {
    /* 正则 */
    return pattern.test(name)
  }
  /* istanbul ignore next */
  return false
}

检测include与exclude属性匹配的函数很简单,include与exclude属性支持字符串如"a,b,c"这样组件名以逗号隔开的情况以及正则表达式。matches通过这两种方式分别检测是否匹配当前组件。

if (this.cache[key]) {
    vnode.componentInstance = this.cache[key].componentInstance
} else {
    this.cache[key] = vnode
}

接下来的事情很简单,根据key在this.cache中查找,如果存在则说明之前已经缓存过了,直接将缓存的vnode的componentInstance(组件实例)覆盖到目前的vnode上面。否则将vnode存储在cache中。

最后返回vnode(有缓存时该vnode的componentInstance已经被替换成缓存中的了)。

watch

用watch来监听pruneCache与pruneCache这两个属性的改变,在改变的时候修改cache缓存中的缓存数据。

watch: {
    /* 监视include以及exclude,在被修改的时候对cache进行修正 */
    include (val: string | RegExp) {
        pruneCache(this.cache, this._vnode, name => matches(val, name))
    },
    exclude (val: string | RegExp) {
        pruneCache(this.cache, this._vnode, name => !matches(val, name))
    }
},

来看一下pruneCache的实现。

/* 修正cache */
function pruneCache (cache: VNodeCache, current: VNode, filter: Function) {
  for (const key in cache) {
    /* 取出cache中的vnode */
    const cachedNode: ?VNode = cache[key]
    if (cachedNode) {
      const name: ?string = getComponentName(cachedNode.componentOptions)
      /* name不符合filter条件的,同时不是目前渲染的vnode时,销毁vnode对应的组件实例(Vue实例),并从cache中移除 */
      if (name && !filter(name)) {
        if (cachedNode !== current) {
          pruneCacheEntry(cachedNode)
        }
        cache[key] = null
      }
    }
  }
} 

/* 销毁vnode对应的组件实例(Vue实例) */
function pruneCacheEntry (vnode: ?VNode) {
  if (vnode) {
    vnode.componentInstance.$destroy()
  }
}

遍历cache中的所有项,如果不符合filter指定的规则的话,则会执行pruneCacheEntry。pruneCacheEntry则会调用组件实例的$destroy方法来将组件销毁。

最后

Vue.js内部将DOM节点抽象成了一个个的VNode节点,keep-alive组件的缓存也是基于VNode节点的而不是直接存储DOM结构。它将满足条件(pruneCache与pruneCache)的组件在cache对象中缓存起来,在需要重新渲染的时候再将vnode节点从cache对象中取出并渲染。

目录
相关文章
|
iOS开发 MacOS
LabVIEW如何使用热键去触发自定义的事件
LabVIEW如何使用热键去触发自定义的事件
302 1
|
Java
Java 对象间关系(依赖、关联、聚合和组合)
面向对象设计 对象间关系:依赖、关联、聚合和组合,四种关系容易混淆。特别后三种,只是在语义上有所区别,所谓语义就是指上下文环境、特定情景等。 
1073 1
|
存储 传感器 编解码
turtlebot3 在gazebo仿真下 通过 gmapping slam 建立二维平面地图——全过程
turtlebot3 在gazebo仿真下 通过 gmapping slam 建立二维平面地图——全过程
turtlebot3 在gazebo仿真下 通过 gmapping slam 建立二维平面地图——全过程
|
2月前
|
Kubernetes API Go
利用k8s client-go库创建CRD的informer的操作流程
以上步骤将创建一个针对特定 CRD 的 informer,该 informer 会触发相应的事件处理程序以便您对事件进行响应。这是一个高级的方案,需要对 Go 编程语言和 Kubernetes 内部机制有深入的了解。在应用之前,强烈建议深入了解 Kubernetes client-go 库以及其工作原理。
125 9
|
7月前
|
关系型数据库 分布式数据库 数据库
PolarDB 开源基础教程系列 6 开源插件扩展
1、当前环境已安装并支持哪些插件 2、AI外脑插件: vector 3、营销场景目标人群圈选插件: smlar 4、地理信息搜索插件: PostGIS 5、中文分词插件: pg_jieba 6、融合计算插件: duckdb_fdw 7、读写分离工具: pgpool-II
304 5
教育技术工具盘点:五大免费软件助力教师信息化
随着科技的发展,学校在管理、教学等方面逐步引入信息技术,提升教师专业技能。本文推荐了几款实用的教育技术工具,如草料二维码、101教育PPT、格式工厂、小猿口算和万彩动画大师,以提高教学效率。草料二维码适用于教学资源电子化、信息收集等工作,101教育PPT则提供丰富的PPT资源,方便教师备课和互动教学。其他工具也各具特色,助力教学创新。
408 10
教育技术工具盘点:五大免费软件助力教师信息化
|
11月前
|
人工智能 开发框架 搜索推荐
探索移动应用开发的未来:技术趋势与系统创新
【9月更文挑战第35天】在数字时代的浪潮中,移动应用和操作系统正塑造着我们日常生活的方方面面。本文旨在深入探讨移动应用开发的新趋势,包括跨平台开发框架的兴起、人工智能的融合、以及用户体验设计的革新。同时,将分析移动操作系统的演化,如Android和iOS的最新更新,以及它们对开发者社区的影响。通过实际代码示例,我们将揭示如何利用这些技术进步来创建更智能、更互动的移动应用。文章不仅为开发者提供实用的指导,也为对未来移动技术感兴趣的读者提供洞见。
|
11月前
|
机器学习/深度学习 人工智能 算法
AI在医疗健康领域的应用
随着人工智能技术的不断发展,其在医疗健康领域的应用也日益广泛。从辅助诊断、个性化治疗方案的制定,到疾病预防和健康管理,AI技术都在发挥着重要作用。本文将探讨AI在医疗健康领域的应用,包括其在医学影像分析、基因编辑、药物研发等方面的应用,以及其对医疗行业未来发展的影响。
|
JavaScript 网络协议 数据处理
Node.js中的Buffer与Stream:深入解析与使用
【4月更文挑战第30天】本文深入解析了Node.js中的Buffer和Stream。Buffer是处理原始数据的全局对象,适用于TCP流和文件I/O,其大小在V8堆外分配。创建Buffer可通过`alloc`和`from`方法,它提供了读写、切片和转换等操作。Stream是处理流式数据的抽象接口,分为可读、可写、双工和转换四种类型,常用于处理大量数据而无需一次性加载到内存。通过监听事件和调用方法,如读取文件的可读流示例,可以实现高效的数据处理。理解和掌握Buffer及Stream能提升Node.js应用的性能。
|
数据采集 数据可视化 算法
Python在大数据分析中的力量:Pandas、NumPy与SciPy
【4月更文挑战第8天】Pandas、NumPy和SciPy是Python数据分析的核心,构成其在大数据领域的重要地位。Pandas提供高效的数据操作,包括DataFrame和Series结构,以及数据清洗和预处理工具。NumPy专注于数组计算,提供高性能的ndarray和数学函数。SciPy则包含专业算法,适用于科学与工程计算。这三者协同工作,覆盖数据分析的全过程,形成强大的Python生态系统。随着社区的不断创新和新库的涌现,如Dask和CuDF,Python在大数据分析领域的潜力将持续增长。
640 0