深入理解VUE的keep-alive

1.keep-alive 功能介绍

<keep-alive>是一个内置组件,它的功能是在多个组件间动态切换时缓存被移除的组件实例。

比如:实际页面业务中,申请页面可能需要填写多页或者多张表单,需要缓存已填写的表单信息,在页面或者组件切换中,数据不会被销毁。个时候就可以用到 <keep-alive>。或者是移动端项目,用户在进行返回操作时,希望保持之前的页面内用。

2.组件核心逻辑

基本思想

<keep-alive> 是一种抽象组件,被其包括的组件,如果组件的name(组件名称属性),满足include(包含) 和 exclude(不包含) 以及max(缓存组件的最大数量), 那么遵循LRU算法,将组件们状态存储,并且给每个组件添加新的生命周期activated(活跃状态),deactivated(熄火状态)

LRU算法

LRU是Least Recently Used的缩写,是一种页面置换算法。其核心思想是如果数据最近被访问过,那么将来被访问的几率也更高。
那么keep-alive 缓存组件时,1.如果判断缓存数组中没有该组件,且当前缓存长度已是最大,会把数组最后存放的组件踢出后再存放数组第一位。2.如果判断缓存数组中有该组件,由于LRU算法, 将缓存数组中的该组件剔除,再存放数组第一位。

新增的生命周期执行顺序

2.1. 使用<keep-alive>包裹的组件,在初次渲染时会调用组件的依次调用:created、beforeMount、mounted、activated
2.2 在组件被切换或者使用v-if = false隐藏时, 组件内部会调用deactivated生命周期。

3.核心源码分析

内部生命周期

created () {
    /* 缓存对象  created钩子会创建一个cache对象,用来保存vnode节*/
    this.cache = Object.create(null)
},
/* destroyed 钩子则会调用pruneCacheEntry方法清除cache缓存中的所有组件实例 */
destroyed () {
    for (const key in this.cache) {
        pruneCacheEntry(this.cache[key])
    }
},

render函数

render () {
    /* 得到slot插槽中的第一个组件 */
    const vnode: VNode = getFirstComponentChild(this.$slots.default)
    const componentOptions: ?VNodeComponentOptions = vnode && vnode.componentOptions
    if (componentOptions) {
        // 获取组件名称,优先获取组件的name字段,否则是组件的tag
        const name: ?string = getComponentName(componentOptions)
        // 不需要缓存,则返回 vnode
        if (name && (
        (this.include && !matches(this.include, name)) ||
        (this.exclude && matches(this.exclude, name))
        )) {
            return vnode
        }
        // 生成唯一标识
        const key: ?string = vnode.key == null
            ? componentOptions.Ctor.cid + (componentOptions.tag ?`::${componentOptions.tag}` : '')
            : vnode.key
        // LRU算法
        const { cache, keys } = this
	    const key: ?string = vnode.key == null
	        ? componentOptions.Ctor.cid + (componentOptions.tag ? `::${componentOptions.tag}` : '')
	        : vnode.key
      	if (cache[key]) {
      		// 如果存在,那么移除之前,再次存放到数组第一位。
        	vnode.componentInstance = cache[key].componentInstance
        	remove(keys, key)
        	keys.push(key)
      	} else {
      		// 如果是新的组件
        		cache[key] = vnode
        		keys.push(key)
        	if (this.max && keys.length > parseInt(this.max)) {
        	// 删除最后的数据并且把新放在第一位
          		pruneCacheEntry(cache, keys[0], keys, this._vnode)
        	}	
      	}
        // keepAlive标记
        vnode.data.keepAlive = true
    }
    return vnode
}

相关推荐

  1. 深入理解VUEkeep-alive

    2024-04-02 06:40:04       4 阅读
  2. Vuekeep-alive缓存组件理解

    2024-04-02 06:40:04       25 阅读
  3. Vuekeep-alive缓存组件理解

    2024-04-02 06:40:04       18 阅读
  4. 前端基础 keep-alive使用(Vue)

    2024-04-02 06:40:04       28 阅读
  5. Vue-组件缓存-keep-alive

    2024-04-02 06:40:04       23 阅读

最近更新

  1. npm常用命令详解

    2024-04-02 06:40:04       0 阅读
  2. 生活无趣感的成因与破解之道

    2024-04-02 06:40:04       0 阅读
  3. 大数据集群中部署Hive

    2024-04-02 06:40:04       0 阅读
  4. CMake

    CMake

    2024-04-02 06:40:04      0 阅读
  5. Hive进阶Day06

    2024-04-02 06:40:04       0 阅读

热门阅读

  1. 禁止软件访问外网

    2024-04-02 06:40:04       3 阅读
  2. Git简介

    Git简介

    2024-04-02 06:40:04      2 阅读
  3. kafka面试常见问题

    2024-04-02 06:40:04       6 阅读