keepalive缓存组件的缓存原理是啥？
发布时间：2022-04-12 16:55:07 所属栏目：语言 来源：互联网
导读：这篇文章主要给大家介绍的是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的讲解 总共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' （编辑：开发网_开封站长网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
浙公网安备 33038102330459号