v-model 不自动跨子应用保持状态，因卸载时响应式数据被销毁；应将表单数据抽离至主应用或状态中心统一管理，或启用保活机制、手动序列化恢复。
在微前端架构中，v-model 本身不会自动跨子应用保持状态——它只在当前 Vue 实例的响应式上下文中生效。表单状态丢失的根本原因，不是 v-model 写法错了，而是子应用被卸载（unmount）时，其整个组件树、响应式数据、计算属性和事件监听都被销毁了。要避免状态丢失，关键在于把表单数据“抽离”出子应用生命周期，交由主应用或共享状态层统一管理。
把表单数据托管到主应用或状态中心
子应用不应独自持有核心表单数据。推荐做法是：主应用创建一个 reactive 或 ref 对象（例如 sharedFormState），通过 props、provide/inject 或全局状态（如 Pinia store）注入给子应用。子应用内所有 v-model 都绑定到这个外部对象的字段上：
- 子应用中不使用
const formData = reactive({...})，而是接收props.formState或inject('formState') -
<input v-model="formState.name">—— 这里的 formState 是来自父级的引用，卸载子应用也不会销毁它 - 主应用可随时读取、重置、持久化或跨子应用传递该对象
利用微前端框架的状态保活机制
主流微前端方案（如 qiankun、micro-app、Garfish）都支持子应用“保活”（alive / keep-alive）。启用后，子应用卸载时仅隐藏 DOM，但实例和响应式数据仍驻留内存：
vue-composition-api-best-practices
下载
Vue 3 组合式 API 与 最佳实践，涵盖代码组织、useXxx 模式、组合式函数设计、Store 集成、响应式优化及功能抽取。
- qiankun 中配置
loadMicroApp({ ... }, { singular: false })并配合<keep-alive>包裹子应用容器 - micro-app 提供
data-keep-alive属性，设为 true 即可保活 - 注意：保活会增加内存占用，适合表单流程未完成的场景（如多步填写），不建议长期保活所有子应用
手动序列化 + 恢复（轻量兜底方案）
当无法改造数据流或保活不可行时，可在子应用卸载前将表单值序列化保存，重新挂载时恢复：
立即学习“前端免费学习笔记（深入）”；
- 监听微前端框架的
before-unmount钩子（如 qiankun 的unmount生命周期） - 调用
JSON.stringify(formData)存入 localStorage 或 sessionStorage（注意敏感字段脱敏） - 在
mount钩子中读取并Object.assign(formData, JSON.parse(stored))—— 注意必须用 assign 更新属性，不能直接赋新对象，否则破坏响应式引用
避免常见陷阱
以下写法会加剧状态丢失，需规避：
- 在子应用 setup 中用
ref或reactive声明表单数据，且未与外部同步 - 用
v-model绑定到局部 computed 的 setter（计算属性不具备持久性） - 依赖浏览器原生表单自动填充（autocomplete），它与微前端路由切换冲突，建议禁用：
autocomplete="off" - 在子应用内部做防抖提交或异步校验时，未考虑卸载中断导致的 Promise 悬停
