---
name: deppon-pro-form-performance
description: >-
    大量 ProForm 实例时的性能写法：仅渲染可见表单、keep-alive 缓存、数据与 UI 分离、产品/线路切换保留已填数据。
    在用户提到多表单卡顿、ProFormOptimization、可见表单数、全网模式时应用。
---

# deppon-pro-form-performance

## 依据来源（私有 npm）

-   **`deppon-npm-private-registry`**。
-   **`@deppon/deppon-template`**：`ProForm` 多实例与 `keep-alive`、动态 ref — 以类型定义为实施准绳。
-   业务化多产品 × 线路组合见专项 **`deppon-product-route-multi-form`**。
-   **`deppon-npm-skills`**。不默认读取 `deppon-npm` 的 `site/`。

## 模式要点（与常见性能优化范式一致）

-   **组合枚举**：如产品与线路笛卡尔积得到 `allFormPairs`；**可见子集** `visibleFormPairs` 仅当前选中 product/line（或全网）对应项。
-   **渲染**：`v-for` 只遍历 `visibleFormPairs`；外层可包 `keep-alive`（按性能需求与 **`ProForm` 文档**）。
-   **状态**：用 `Map`/对象以 `getPairKey(pair)` 为键持久化各表单 values，避免切走即丢。
-   **单实例**：每个 `pro-form` 带稳定 `:id`、`:ref="el => setFormRef(key, el)"`，`@values-change` 写回缓存。
-   **批量校验**：遍历已缓存 ref 调用表单校验方法（方法名以 **ProForm 类型定义** 为准）。

## 生成清单

-   [ ] key 生成规则稳定且唯一（产品 code + 线路 code 等）。
-   [ ] 不一次性挂载全部表单；确认 `visibleFormPairs.length` 小于总量。
-   [ ] UI 提示（如 `el-alert`）标明可见数/总数，便于排查。