Vue中 keep-alive

最新推荐文章于 2024-06-24 22:54:49 发布

zyx042299

最新推荐文章于 2024-06-24 22:54:49 发布

阅读量119

点赞数

文章标签： vue.js javascript ecmascript

本文链接：https://blog.csdn.net/zyx042299/article/details/128210760

版权

本文介绍了 Vue 中的内置组件 `keep-alive`，用于缓存动态组件，避免重复渲染DOM，提高性能。讨论了 `keep-alive` 的工作原理，包括如何在 `created` 和 `render` 阶段管理 VNode 缓存，并解释了 `include` 和 `exclude` 的控制作用。同时，详细阐述了 `activated` 和 `deactivated` 这两个生命周期钩子的功能和使用场景，建议数据获取和DOM操作应在 `activated` 中进行。

摘要由CSDN通过智能技术生成

keep-alive

keep-alive 是 Vue 的内置组件，当它包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。
和 transition 相似，keep-alive 是一个抽象组件：它自身不会渲染成一个 DOM 元素，也不会出现在父组件链中。

作用：在组件切换过程中将状态保留在内存中，防止重复渲染DOM，减少加载时间及性能消耗，提高用户体验性。

原理：在 created 函数调用时将需要缓存的 VNode 节点保存在 this.cache 中／在 render（页面渲染）时，如果 VNode 的 name 符合缓存条件（可以用 include 以及 exclude 控制），则会从 this.cache 中取出之前缓存的 VNode 实例进行渲染。
（VNode：虚拟DOM，其实就是一个JS对象）

参数

参数名	值	描述
include	字符串或正则表达式	只有名称匹配的组件会被缓存。
exclude	字符串或正则表达式	任何名称匹配的组件都不会被缓存。
max	数字	最多可以缓存多少组件实例。