详解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组件缓存内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
vue2.0 better-scroll 实现移动端滑动的示例代码
本篇文章主要介绍了vue2.0 better-scroll 实现移动端滑动的示例代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下。2018-01-01
这篇文章主要介绍了vue父组件异步如何获取数据传给子组件问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-11-11
这篇文章主要介绍了Vue 实现简易多行滚动“弹幕”效果，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下2020-01-01
在Vue中有多种方式可以进行路由跳转并传递参数,这篇文章主要给大家介绍了关于vue路由三种传参方式的相关资料,文中介绍的方法分别包括params传参、query传参(显示传参)以及props传参(路由组件传参),,需要的朋友可以参考下2023-10-10
下面小编就为大家分享一篇Vue.js自定义事件的表单输入组件方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-03-03
这篇文章主要介绍了vue项目中图片懒加载时出现的问题及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
这篇文章主要介绍了Vue3中使用i18n,this.$t报错问题及解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-04-04
这篇文章主要介绍了vue给对象添加属性没有响应式的问题及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-04-04
这篇文章主要介绍了webpack搭建vue环境时报错异常解决,本篇文章通过简要的案例,讲解了该项技术的了解与使用,以下就是详细内容,需要的朋友可以参考下2021-09-09
近期在用vue做一个环保类的项目,要求使用高德地图,下面这篇文章主要给大家介绍了关于Vue接入高德地图的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-06-06
最新评论