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

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

# Architecture and Rendering Analysis of formCore.tsx & form.tsx

The core form class (`formCore.tsx`) and business extension class (`form.tsx`) in this project adopt a design that is different from traditional props-driven configurable form components. Here is a detailed analysis:

---

## 1. Conventional Configurable Form Components

- Pass form configuration via props (e.g., `:formConfig="..."`).
- The component watches props changes to re-render the form structure.
- Drawbacks:
  - Every config change requires full transmission and watching, often causing full re-render and performance waste.
  - Business logic needs to frequently manipulate reactive objects, leading to scattered code and high maintenance cost.
  - In dynamic add/remove/linkage scenarios, props passing and watch logic can become messy.

---

## 2. Encapsulation Approach of formCore.tsx & form.tsx

### Class Encapsulation + Method-Driven + Reactive Management

- **Class Encapsulation**: `FormCore` encapsulates core form logic, `Form` extends and customizes business methods.
- **Reactive Properties**: Form config (`formConfig`), form values (`formValue`), etc., are managed internally via reactive/shallowReactive, not via props.
- **Method-Driven**: All changes to form structure and data (such as setFormConfig, addFormConfig, removeFormConfig, setComponentProps, setFormValue, etc.) are performed via class methods; business code only needs to call these methods.
- **Rendering**: The class's getform method returns a defineComponent, which uses JSX/h to render the form structure, with all config and data sourced from the class instance's reactive properties.

### Custom Component Rendering Flow

- Business code uses `useForm` to get the form instance and methods.
- Dynamically add/remove/modify form item configs via methods; the class automatically updates the view responsively.
- During rendering, the class instance's formConfig determines the structure, formValue determines the data, and all changes are automatically reactive.

---

## 3. Advantages

### 1. Higher Flexibility and Dynamism
- Supports adding/removing/modifying form items and values at any time and in any way, without relying on props passing and watch.
- Suitable for complex linkage, dynamic forms, and low-code scenarios.

### 2. Better Performance
- Only the actually changed parts are reactively updated, avoiding full re-render and unnecessary DOM updates.
- Methods can finely control update granularity (e.g., Object.assign for partial updates).

### 3. Stronger Encapsulation and Maintainability
- All form operations are centralized in class methods; business code only calls APIs, making logic clear and easy to maintain.
- Easy to extend and inherit, suitable for large projects and team collaboration.

### 4. Multi-Instance Isolation
- Each useForm/useCrud returns an independent form instance, with no interference—ideal for multiple forms on one page.

### 5. Slot and Custom Component Support
- All form methods are automatically injected into slot parameters, making it easy to customize form item behavior and extension.

---

## 4. Summary

formCore.tsx and form.tsx use **class encapsulation + method-driven + reactive management**. They achieve dynamic form rendering and management via internal reactive properties and method operations, **without relying on props changes**. This greatly improves flexibility, performance, and maintainability, making it ideal for complex, dynamic, and low-code form development scenarios.