详解keep-alive组件缓存
更新时间：2024年01月24日 16:47:32 作者：betterangela
keep-alive是Vue中一个非常有用的特性,它可以帮助我们避免重复渲染和减少组件的渲染次数,从而提高应用程序的性能,本文给大家介绍keep-alive组件缓存的相关知识,感兴趣的朋友一起看看吧
keep-alive组件缓存
从a跳b，a已经销毁，b重新渲染；b跳a，b销毁a重新渲染
源组件销毁，目标组件渲染
组件缓存：组件实例等相关（ 包括vnode）存储起来
重新渲染指的是：把视图重新编译成新的vnode->dom diff->渲染成真实dom
真实dom被我移除了只是从页面上移除，只是把vnode重新渲染成真实dom或者说把真实dom插入到页面中。所有周期都不会触发（react中需要自己写）
提一下vuex的区别：
第一次进分类页，数据都存到vuex中，只需要从vuex中拿到信息；跟keep-alive不一样数据存到vuex中但组件依然销毁，重新编译视图重新创建vnode重新渲染，只是不再发请求，但是解决不了视图重新编译。
联带数据 组件实例 vnode所有一切都缓存起来了；只是让dom重新插入页面
配置项：include表示做缓存的页面
include要是动态管理的
beforeEach/afterEach：全局的路由钩子
动态管理缓存组件：
keepAliveList数据中添加/移除keep-alive这里更新一下
所以next需要等待渲染完再next（移除时不需要）
缓存：第二次渲染速度是最快的，某些数据不会及时更新
到此这篇关于keep-alive组件缓存的文章就介绍到这了,更多相关keep-alive组件缓存内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了Vue3中el-table组件重复渲染的问题以及解决,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2025-06-06
在使用 Vue 3 和 Vue Router 4 开发中大型 SPA 应用时,我们经常会遇到需要动态添加或删除路由的场景,下面小编来和大家讲讲Vue Router4如何正确重置路由吧2025-05-05
这篇文章主要介绍了Vue自定义指令，文章从背景开始详细介绍Vue自定义指令的详细内容，随着Vue自定义指令的相关资料展开具体内容,需要的朋友可以参考一下2021-11-11
watch和computed都是以Vue的依赖追踪机制为基础的,当某一个依赖型数据发生变化的时候,所有依赖这个数据的相关数据会自动发生变化,即自动调用相关的函数,来实现数据的变动，这篇文章简单介绍下Vue中computed和watch的区别异同，感兴趣的朋友一起看看吧2023-02-02
本文主要介绍了vue3中WatchEffect高级侦听器的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧2025-01-01
这篇文章主要介绍了vue实现广告栏上下滚动效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-11-11
vue中的data,computed,methods,created,mounted用法及说明
这篇文章主要介绍了vue中的data,computed,methods,created,mounted用法及说明，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-07-07
Vue3+Vant打包报错 Identifier ‘bem‘ has alrea
在实际项目开发中,前端构建的坑经常出现在一些意想不到的地方,这次就出现了Vue3+Vant打包时报错Identifier ‘bem‘ has already been declared,下面我们就来看看具体解决方法吧2025-09-09
这篇文章主要介绍了Vue如何实现打包资源按时间戳方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-05-05
这篇文章主要为大家介绍了vue选项卡Tabs组件实现示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-11-11
最新评论