Vue组件缓存与非缓存的核心差异在于是否重走初始化流程：缓存组件（<keep-alive>）保留实例状态与生命周期钩子（activated/deactivated），避免重复渲染；非缓存组件每次进入都触发完整创建、挂载与销毁流程，状态清零，性能开销大但内存占用低。
Vue 组件缓存与非缓存渲染的核心差异，不在“能不能显示”，而在于“要不要重来”——缓存是让组件歇着但不退场，非缓存则是每次都要从头搭台、重新上妆、再演一遍。
状态是否保留
缓存组件（用 <keep-alive> 包裹）会完整保留实例状态：表单输入内容、v-model 绑定值、滚动位置、定时器、内部 data 数据、甚至子组件的当前状态，切换回来时原样呈现。
非缓存组件每次进入都会触发全新创建流程：data 重置为初始值、watch 重新绑定、计算属性重新求值、DOM 完全重建，相当于刷新页面的效果。
生命周期行为不同
缓存组件不会反复走 created → mounted → destroyed 这套流程：
• 首次进入：触发 created 和 mounted
• 离开视图（失活）：不销毁，只触发 onDeactivated（或 deactivated）
• 再次进入（激活）：不重新挂载，只触发 onActivated（或 activated）
非缓存组件则每次都会完整执行：
• 进入：created → mounted
• 离开：beforeUnmount → unmounted（Vue 3）或 beforeDestroy → destroyed（Vue 2）
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
性能与内存取舍明显
缓存能跳过重复的初始化、数据请求、模板编译和 DOM 渲染，对高频切换的 Tab 页、多步骤表单、搜索结果页等场景提速显著；但代价是内存持续占用，尤其当缓存大量复杂组件时可能引发卡顿。
非缓存虽内存友好（离开即释放），却可能带来明显延迟：比如每次切回列表页都重新发请求、重新计算过滤逻辑、重新滚动到顶部。
立即学习“前端免费学习笔记（深入）”；
缓存控制方式灵活但需主动管理
<keep-alive> 提供了精细的开关能力：
• include：只缓存指定名称的组件（如 ['UserList', 'Profile']）
• exclude：明确排除某些组件（如 ['ReportChart']，避免图表反复渲染）
• max：限制最多缓存数量，超出时按 LRU（最近最少使用）自动清理旧缓存
• 结合路由 meta（如 meta: { keepAlive: true }）可实现页面级条件缓存
