您好,登录后才能下订单哦!
本篇文章为大家展示了keep-alive组件的缓存原理是什么,内容简明扼要并且容易理解,绝对能使你眼前一亮,通过这篇文章的详细介绍希望你能有所收获。
官方API介绍和用法
<keep-alive> 包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们。
和 <transition> 相似,<keep-alive> 是一个抽象组件:它自身不会渲染一个 DOM 元素,也不会出现在组件的父组件链中。
当组件在 <keep-alive> 内被切换,它的 activated 和 deactivated 这两个生命周期钩子函数将会被对应执行。
官网的例子是 tab 切换保存了用户的操作,实际中还可能遇到从列表页跳转去了详情页,再跳转回列表页需要保存用户进行过的筛选操作,这就需要用到 <keep-alive>,这样也能避免重新渲染,提高页面性能。
// keep-alive组件搭配动态组件的用法,还要其他的用法参见官网 <keep-alive include="['componentNameA', 'componentNameB']" exclude="'componentNameC'" :max="10"> <component :is="view"></component> </keep-alive>
include - 字符串或正则表达式或数组,name匹配上的组件会被缓存
exclude - 字符串或正则表达式或数组,name匹配上的组件都不会被缓存
max - 字符串或数字,缓存组件实例的最大数,最久没有被访问的实例会被销毁掉
注意:
<keep-alive> 只渲染其直系的一个组件,因此若在 <keep-alive> 中用 v-for,则其不会工作,若多条件判断有多个符合条件也同理不工作。
include 和 exclude 匹配时,首先检查组件的 name 选项,若 name 选项不可用,则匹配它的局部注册名称 (即父组件 components 选项的键值)。匿名组件不能被匹配。
<keep-alive> 不会在函数式组件中正常工作,因为它们没有缓存实例。
先贴一张源码图
总共125行,收起来一看其实东西也比较少。前面是引入一些需要用到的方法,然后定义了一些 keep-alive 组件自己会用到的一些方法,最后就是向外暴露一个 name 为 keep-alive 的组件选项,这些选项除了 abstract 外,其他的我们都比较熟悉了,其中, render 函数就是缓存原理最重要的部分,也能看出 keep-alive 组件是一个函数式组件。
// isRegExp函数判断是不是正则表达式,remove移除数组中的某一个成员 // getFirstComponentChild获取VNode数组的第一个有效组件 import { isRegExp, remove } from 'shared/util' import { getFirstComponentChild } from 'core/vdom/helpers/index' type VNodeCache = { [key: string]: ?VNode }; // 缓存组件VNode的缓存类型 // 通过组件的name或组件tag来获取组件名(上面注意的第二点) function getComponentName (opts: ?VNodeComponentOptions): ?string { return opts && (opts.Ctor.options.name || opts.tag) } // 判断include或exclude跟组件的name是否匹配成功 function matches (pattern: string | RegExp | Array<string>, name: string): boolean { if (Array.isArray(pattern)) { return pattern.indexOf(name) > -1 // include或exclude是数组的情况 } else if (typeof pattern === 'string') { return pattern.split(',').indexOf(name) > -1 // include或exclude是字符串的情况 } else if (isRegExp(pattern)) { return pattern.test(name) // include或exclude是正则表达式的情况 } return false // 都没匹配上(上面注意的二三点) } // 销毁缓存 function pruneCache (keepAliveInstance: any, filter: Function) { const { cache, keys, _vnode } = keepAliveInstance // keep-alive组件实例 for (const key in cache) { const cachedNode: ?VNode = cache[key] // 已经被缓存的组件 if (cachedNode) { const name: ?string = getComponentName(cachedNode.componentOptions) // 若name存在且不能跟include或exclude匹配上就销毁这个已经缓存的组件 if (name && !filter(name)) { pruneCacheEntry(cache, key, keys, _vnode) } } } } // 销毁缓存的入口 function pruneCacheEntry ( cache: VNodeCache, key: string, keys: Array<string>, current?: VNode ) { const cached = cache[key] // 被缓存过的组件 // “已经被缓存的组件是否继续被缓存” 有变动时 // 若组件被缓存命中过且当前组件不存在或缓存命中组件的tag和当前组件的tag不相等 if (cached && (!current || cached.tag !== current.tag)) { // 说明现在这个组件不需要被继续缓存,销毁这个组件实例 cached.componentInstance.$destroy() } cache[key] = null // 把缓存中这个组件置为null remove(keys, key) // 把这个组件的key移除出keys数组 } // 示例类型 const patternTypes: Array<Function> = [String, RegExp, Array] // 向外暴露keep-alive组件的一些选项 export default { name: 'keep-alive', // 组件名 abstract: true, // keep-alive是抽象组件 // 用keep-alive组件时传入的三个props props: { include: patternTypes, exclude: patternTypes, max: [String, Number] }, created () { this.cache = Object.create(null) // 存储需要缓存的组件 this.keys = [] // 存储每个需要缓存的组件的key,即对应this.cache对象中的键值 }, // 销毁keep-alive组件的时候,对缓存中的每个组件执行销毁 destroyed () { for (const key in this.cache) { pruneCacheEntry(this.cache, key, this.keys) } }, // keep-alive组件挂载时监听include和exclude的变化,条件满足时就销毁已缓存的组件 mounted () { this.$watch('include', val => { pruneCache(this, name => matches(val, name)) }) this.$watch('exclude', val => { pruneCache(this, name => !matches(val, name)) }) }, // 重点来了 render () { const slot = this.$slots.default // keep-alive组件的默认插槽 const vnode: VNode = getFirstComponentChild(slot) // 获取默认插槽的第一个有效组件 // 如果vnode存在就取vnode的选项 const componentOptions: ?VNodeComponentOptions = vnode && vnode.componentOptions if (componentOptions) { //获取第一个有效组件的name const name: ?string = getComponentName(componentOptions) const { include, exclude } = this // props传递来的include和exclude if ( // 若include存在且name不存在或name未匹配上 (include && (!name || !matches(include, name))) || // 若exclude存在且name存在或name匹配上 (exclude && name && matches(exclude, name)) ) { return vnode // 说明不用缓存,直接返回这个组件进行渲染 } // 匹配上就需要进行缓存操作 const { cache, keys } = this // keep-alive组件的缓存组件和缓存组件对应的key // 获取第一个有效组件的key const key: ?string = vnode.key == null // 同一个构造函数可以注册为不同的本地组件 // 所以仅靠cid是不够的,进行拼接一下 ? componentOptions.Ctor.cid + (componentOptions.tag ? `::${componentOptions.tag}` : '') : vnode.key // 如果这个组件命中缓存 if (cache[key]) { // 这个组件的实例用缓存中的组件实例替换 vnode.componentInstance = cache[key].componentInstance // 更新当前key在keys中的位置 remove(keys, key) // 把当前key从keys中移除 keys.push(key) // 再放到keys的末尾 } else { // 如果没有命中缓存,就把这个组件加入缓存中 cache[key] = vnode keys.push(key) // 把这个组件的key放到keys的末尾 // 如果缓存中的组件个数超过传入的max,销毁缓存中的LRU组件 if (this.max && keys.length > parseInt(this.max)) { pruneCacheEntry(cache, keys[0], keys, this._vnode) } } vnode.data.keepAlive = true // 设置这个组件的keepAlive属性为true } // 若第一个有效的组件存在,但其componentOptions不存在,就返回这个组件进行渲染 // 或若也不存在有效的第一个组件,但keep-alive组件的默认插槽存在,就返回默认插槽的第一个组件进行渲染 return vnode || (slot && slot[0]) } }
上述内容就是keep-alive组件的缓存原理是什么,你们学到知识或技能了吗?如果还想学到更多技能或者丰富自己的知识储备,欢迎关注亿速云行业资讯频道。
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。