本文介绍了Vue内置组件keep-alive的作用，它能缓存组件实例，避免重复渲染DOM。文章详细讲解了keep-alive的使用场景，如在路由切换中保持组件状态，如淘宝浏览位置的保存。此外，还阐述了全局和局部范围内的用法，包括在app.vue和router.js中的配置，并提到了include、exclude和max属性。最后，简要分析了keep-alive的原理，涉及created、render阶段及VNode的概念。
一、keep-alive是什么
keep-alive是vue中的内置组件，能在组件切换过程中将状态保留在内存中，防止重复渲染DOM
keep-alive 包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们
keep-alive可以设置以下属性：
include - 字符串或正则表达式。只有名称匹配的组件会被缓存
exclude - 字符串或正则表达式。除了名称匹配的组件不会被缓存，其他组件都会被缓存
max - 数字。最多可以缓存多少组件实例
二、keep-alive使用场景
当我们在切换路由需要保存失活组件的状态的时候能够用到。
例：
浏览淘宝滑动的中间位置，然后又去购物车页面，再回到首页的时候能够保存住我刚才滑动的位置。
三、keep-alive如何使用
1、全局范围内使用：保存在app.vue组件中
2、局部缓存：
①在router.js中设置要缓存的页面
最低0.47元/天 解锁文章
874
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
