element-plus-fast-form/docs/formCore-form-architecture-analysis.zh.md

基于 Vue 3 和 Element-Plus 的表单和 CRUD 组件封装库

# formCore.tsx 与 form.tsx 类的架构与渲染方式分析

本项目的表单核心类 `formCore.tsx` 和业务扩展类 `form.tsx`，采用了区别于传统 props 配置驱动的表单组件设计。以下为详细分析：

---

## 1. 传统可配置表单组件的做法

- 通过 props（如 `:formConfig="..."`）将表单配置传递给组件。
- 组件内部通过 watch props 变化来重新渲染表单结构。
- 缺点：
  - 每次配置变更都需要整体传递和监听，容易导致全量渲染和性能浪费。
  - 业务层需要频繁操作响应式对象，代码分散，维护成本高。
  - 动态增删、联动等复杂场景下，props 传递和 watch 逻辑容易混乱。

---

## 2. formCore.tsx 和 form.tsx 的封装方式

### 类封装 + 方法驱动 + 响应式管理

- **类封装**：`FormCore` 封装了表单的核心逻辑，`Form` 继承并扩展业务方法。
- **响应式属性**：表单配置（formConfig）、表单值（formValue）等由类内部 reactive/shallowReactive 管理，而不是依赖 props。
- **方法驱动**：所有表单结构和数据的变更（如 setFormConfig、addFormConfig、removeFormConfig、setComponentProps、setFormValue 等）都通过类方法进行，业务层只需调用方法即可。
- **渲染方式**：通过类的 getform 方法返回一个 defineComponent 组件，内部直接用 JSX/h 渲染表单结构，所有配置和数据都取自类实例的响应式属性。

### 自定义组件渲染流程

- 业务层通过 `useForm` 获取表单实例和方法。
- 通过方法动态增删、修改表单项配置，类内部自动响应并更新视图。
- 渲染时，类实例的 formConfig 决定表单结构，formValue 决定表单数据，所有变更自动响应。

---

## 3. 优点分析

### 1. 更高的灵活性和动态性
- 支持任意时机、任意方式动态增删、修改表单项和表单值，无需依赖 props 传递和 watch。
- 适合复杂联动、动态表单、低代码等场景。

### 2. 更好的性能
- 只会响应式更新实际变更的部分，避免全量渲染和无谓的 DOM 更新。
- 方法内部可精细控制更新粒度（如 Object.assign 局部更新）。

### 3. 更强的封装性和可维护性
- 表单所有操作都集中在类方法，业务层只需调用 API，逻辑清晰、易维护。
- 便于扩展和继承，适合大型项目和团队协作。

### 4. 多实例隔离
- 每次 useForm/useCrud 返回独立的表单实例，互不影响，适合多表单并存场景。

### 5. 插槽和自定义组件支持
- 插槽参数自动注入所有表单方法，便于自定义表单项行为和扩展。

---

## 4. 总结

formCore.tsx 和 form.tsx 采用**类封装+方法驱动+响应式管理**，通过内部响应式属性和方法操作实现表单的动态渲染和管理，**不依赖 props 变更**，极大提升了灵活性、性能和可维护性，非常适合复杂、动态、低代码场景的表单开发。