keepalive缓存组件的缓存原理是哪些？

发布时间：2022-04-14 13:25:16 所属栏目：语言来源：互联网

导读：这篇文章主要给大家介绍的是keep-alive组件的缓存原理，很多对于keepalive缓存组件的用法可能比较熟练，但是其缓存原理并不是很清楚，对此下面会从源码角度与大家一起探讨一下keep-alive组件的缓存原理。官方API介绍和用法 keep-alive 包裹动态组件时，会缓

这篇文章主要给大家介绍的是keep-alive组件的缓存原理，很多对于keepalive缓存组件的用法可能比较熟练，但是其缓存原理并不是很清楚，对此下面会从源码角度与大家一起探讨一下keep-alive组件的缓存原理。
        官方API介绍和用法
<keep-alive> 包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。
和 <transition> 相似，<keep-alive> 是一个抽象组件：它自身不会渲染一个 DOM 元素，也不会出现在组件的父组件链中。
当组件在 <keep-alive> 内被切换，它的 activated 和 deactivated 这两个生命周期钩子函数将会被对应执行。
        官网的例子是 tab 切换保存了用户的操作，实际中还可能遇到从列表页跳转去了详情页，再跳转回列表页需要保存用户进行过的筛选操作，这就需要用到 <keep-alive>，这样也能避免重新渲染，提高页面性能。
        用法及props的讲解
// keep-alive组件搭配动态组件的用法，还要其他的用法参见官网
<keep-alive
include="['componentNameA', 'componentNameB']"
exclude="'componentNameC'"
:max="10">
<component :is="view"></component>
</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的缓存类型

// 销毁缓存
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)

（编辑：开发网_开封站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!

Spring MVC和Struts2的	C++ partition 和stab
C++ STL map容器解说	C++ STL map容器迭代器