Component Lifecycle

FormCreate provides a hook mechanism that lets developers listen to rule lifecycle events through the hook configuration item. These events enable developers to execute custom logic at important stages such as component loading, updating, and deletion, providing more flexible control over component behavior.

Data Structure

The following are the lifecycle event types supported by FormCreate and their detailed descriptions:

type Hook =  {
    //Triggered when form rules are loaded. Can be used for initialization logic.
    load(evt: { rule: Rule, api: Api }): void;
    //Triggered when component is successfully mounted to DOM. Suitable for DOM operations or logic dependent on component rendering completion.
    mounted(evt: { rule: Rule, api: Api }): void;
    //Triggered when rule component is removed or unmounted. Can be used for resource cleanup or state reset.
    deleted(evt: { rule: Rule, api: Api }): void;
    //Triggered when rule's bound value changes. Convenient for listening to user input or data updates.
    value(evt: { value: any, rule: Rule, api: Api }): void;
    //Triggered when component's hidden state changes, allowing additional logic based on display state.
    hidden(evt: { value: boolean, rule: Rule, api: Api }): void;
    //Triggered when rules change, very suitable for dynamically responding to configuration changes.
    watch(evt: { key: string, oldValue: any, newValue: any, rule: Rule, api: Api }): void;
    //Child component lifecycle
    //Triggered when child component (children) rules are loaded. Can be used for initialization logic.
    deepLoad(evt: { rule: Rule, parent: Rule, api: Api }): void;
    //Triggered when child component (children) is successfully mounted to DOM. Suitable for DOM operations or logic dependent on component rendering completion.
    deepMounted(evt: { rule: Rule, parent: Rule, api: Api }): void;
    //Triggered when child component (children) is removed or unmounted. Can be used for resource cleanup or state reset.
    deepDeleted(evt: { rule: Rule, parent: Rule, api: Api }): void;
    //Triggered when child component (children)'s bound value changes. Convenient for listening to user input or data updates.
    deepValue(evt: { value: any, rule: Rule, parent: Rule, api: Api }): void;
    //Triggered when child component (children)'s hidden state changes, allowing additional logic based on display state.
    deepHidden(evt: { value: boolean, rule: Rule, parent: Rule, api: Api }): void;
    //Triggered when child component (children) changes, very suitable for dynamically responding to configuration changes.
    deepWatch(evt: { key: string, oldValue: any, newValue: any, rule: Rule, parent: Rule, api: Api }): void;
}

Note

The deep series methods are used to listen to child component lifecycle callbacks, achieving cross-level state management.

Usage Examples

The following is a simple example showing how to use the hook configuration in components to listen to value changes:

const rule = {
    type: 'input',
    field: 'username',
    title: 'Username',
    hook: {
      value(evt) {
        console.log('value changed:', evt.value);
      },
      mounted(evt) {
        console.log('Component mounted:', evt.rule.field);
      },
      deleted(evt) {
        console.log('Rule removed:', evt.rule.field);
      }
    }
}

The following is an example of how to listen to child component value changes through elCard component rules:

[
    {
        type: 'elCard',
        hook: {
            deepValue(evt) {
                console.log('Child component value changed:', evt.value);
            },
        },
        children: [
            {
                type: 'input',
                field: 'username',
                title: 'Username',
            },
            {
                type: 'input',
                field: 'password',
                title: 'Password',
            },
        ]
    }
]