🐱个人主页：不叫猫先生🙋‍♂️作者简介：前端领域新星创作者、阿里云专家博主，专注于前端各领域技术，共同学习共同进步，一起加油呀！💫系列专栏：vue3从入门到精通、TypeScript从入门到实践📢资料领取：前端进阶资料以及文中源码可以找我免费领取🔥前端学习交流：博主建立了一个前端交流群，汇集了各路大神，一起交流学习，期待你的加入！(文末有我wx或者私信)目录一、前世尘缘二、keep-alive内置组件1.缓存动态组件2.缓存路由组件3.原理解析（1）keep-alive在生命周期中做了什么？（2）源码（3）abstract:true（4）pruneCacheEntry函数（5）render三、

🐱个人主页：不叫猫先生🙋‍♂️作者简介：前端领域新星创作者、阿里云专家博主，专注于前端各领域技术，共同学习共同进步，一起加油呀！💫系列专栏：vue3从入门到精通、TypeScript从入门到实践📢资料领取：前端进阶资料以及文中源码可以找我免费领取🔥前端学习交流：博主建立了一个前端交流群，汇集了各路大神，一起交流学习，期待你的加入！(文末有我wx或者私信)目录一、前世尘缘二、keep-alive内置组件1.缓存动态组件2.缓存路由组件3.原理解析（1）keep-alive在生命周期中做了什么？（2）源码（3）abstract:true（4）pruneCacheEntry函数（5）render三、

一、keep-alive是什么？是vue内置的一个组件，能在组件的切换的过程中将状态保留在内存中，防止重复渲染DOM包裹动态组件的时候，会缓存不活动的组件实例，而不是销毁他们！是一个抽象组件：它自身不会渲染一个DOM元素，也不会出现在父组件中，作为标签使用包裹在需要缓存的组件中注意：1.include字符串/正则/数组。只有名称匹配的组件会缓存2.exclude/字符串/正则/数组。任何名称匹配的组件都不会被缓存3.max-数字最多可以缓存多少组件（接收一个number类型）被包含在keep-alive中创建的组件，会有两个生命周期的钩子函数：activated(组件被激活时使用)deacti

一、keep-alive是什么？是vue内置的一个组件，能在组件的切换的过程中将状态保留在内存中，防止重复渲染DOM包裹动态组件的时候，会缓存不活动的组件实例，而不是销毁他们！是一个抽象组件：它自身不会渲染一个DOM元素，也不会出现在父组件中，作为标签使用包裹在需要缓存的组件中注意：1.include字符串/正则/数组。只有名称匹配的组件会缓存2.exclude/字符串/正则/数组。任何名称匹配的组件都不会被缓存3.max-数字最多可以缓存多少组件（接收一个number类型）被包含在keep-alive中创建的组件，会有两个生命周期的钩子函数：activated(组件被激活时使用)deacti

vue中,我们有时候需要实现这种场景:1.搜索页面到列表页面，需要刷新重新获取数据。2.从详情页面返回列表页面需要记住上次浏览的状态。具体流程如下：效果图第一步:在路由配置文件中为列表页设置meta参数，里面包含useCatch和keepAlive{path:"/sportPrdtList",name:"sportPrdtList",component:resolve=>require(["@/views/iceArea/sportPrdtList"],resolve),meta:{keepAlive:true,//是否缓存组件useCatch:false//是否用缓存}},第二步:在App文

vue中,我们有时候需要实现这种场景:1.搜索页面到列表页面，需要刷新重新获取数据。2.从详情页面返回列表页面需要记住上次浏览的状态。具体流程如下：效果图第一步:在路由配置文件中为列表页设置meta参数，里面包含useCatch和keepAlive{path:"/sportPrdtList",name:"sportPrdtList",component:resolve=>require(["@/views/iceArea/sportPrdtList"],resolve),meta:{keepAlive:true,//是否缓存组件useCatch:false//是否用缓存}},第二步:在App文