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,但实例和响应式数据仍驻留内存:

