速递!vue缓存组件是什么意思

时间:2022-12-02 20:49:27       来源:PHP中文网

本教程操作环境:windows7系统、vue3版,DELL G3电脑。

在vue中,缓存组件是“keep-alive”,是一个抽象组件。


【资料图】

缓存组件“keep-alive”

keep-alive是Vue的内置组件,包裹动态组件时,会将不活动的组件实例留在内存中,优化请求,防止DOM重新渲染

官方文档:在动态组件上使用 keep-alive

主要用于保留组件状态或避免重新渲染,当它包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们。

(1)组件缓存不是持久化,它只是在应用运行期间不会重新渲染,如果页面刷新还是会回到初始状态。

(2) 是一个抽象组件:它自身不会渲染一个 DOM 元素,也不会出现在组件的父组件链中。

(3) 要求被切换到的组件都有自己的名字,不论是通过组件的 name 选项还是局部/全局注册。

(4)组件生命周期钩子和缓存

(5)include 和 exclude 属性允许组件有条件地缓存。二者都可以用逗号分隔字符串、正则表达式或一个数组来表示。

      
登录后复制

匹配首先检查组件自身的 name 选项,如果 name 选项不可用,则匹配它的局部注册名称 (父组件 components 选项的键值)。匿名组件不能被匹配。【学习视频分享:vue视频教程、web前端视频】

使用 缓存组件 的一些问题

问题1:如果缓存的组件过多,或者是把不必要的组件也缓存了,会造成内存占用过多。

问题2:会导致需要更新的却被缓存了,如detail组件被缓存就不会更新了。

策略:把那些重要,高频的(如主页),或者是不怎么变化的组件缓存下来。

解决:给要缓存的路由做个标记,然后在载入路由时,动态决定是否要缓存。更加精确控制要缓存的组件

组件缓存的优化写法:

在定义路由时,额外添加路由[元信息],来补充一些信息要素。

{   path: "/",   component: () => import("../views/home/index.vue"),   //是否缓存  meta: { isKeepAlive: true } },
登录后复制

在app.vue中根据meta元信息来决定是否缓存组件

登录后复制

(学习视频分享:web前端开发、编程基础视频)

以上就是vue缓存组件是什么意思的详细内容,更多请关注php中文网其它相关文章!

关键词: 正则表达式 是什么意思