详解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组件缓存内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了vue中如何下载文件导出保存到本地，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-08-08
本文主要介绍了vue中使用h5 video标签实现弹窗播放本地视频的方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-04-04
本篇文章主要介绍了详解vue-cli 构建Vue项目遇到的坑，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-08-08
这篇文章主要介绍了vue关于eslint空格缩进等的报错问题及解决，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-05-05
这篇文章主要介绍了Vue单页面应用中如何实现Markdown渲染，帮助大家更好的理解和使用vue，感兴趣的朋友可以了解下2021-02-02
这篇文章主要介绍了Vue.extend使用示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-09-09
这篇文章主要介绍了vue中touch和click共存的解决方式，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-07-07
这篇文章主要介绍了vue如何截取字符串，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-05-05
最近项目中有个场景，一组图片、视频、音频、文件数据，要求点击图片可以放大预览，左右可以切换音视频、文件，支持鼠标及各种键控制 缩放，左右旋转，移动等功能,这篇文章主要介绍了Vue3.0实现图片预览组件(媒体查看器),需要的朋友可以参考下2023-12-12
这篇文章主要为大家介绍了vue和react项目中key的作用示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2023-08-08
最新评论