组件生命周期的意义所在：比如动态创建了「视图、字段」，等它们初始化完成或者发生了修改后要执行业务逻辑，这个时候只能去自定义当前字段或者视图，体验极差，平台应该提供一些列的生命周期，允许其他人调用生命周期的api去执行对应的逻辑。
一、实现原理
当用户通过内部API去监听某个生命周期的时候，内部会动态的去创建该生命周期，每个生命周期都有「唯一标识」，内部会根据「唯一标识」去创建对应的「Effect」，Effect会根据生命周期的「唯一标识」实例化一个「lifeCycle」，「lifeCycle」创建完成后，会被存放到「Heart」中，「Heart」是整个生命周期的心脏，当心脏每次跳动的时候（生命周期被监听触发）都会触发对应的生命周期
二、生命周期API
| API | 描述 | 返回值 |
|---|---|---|
| View LifeCycle | ||
| onViewBeforeCreated | 视图创建前 | ViewWidget |
| onViewCreated | 视图创建后 | ViewWidget |
| onViewBeforeMount | 视图挂载前 | ViewWidget |
| onViewMounted | 视图挂载后 | ViewWidget |
| onViewBeforeUpdate | 视图数据发生修改前 | ViewWidget |
| onViewUpdated | 视图数据修改后 | ViewWidget |
| onViewBeforeUnmount | 视图销毁前 | ViewWidget |
| onViewUnmounted | 视图销毁 | ViewWidget |
| onViewSubmit | 提交数据 | ViewWidget |
| onViewSubmitStart | 数据开始提交 | ViewWidget |
| onViewSubmitSuccess | 数据提交成功 | ViewWidget |
| onViewSubmitFailed | 数据提交失败 | ViewWidget |
| onViewSubmitEnd | 数据提交结束 | ViewWidget |
| onViewValidateStart | 视图字段校验 | ViewWidget |
| onViewValidateSuccess | 校验成功 | ViewWidget |
| onViewValidateFailed | 校验失败 | ViewWidget |
| onViewValidateEnd | 校验结束 | ViewWidget |
| Field LifeCycle | ||
| onFieldBeforeCreated | 字段创建前 | FieldWidget |
| onFieldCreated | 字段创建后 | FieldWidget |
| onFieldBeforeMount | 字段挂载前 | FieldWidget |
| onFieldMounted | 字段挂载后 | FieldWidget |
| onFieldBeforeUpdate | 字段数据发生修改前 | FieldWidget |
| onFieldUpdated | 字段数据修改后 | FieldWidget |
| onFieldBeforeUnmount | 字段销毁前 | FieldWidget |
| onFieldUnmounted | 字段销毁 | FieldWidget |
| onFieldFocus | 字段聚焦 | FieldWidget |
| onFieldChange | 字段的值发生了变化 | FieldWidget |
| onFieldBlur | 字段失焦 | FieldWidget |
| onFieldValidateStart | 字段开始校验 | FieldWidget |
| onFieldValidateSuccess | 校验成功 | FieldWidget |
| onFieldValidateFailed | 校验失败 | FieldWidget |
| onFieldValidateEnd | 校验结束 | FieldWidget |
上面列出的分别是「视图、字段」的生命周期，目前Action的生命周期还没有，后续再补充。
三、第一个View组件生命周期的监听（举例）
Step1 新建registryLifeCycle.ts
新建registryLifeCycle.ts，监听宠物达人的列表页。'宠物达人table_demo_core'为视图名，您需要找后端配合
import { onViewCreated } from '@kunlun/dependencies'
function registryLifeCycle(){
onViewCreated('宠物达人table_demo_core', (viewWidget) => {
console.log('宠物达人table_demo_core');
console.log(viewWidget);
});
}
export {registryLifeCycle}图4-2-1-2 新建registryLifeCycle.ts
Step2 修改main.ts
全局注册lifeCycle
import { registryLifeCycle } from './registryLifeCycle';
registryLifeCycle();Step3 看效果
四、第一个Filed组件生命周期的监听（举例）
Step1 修改registryLifeCycle.ts
通过onFieldValueChange增加宠物达人搜索视图的name（达人）字段的值变化进行监听。
宠物达人search:name 代表 视图名:字段名
import { onViewCreated , onFieldValueChange} from '@kunlun/dependencies'
function registryLifeCycle(){
onViewCreated('宠物达人table_demo_core', (viewWidget) => {
console.log('宠物达人table_demo_core');
console.log(viewWidget);
});
onFieldValueChange('宠物达人search:name', (filedWidget) => {
console.log('宠物达人search:name');
console.log(filedWidget);
});
}
export {registryLifeCycle}Step2 看效果
输入三个1，执行三次
Oinone社区 作者：史, 昂原创文章，如若转载，请注明出处：https://doc.oinone.top/oio4/9302.html
访问Oinone官网:https://www.oinone.top获取数式Oinone低代码应用平台体验
