keepalive缓存组件的缓存原理是啥？
发布时间：2022-04-07 16:21:57 所属栏目：语言 来源：互联网
导读：这篇文章主要给大家介绍的是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> include - 字符串或正则表达式或数组，name匹配上的组件会被缓存 exclude - 字符串或正则表达式或数组，name匹配上的组件都不会被缓存 max - 字符串或数字，缓存组件实例的最大数，最久没有被访问的实例会被销毁掉 注意： <keep-alive> 只渲染其直系的一个组件，因此若在 <keep-alive> 中用 v-for，则其不会工作，若多条件判断有多个符合条件也同理不工作。 include 和 exclude 匹配时，首先检查组件的 name 选项，若 name 选项不可用，则匹配它的局部注册名称 (即父组件 components 选项的键值)。匿名组件不能被匹配。 <keep-alive> 不会在函数式组件中正常工作，因为它们没有缓存实例。 // 判断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 // 都没匹配上（上面注意的二三点） （编辑：济南站长网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
