规则的生命周期事件

FormCreate 提供了一套钩子机制，允许开发者通过 hook 配置项来监听规则的生命周期事件。这些事件使得开发者可以在组件加载、更新、删除等重要阶段执行自定义逻辑，更灵活地控制组件行为。

生命周期事件类型

以下是 FormCreate 支持的生命周期事件类型及其详细说明：

type Hook =  {
    //在表单规则被加载时触发。可以用于初始化逻辑。
    load(evt: { rule: Rule, api: Api }): void;
    //当组件成功挂载到 DOM 上时触发。适用于 DOM 操作或依赖组件渲染完成的逻辑。
    mounted(evt: { rule: Rule, api: Api }): void;
    //当规则组件被移除或卸载时触发。可用于清理资源或重置状态。
    deleted(evt: { rule: Rule, api: Api }): void;
    //当规则的绑定值改变时触发。便于监听用户输入或数据更新。
    value(evt: { value: any, rule: Rule, api: Api }): void;
    //当组件的隐藏状态改变时触发，允许基于显示状态执行额外逻辑。
    hidden(evt: { value: boolean, rule: Rule, api: Api }): void;
    //当规则发生变化时触发，非常适用于动态响应配置变动。
    watch(evt: { key: string, oldValue: any, newValue: any, rule: Rule, api: Api }): void;
    //子组件生命周期
    //子级组件(children)规则被加载时触发。可以用于初始化逻辑。
    deepLoad(evt: { rule: Rule, parent: Rule, api: Api }): void;
    //子级组件(children)成功挂载到 DOM 上时触发。适用于 DOM 操作或依赖组件渲染完成的逻辑。
    deepMounted(evt: { rule: Rule, parent: Rule, api: Api }): void;
    //子级组件(children)被移除或卸载时触发。可用于清理资源或重置状态。
    deepDeleted(evt: { rule: Rule, parent: Rule, api: Api }): void;
    //子级组件(children)的绑定值改变时触发。便于监听用户输入或数据更新。
    deepValue(evt: { value: any, rule: Rule, parent: Rule, api: Api }): void;
    //子级组件(children)的隐藏状态改变时触发，允许基于显示状态执行额外逻辑。
    deepHidden(evt: { value: boolean, rule: Rule, parent: Rule, api: Api }): void;
    //子级组件(children)发生变化时触发，非常适用于动态响应配置变动。
    deepWatch(evt: { key: string, oldValue: any, newValue: any, rule: Rule, parent: Rule, api: Api }): void;
}

使用示例

以下是一个简单的示例，用于展示如何在组件中使用 hook 配置来监听值变化：

{
    type: 'input',
    field: 'username',
    title: '用户名',
    hook: {
      value(evt) {
        console.log('value 发生变化:', evt.value);
      },
      mounted(evt) {
        console.log('组件已挂载:', evt.rule.field);
      },
      deleted(evt) {
        console.log('规则已移除:', evt.rule.field);
      }
    }
}

以下是一个如何通过 elCard 组件规则监听子级组件值的变化：

[
    {
        type: 'elCard',
        hook: {
            deeoValue(evt) {
                console.log('子组件 value 发生变化:', evt.value);
            },
        },
        children: [
            {
                type: 'input',
                field: 'username',
                title: '用户名',
            },
            {
                type: 'input',
                field: 'password',
                title: '密码',
            },
        ]
    }
]