阅读 247

从keep-alive看vue内部如何实现组件缓存

image.png

都知道keep-alive是用于vue中组件缓存的,那内部如何实现缓存的呢,一起来看看吧

先放简单的文章导图:

image.png

1.keep-alive 在vue中起到什么作用

先来看看官网对keep-alive的一些功能说明:

组件之间切换的时候,你有时会想保持这些组件的状态,以避免反复重渲染导致的性能问题。

就可以使用到keep-alive,它可以用来进行动态组件的缓存

  • 组件复用,提高性能
  • 缓存不太使用的组件,而不是直接销毁

2.实际项目如何使用

2.1正常情况下组件跳转

在项目中用到的比较多的,就是使用动态路由。下面举个栗子:

直接使用命令 vue create hello-world 创建一个新的项目 几个文件稍微改动一下,主要看router 和view下面的两个home about 组件,在这两个路由组件进行跳转的时候,组件会销毁 效果如下: 当我们尝试切换(已经填了数据的)组件的时候,destroyed()函数,组件销毁,里面的数据也没有了。

1.gif 代码如下 App.vue:

<template>
  <div id="app">
    <div id="nav">
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link>
    </div>
    <router-view/>
  </div>
</template>
复制代码

router/index.js:

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
  }
]

const router = new VueRouter({
  routes
})

export default router

复制代码

view/about.vue:

<template>
  <div class="about">
    <input type="text">
  </div>
</template>
<script>
export default {
  name:"about",
  destroyed() {
    console.log('组件被销毁')
  }
}
</script>
复制代码

view/home.vue:

<template>
  <div class="home">
    <input type="text">
  </div>
</template>

<script>

export default {
  name: 'home',
  destroyed() {
    console.log('组件被销毁')
  }
}
</script>

复制代码

2.2 使用keep-alive 缓存组件

当跳转组件的时候,能缓存之前的组件,不销毁

2.gif 只需修改上面的App.vue组件即可:

<template>
  <div id="app">
    <div id="nav">
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link>
    </div>
    <keep-alive>
      <router-view />
    </keep-alive>
    
  </div>
</template>
复制代码

2.3 keep-alive 控制组件是否缓存

在实际项目开发的时候,我们可能需要具体的某个项目可以进行缓存,那么如何通过keep-alive来实现呢?

keep-alive的参数有以下三种:

  1. include: [String,RegExp,Array] 只有匹配到的组件才能进行缓存
<keep-alive include="home">
   <router-view />
</keep-alive>
复制代码
  1. exclude:[String,RegExp,Array] 匹配到的组件都不缓存
<keep-alive include="about">
   <router-view />
</keep-alive>
复制代码
  1. max: [String,Number] 数字,最多能缓存多少组件实例。在新实例创建之前,缓存中最就没有使用的实例会被销毁

3.keep-alive 中源码是如何实现缓存

源码在这:

image.png

image.png

主要是分析下面的cacheVNdoe 以及生命周期钩子 render函数,下面一起来看看吧(大部分都在注释里面)

3.1 cacheVNode()

 cacheVNode() {
      const { cache, keys, vnodeToCache, keyToCache } = this
      if (vnodeToCache) {
        const { tag, componentInstance, componentOptions } = vnodeToCache
        cache[keyToCache] = {
          name: getComponentName(componentOptions),
          tag,
          componentInstance,
        }
        keys.push(keyToCache)
        // prune oldest entry
        if (this.max && keys.length > parseInt(this.max)) {
          pruneCacheEntry(cache, keys[0], keys, this._vnode)
        }
        this.vnodeToCache = null
      }
    }
复制代码

3.2 created():

定义两个属性

this.cache = Object.create(null)
this.keys = []
复制代码

this.cache是一个对象,用来存储需要缓存的组件

this.cache = {
    'key1':'组件1',
    'key2':'组件2'
    、、、
}
复制代码

this.keys是以一个数组,用来存储每个需要缓存的组件的key,即对应this.cache对象中的键值。

3.3 destoryed()

该钩子会遍历this.cache对象,然后将那些被缓存的并且当前没有处于被渲染状态的组件都销毁掉,并将其从this.cache对象中移除

destoryed() {
    for (const key in this.cache) {
        pruneCacheEntery(this.cache,key,this.keys);
    }
}

function pruneCacheEntery(cache,key,keys,current) {
    const cached = cache[key]
    if (cached &&& (!current || cached.tag !== current.tag)) {
        cached.componentInstance.$destory()
    }
    cache[key] = null
    remove(keys,key)
}
复制代码

3.4 mounted()

在mounted中观测 include exclude的变化

mounted () {
    this.$watch('include', val => {
        pruneCache(this, name => matches(val,name))
    })
    this.$watch('exclude', val => {
        pruneCache(this, name => !matches(val,name))
    })
}
复制代码

3.5 render()

keep-alive如何实现缓存

  1. 获取第一个子组件的节点
const slot = this.$solts.default
const vnode = getFirstComponentChild(solt)
复制代码

只处理第一个子元素,所以一般和它搭配使用的有 component 动态组件或者是 router-view。

  1. 获取该组件节点的名称
/* 获取该组件节点的名称 */
const name = getComponentName(componentOptions)

/* 优先获取组件的name字段,如果name不存在则获取组件的tag */
function getComponentName (opts: ?VNodeComponentOptions): ?string {
  return opts && (opts.Ctor.options.name || opts.tag)
}
复制代码
  1. 用组件名称跟include exclude 中的普配规则取匹配
  • 如果name与index规则不匹配或者与exclude规则匹配,表示不缓存该组件,直接返回这个组件的vnode就可以
const { include, exclude } = this
if (
    (include && (!name || !matches(include, name))) ||
    (exclude && name && !matches(exclude,name))
) {
    return vnode
}
复制代码
  • 否则进行缓存
const { cache, keys } = this
// 获取组件的key值
const key = vnode.key == null?
componentOptions.Ctor.cid + (componentOptions.tag ? `::${componentOptions.tag}` : '')
: vnode.key

//拿到key值后取this.cach对象中寻找是否有该值,如果有,说明组件有缓存,命中缓存
/* 如果命中缓存,则直接从缓存中拿 vnode 的组件实例 */
if (cache[key]) {
    vnode.componentInstance = cache[key].componentInstance
    /* 调整该组件key的顺序,将其从原来的地方删掉并重新放在最后一个 */  
    remove(keys, key)
    keys.push(key)
} else {
    cache[key] = vnode
    keys.push(key)
    /* 如果配置了max并且缓存的长度超过了this.max,则从缓存中删除第一个 */
    if (this.max && keys.length > parseInt(this.max)) {
        pruneCacheEntry(cache, keys[0], keys, this._vnode)
    }
}
// 如果没有,则将组件存入缓存
复制代码

LRU 最近最少使用

当使用keep-alive后,组件将不会进行created和mounted,但是有的时候我们需要在组件里面执行一定的操作,用的是activated和deactivated 两个钩子函数,它的执行时机是 包裹的组件激活时调用和停用时调用

4. LRU 缓存机制

调整该组件key的顺序,将其从原来的地方删掉并重新放在最后一个 ,在上面的注释中,有这么一句话,把这个现在用了的节点从原先的地方删掉,再放到最后一个,这是啥意思?

其实这就是LRU缓存机制的核心,LRU(Least recently used,最近最少使用)算法根据数据的历史访问记录来进行淘汰数据,其核心思想是“如果数据最近被访问过,那么将来被访问的几率也更高”。

最后的最后,来一道力扣算法题: image.png LRU缓存

var LRUCache = function(capacity) {
  this.size = capacity  //缓存大小
  this.map = new Map() // 使用map作为缓存结构
};

// LRUCache的原型对象上有两个方法 get(获取值) 和 put(修改/增加值)
LRUCache.prototype.get = function(key) {
// 如果get取的这个值之前就在map里面,需要把原先位置删掉,再把这个值重新加入,再返回要获取的这个值
  if(this.map.has(key)){  
    let value = this.map.get(key)  // 先缓存值
    this.map.delete(key)           // 删除
    this.map.set(key, value)       // 重新加入
    return value
  } else {                         // 不存在直接返回 -1
    return -1
  }
};
// 如果之前就存在,直接删除,再加入,
// 如果之前不存在再加入(再加入的过程中要先判断它的大小是否超出,
// 如果超出就要再加入这个数据之前,
// 把map里面那个最久没有使用的先删掉,再加入需要加入的值)
LRUCache.prototype.put = function(key, value) {
  if(this.map.has(key)){          // 存在就先删除
    this.map.delete(key) 
  } 
  this.map.set(key, value)        // 加入
  if(this.map.size > this.size){  // 超出就删除 先加入的
  // 找到map中的第一条
    this.map.delete(this.map.keys().next().value)
  }
};
复制代码

5. 总结

  1. keep-alive 是vue的一个内置组件,主要是用来控制组件的缓存,它可以设置三个参数,来设置哪个组件需要被缓存,或者不被缓存,同时还有设置最大的缓存大小
  2. 在分析keep-alive的缓存策略是,使用的是LRU缓存淘汰策略。
  3. LRU缓存策略的核心,主要是每次被访问(读取或修改)的那个数据,被期望是之后被用到的概率最大的那个数据,因此需要做处理

以上就是有关对keep-alive这个知识点的一些总结和归纳

有问题欢迎评论区指正

image.png

文章分类
前端
文章标签