深层嵌套表单卡顿的解法是Key-Path扁平化存储：将嵌套对象转为路径字符串键值对，每个输入框只响应自身path变化，配合shallowRef、triggerRef及动态子组件隔离渲染边界。
深层嵌套表单卡顿，本质是状态更新触发了整棵树的无效重渲染。核心解法不是“优化组件”，而是重构数据与组件的绑定关系——把深度对象结构打散，用路径字符串做唯一标识，让每个输入框只响应自己那一小块数据。
用 Key-Path 扁平化存储替代嵌套对象
不要把整个表单数据塞进一个 reactive 对象里。比如原本这样写：
enterprise.subsidiaries[0].bankAccounts[1].accNo会导致修改 accNo 时，bankAccounts 数组、subsidiaries 数组、enterprise 对象全被重新赋值，所有依赖它们的组件都会更新。
改成扁平字典存储：
立即学习“前端免费学习笔记（深入）”；
python-flask-vue-creator
下载
创建 Flask + Vue.js 全栈项目，采用单端口架构、uv 依赖管理、结构化日志和生产级前端设计。当用户要求以下操作时触发：创建新的 Flask+Vue 项目、搭建 Web 应用、构建全栈 Python+Vue 应用、初始化 Flask Web 项目、设置单端口 Flask 前后端项目。触发词：新建项目、创建项目、搭建项目、Flask项目、Vue项目。
- "enterprise.subsidiaries.0.bankAccounts.1.accNo" → "6222"
- "enterprise.name" → "某某集团"
- "enterprise.subsidiaries.0.name" → "深圳分部"
每个自定义表单组件（如 <inputfield path="enterprise.subsidiaries.0.bankAccounts.1.accNo"></inputfield>）只订阅自己这条 path 的变化，其他字段改了它完全无感。
组件内部用 shallowRef + 手动触发更新
表单容器组件不使用 reactive 包裹整个数据源，改用 shallowRef 存储扁平化后的 key-value 对象：
- 避免 Vue 深层追踪嵌套属性，消除 Watcher 爆炸
- 输入变更时，只更新对应 path 的值，并显式调用
triggerRef或markRaw配合局部 forceUpdate - 配合
computed(() => store.value[path])获取当前值，天然带缓存
动态生成子组件时强制隔离渲染边界
子公司列表、账户列表这类可增删的数组区域，别用一个大组件循环渲染全部项。要逐层拆开：
- 用
<subsidiaryitem :index="0"></subsidiaryitem>封装单个子公司 - 该组件内部再用
<bankaccountitem :parentpath="`enterprise.subsidiaries.${index}`" :index="1"></bankaccountitem> - 每个子组件只接收自己的 path 前缀和索引，内部计算完整字段路径
- 配合
v-memo或shouldComponentUpdate逻辑（Vue 3 中可用onBeforeUpdate+ 路径比对）跳过未涉及字段的更新
给 v-for 列表加稳定 key 并禁用跨索引复用
嵌套数组的 v-for 是性能雷区。不能只靠 :key="index"：
- 必须用业务唯一 ID，例如
:key="item.id || `${parentPath}.${index}`" - 在父子组件通信中，禁止把整个子数组传下去；只传当前项的 path 和原始值
- 增删操作不直接 push/splice 数组，而是生成新 path 字符串并更新扁平 store，让 diff 只发生在路径键层面
