组件的生命周期

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

数据结构

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

type Hook =  {
    //在表单规则被加载时触发。可以用于初始化逻辑。
    load(evt: { rule: Rule, api: Api }): void;
    //当组件成功挂载到 DOM 上时触发。适用于 DOM 操作或依赖组件渲染完成的逻辑。
    mounted(evt: { rule: Rule, api: Api }): void;
    //在组件即将卸载、实例仍可用时触发（对齐 Vue `beforeUnmount`）。适合移除事件监听、取消定时器等；规则从表单中移除后仍可能触发 deleted。
    beforeUnmount(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;
}

注意

deep 系列方法用于监听子组件的生命周期回调，实现跨层级的状态管理。

使用示例

值变化和挂载

value 在绑定值变化时触发。mounted 在组件挂载后触发。点击「移除字段」会先触发 beforeUnmount，再触发 deleted。

监听子组件的值

父级规则用 deepValue 监听 children 里组件的值变化。

规则加载

load 在规则被加载时触发，适合做初始化。

隐藏状态

hidden 在组件隐藏状态变化时触发。

规则变更

watch 在规则字段变化时触发，回调里可以拿到字段名、旧值和新值。