keepalive 是解决动态组件切换状态丢失的最直接方案：通过缓存组件实例避免销毁重建，配合 include/exclude 精准控制、activated/deactivated 钩子管理生命周期，并支持 max 限制与 key 控制复用。
Vue.js 中组件 Props 本身是只读的，不能直接在子组件内修改，所以“Props 动态切换时的状态保存”实际关注的是：当父组件传入的 props 发生变化（比如切换 tab、更新筛选条件），子组件如何保留自身内部状态（如表单输入、滚动位置、展开折叠状态等），避免因 props 变化触发重新渲染或组件重建而丢失。
用 keep-alive 缓存整个组件实例
这是最直接有效的策略，适用于动态组件切换场景（如 tab 切换、步骤表单、路由视图切换）。
-
适用前提：子组件通过
<component :is></component>或<router-view></router-view>动态加载，且希望“组件不销毁、状态全保留” -
写法要点：用
<keepalive></keepalive>（Vue 3）或<keep-alive></keep-alive>（Vue 2）包裹动态组件，而非包裹 props 本身 -
注意 include/exclude：可配合
include属性精准控制缓存范围，避免内存堆积；例如<keepalive :include="['FormTab1', 'FormTab2']"></keepalive> -
生命周期配合：组件被缓存时会触发
deactivated，恢复时触发activated，可用于清理定时器、暂停请求或同步本地状态
将状态提升到父组件或状态管理中
当 props 变化频繁、但子组件需要跨切换维持某些值（如搜索关键词、分页页码、选中项），更适合把关键状态“抽出来”由外部统一管理。
-
父组件托管：把输入框值、折叠状态等定义在父组件 data / ref 中，通过 props 传给子组件，再用
v-model或事件同步回父组件 - Vuex / Pinia 管理：适合多层级、多组件共享的状态，例如用户筛选配置、全局编辑草稿；props 变化时，子组件从 store 读取对应 key 的状态，无需依赖父级传递
- 避免 props 副作用：不要在子组件 watch props 并直接改 data —— 这会导致状态来源混乱，难以追踪和调试
使用 localStorage 或 sessionStorage 持久化局部状态
适用于用户期望“即使刷新页面也保留上次操作”的场景，比如表单草稿、折叠面板展开状态、主题偏好。
-
时机选择：在
beforeUnmount（Vue 3）或beforeDestroy（Vue 2）中序列化保存；onMounted或created中尝试读取并还原 -
键名设计：建议结合路由路径 + 组件标识生成唯一 key，例如
localStorage.setItem(`form-${route.path}-draft`, JSON.stringify(data)) -
注意兼容性：不能存函数、Symbol、undefined、循环引用对象；复杂结构建议用
useStorage工具封装或选用zustand/valtio等轻量方案
利用 key 强制重置或复用组件实例
key 不是保存状态的工具，而是控制 Vue 是否复用组件实例的开关——合理使用它能“按需清空”或“按需保留”状态。
-
保持状态：固定 key（如
:key="'user-form'"），即使 props 变化，Vue 也会复用同一实例，data 和内部状态自然保留 -
重置状态：让 key 随关键 props 变化（如
:key="userId"），组件会被完全销毁重建，达到“干净初始化”效果 -
慎用 v-if + key：避免与
keep-alive冲突；keep-alive下 key 无效，此时应靠include/exclude或组件内逻辑控制
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
