规则的生命周期事件

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;
}

使用示例

以下是一个简单的示例，用于展示如何在组件中使用 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);
      }
    }
}

解释

• 在这个示例中，当 username 字段的值发生变化时，将会触发 value 钩子并输出新值。
• mounted 钩子将在组件挂载之后执行，输出字段信息。
• deleted 钩子用于在规则被移除时捕获事件。