1. Oinone社区首页
  2. Oinone 7天入门到精通

4.2.1 组件之生命周期

史, 昂 • • Oinone 7天入门到精通 • 阅读 978

组件生命周期的意义所在：比如动态创建了「视图、字段」，等它们初始化完成或者发生了修改后要执行业务逻辑，这个时候只能去自定义当前字段或者视图，体验极差，平台应该提供一些列的生命周期，允许其他人调用生命周期的api去执行对应的逻辑。

一、实现原理

4.2.1 组件之生命周期

图4-2-1-1 实现原理

当用户通过内部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

表4-2-1-1 生命周期API

上面列出的分别是「视图、字段」的生命周期，目前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();

图4-2-1-3 修改main.ts

Step3 看效果

image.png

图4-2-1-4 示例效果

四、第一个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}

图4-2-1-5 修改registryLifeCycle.ts

Step2 看效果

输入三个1，执行三次

image.png

图4-2-1-6 示例效果

Oinone社区 作者：史, 昂原创文章，如若转载，请注明出处：https://doc.oinone.top/oio4/9302.html

访问Oinone官网:https://www.oinone.top获取数式Oinone低代码应用平台体验

赞 (0)
史, 昂的头像史, 昂数式管理员
0 0
上一篇 2024年5月23日 am8:36
下一篇 2024年5月23日

相关推荐

  • 1.2 Oinone的致敬 Oinone 7天入门到精通

    1.2 Oinone的致敬

    占在巨人的肩膀上，天地孤影任我行 1.2.1 数字化时代Oinone接棒Odoo 在数字化时代，中国在互联网化的应用、技术的领先毋庸置疑，但在软件的工程化、产品化输出方面仍有许多改进的空间。这时，我了解到了Odoo——一个国外非常优秀的开源ERP厂商，全球ERP用户数量排名第一，百级别员工服务全球客户。Odoo的工程化能力和商业模式深深吸引了我，它是软件行业典型的产品制胜和长期主义者的胜利之一。 在2019年，也就是数式刚成立的时候，我们跟很多投资人聊起公司的对标是谁，我不是要成为数字化时代的SAP，而是要成为Odoo。然而，当时大部分国内投资人并不了解Odoo，尽管它已经是全球最大的ERP厂商之一，因为当时Odoo还没有明确的估值。直到2021年7月份获得Summit Partners的2.15亿美元投资后，Odoo才正式成为IT独角兽企业。 Odoo对我们提供了极大的启示，因此我们致敬Odoo，同样选择开源，每年对产品进行升级发布。如今，Odoo15已经发布，而Oinone也已推出第三版，恰好相隔12年，这是一个时代的接棒，从信息化升迁至数字化。 1.2.2Oinone与Odoo的不同之处 技术方面的不同 在技术上，Oinone和Odoo有相同之处，也有不同之处。它们都基于元数据驱动的软件系统，但是它们在如何让元数据运作的机制上存在巨大差异。Odoo是企业管理场景的单体应用，而Oinone则致力于企业商业场景的云原生应用。因此，它们在技术栈的选择、前后端协议设计、架构设计等方面存在差异。 场景方面的不同 在场景上，Oinone和Odoo呈现许多差异。相对于SAP这些老牌ERP厂商，Odoo算是西方在企业级软件领域的后起之秀，其软件构建方式、开源模式和管理理念在国外取得了非凡的成就。然而，在国内，Odoo并没有那么成功或者并没有那么知名。国内做Odoo的伙伴普遍认为，Odoo与中国用户的交互风格不符，收费模式设计以及外汇管制使商业活动受到限制，本地化服务不到位，国内生态没有形成合力，伙伴们交流合作都非常少。另外，Odoo在场景方面主要围绕内部流程管理，与国内老牌ERP如用友、金蝶重叠，市场竞争激烈。相比之下，Oinone看准了企业视角由内部管理转向业务在线、生态在线（协同）带来的新变化，聚焦新场景，利用云、端等新技术的发展，从企业内外部协同入手，以业务在线驱动企业管理流程升级。它先立足于国内，做好国内生态服务，再着眼未来的国际化。 无代码设计器的定位 在无代码设计器的定位上，Odoo的无代码设计器是一个非常轻量的辅助工具，因为ERP场景下，一个企业实施完以后基本几年不会变，流程稳定度非常高。相反，Oinone为适应"企业业务在线化后，所有的业务变化与创新都需要通过系统来触达上下游，从而敏捷响应快速创新"的时代背景，重点打造出五大设计器。（如下图1-2所示）。 图1-2 Oinone五大设计器 在数字化时代中国软件将接棒世界，而Oinone也要接棒Odoo，把数字化业务与技术的最佳实践赋能给企业，帮助企业数字化转型不走弯路！

    史, 昂的头像 史, 昂
    2024年5月23日
    1.5K00

  • 3.2 Oinone以模块为组织

    模块(module):是按业务领域划分和管理的最小单元，是一组功能、界面的集合。 带大家快速认识下如何构建一个oinone的模块并启动它。我会从以下几个维度去介绍模块的构建与启动方式、模块详解。让大家直观且全方位地了解oinone的模块所包含的内容 构建第一个Module 启动前端工程 应用中心

    史, 昂的头像 史, 昂
    Oinone 7天入门到精通 2024年5月23日
    1.8K00

  • 4.1.17 框架之网关协议-GraphQL协议

    GraphQL 是一个用于 API 的查询语言，是一个使用基于类型系统来执行查询的服务端运行时（类型系统由你的数据定义）。GraphQL 并没有和任何特定数据库或者存储引擎绑定，而是依靠你现有的代码和数据支撑。 一个 GraphQL 服务是通过定义类型和类型上的字段来创建的，然后给每个类型上的每个字段提供解析函数。例如，一个 GraphQL 服务告诉我们当前登录用户是 me，这个用户的名称可能像这样： type Query { me: User } type User { id: ID name: String } 图4-1-17-1 GraphQL定义类型和字段示意 一并的还有每个类型上字段的解析函数： function Query_me(request) { return request.auth.user; } function User_name(user) { return user.getName(); } 图4-1-17-2 每个类型上字段的解析函数示意 一旦一个 GraphQL 服务运行起来（通常在 web 服务的一个 URL 上），它就能接收 GraphQL 查询，并验证和执行。接收到的查询首先会被检查确保它只引用了已定义的类型和字段，然后运行指定的解析函数来生成结果。 例如这个查询： { me { name } } 图4-1-17-3 GraphQL查询请求示意 会产生这样的JSON结果： { "me": { "name": "Luke Skywalker" } } 图4-1-17-4 GraphQL查询结果示意 了解更多 https://graphql.cn/learn/

    史, 昂的头像 史, 昂
    Oinone 7天入门到精通 2024年5月23日
    1.1K00
  • 第5章 Oinone的CDM Oinone 7天入门到精通

    第5章 Oinone的CDM

    史, 昂的头像 史, 昂
    2024年5月23日
    1.3K00

  • 4.2 前端高级特性

    史, 昂的头像 史, 昂
    Oinone 7天入门到精通 2024年5月23日
    1.4K00

Leave a Reply

登录后才能评论