开发者社区
社区提问意见反馈
开发者钉组织
扫描二维码
加入支付宝开发者钉组织
开发 > 框架 > 自定义组件 > 创建自定义组件 > 生命周期
贡献者 5
收藏
订阅更新
我的文档
设置
组件的生命周期,指的是在特殊的时间点由框架自动触发的一些组件方法。基础库提供两种维度的生命周期:
数据维度的生命周期:主要包含 oninit、derivedatafromprops、didmount、didupdate、didunmount、onerror 方法。
节点树维度的生命周期:组件在页面节点树发生变化时触发,主要包含 created、attached、ready、moved、detached 方法,这些方法包含了一个组件实例生命流程的主要时间点。
生命周期示意图

数据维度生命周期
数据维度的生命周期,在 component 构造器的第一级参数中定义。 生命周期函数具体信息见下表:
函数名
参数
说明
最低版本
oninit
-
组件创建时触发。 注: 需 开启component2
derivedatafromprops
nextprops
组件创建时和更新前触发。 注: 需 开启component2
didmount
-
组件创建完毕时触发。
-
didupdate
(prevprops,prevdata)
组件更新完毕时触发。
-
didunmount
-
组件删除时触发。
-
onerror
error
组件 js 代码抛出错误时触发。
注意
基础库 1.14.0 开始支持的生命周期函数 oninitderivedatafromprops 需在项目配置里 开启component2 后才会生效,自定义组件 component2 相关介绍详见自定义组件介绍-使用须知
运行时阶段,可以使用 my.caniuse('component2') 做兼容,判断当前自定义组件是否会触发 oninit 以及 derivedatafromprops
根据 ,基础库 1.14.0以下的版本占比极低,可以忽略。
oninit
oninit 在组件创建时触发。在 oninit 中,可以进行以下操作:
访问 this.isthis.$idthis.$page 等属性。
访问 this.datathis.props 等属性。
访问组件 methods 中的自定义属性。
调用 this.setdatathis.$splicedata 修改数据。
示例代码
当组件在页面上渲染后,页面输出如下:
derivedatafromprops
derivedatafromprops 在组件创建和更新时都会触发。 derivedatafromprops 中可以:
访问 this.isthis.$idthis.$page 等属性。
访问 this.datathis.props 等属性。
访问组件 methods 中的自定义属性。
调用 this.setdatathis.$splicedata 修改数据。
可以使用 nextprops 参数获取将要更新的 props 参数。
示例代码
注意: 本示例中点击 按钮,页面上的 counter 会一直保持不变,直到 pcounter 的值大于 5。
didmount
didmount 为组件创建完毕的回调。此时组件已完成首次渲染。
示例代码
didupdate
didupdate 为自定义组件数据更新后的回调,每次组件数据变更的时候都会调用。
示例代码
注意
组件内部调用 this.setdata 会触发 didupdate。
外部调用者调用 this.setdata 也会触发 didupdate。
didunmount
didunmount 为自定义组件被卸载后的回调,每当组件实例从页面卸载的时候都会触发此回调。
示例代码
onerror
onerror 为自定义组件 js 代码执行抛出出错时的回调。
示例代码
节点树维度生命周期 lifetimes
节点树维度的生命周期,在节点树发生变化时触发,包含了一个组件实例生命流程的主要时间点。 从基础库版本 2.8.5 开始, component 构造器开始支持 lifetimes 字段,用于定义节点树维度的生命周期。 生命周期函数具体信息见下表:
函数名
参数
说明
最低版本
created
-
在组件实例刚刚被创建时执行。
attached
-
在组件实例进入页面节点树时执行。
ready
-
在组件在视图层布局完成后执行。
moved
-
在组件实例被移动到节点树另一个位置时执行。
detached
-
在组件实例被从页面节点树移除时执行。
开启 lifetimes
为避免基础库原生支持的 lifetimes 与开发者自身对 lifetimes 字段的封装产生冲突,需要由开发者显式开启 lifetimes,否则框架不自动触发 lifetimes 相关方法。 通过 component 构造器的 options 配置项设置 lifetimes: true 开启。
注意
在 mixin 中也可以编写 lifetimes 内的生命周期方法,同时不会与其它 mixin 实例中的同名生命周期相互覆盖。
bug & tip
bug 基础库 2.8.5 版本,退出一个页面时,还在页面节点树中的组件 detached 不会被触发。
示例代码
相关文档
my.caniuse
兼容
内容没有解决您的问题?您还可以前往 或 寻求帮助
凯发k8官方网娱乐官方 copyright © 2022 支付宝(杭州)信息技术有限公司  | icp证浙b2-20160559
该文档对你是否有帮助?
当前页面目录
网站地图