更新时间:2023-09-15 11:33:58贡献者 5收藏订阅更新我的文档设置返回文档组件的生命周期,指的是在特殊的时间点由框架自动触发的一些组件方法。基础库提供两种维度的生命周期:●数据维度的生命周期:主要包含 oninit、derivedatafromprops、didmount、didupdate、didunmount、onerror 方法。●节点树维度的生命周期:组件在页面节点树发生变化时触发,主要包含 created、attached、ready、moved、detached 方法,这些方法包含了一个组件实例生命流程的主要时间点。生命周期示意图数据维度生命周期数据维度的生命周期,在 component 构造器的第一级参数中定义。 生命周期函数具体信息见下表:函数名参数说明最低版本oninit-组件创建时触发。 注: 需 开启component21.14.0derivedatafrompropsnextprops组件创建时和更新前触发。 注: 需 开启component21.14.0didmount-组件创建完毕时触发。-didupdate(prevprops,prevdata)组件更新完毕时触发。-didunmount-组件删除时触发。-onerrorerror组件 js 代码抛出错误时触发。1.24.9注意:●基础库 1.14.0 开始支持的生命周期函数 oninit、derivedatafromprops 需在项目配置里 开启component2 后才会生效,自定义组件 component2 相关介绍详见自定义组件介绍-使用须知。●运行时阶段,可以使用 my.caniuse('component2') 做兼容,判断当前自定义组件是否会触发 oninit 以及 derivedatafromprops。●根据 ,基础库 1.14.0以下的版本占比极低,可以忽略。oninitoninit 在组件创建时触发。在 oninit 中,可以进行以下操作:●访问 this.is、this.$id、this.$page 等属性。●访问 this.data、this.props 等属性。●访问组件 methods 中的自定义属性。●调用 this.setdata、this.$splicedata 修改数据。示例代码当组件在页面上渲染后,页面输出如下:derivedatafrompropsderivedatafromprops 在组件创建和更新时都会触发。 在 derivedatafromprops 中可以:●访问 this.is、this.$id、this.$page 等属性。●访问 this.data、this.props 等属性。●访问组件 methods 中的自定义属性。●调用 this.setdata、this.$splicedata 修改数据。●可以使用 nextprops 参数获取将要更新的 props 参数。示例代码注意: 本示例中点击 按钮,页面上的 counter 会一直保持不变,直到 pcounter 的值大于 5。didmountdidmount 为组件创建完毕的回调。此时组件已完成首次渲染。示例代码didupdatedidupdate 为自定义组件数据更新后的回调,每次组件数据变更的时候都会调用。示例代码注意:●组件内部调用 this.setdata 会触发 didupdate。●外部调用者调用 this.setdata 也会触发 didupdate。didunmountdidunmount 为自定义组件被卸载后的回调,每当组件实例从页面卸载的时候都会触发此回调。示例代码onerroronerror 为自定义组件 js 代码执行抛出出错时的回调。示例代码节点树维度生命周期 lifetimes节点树维度的生命周期,在节点树发生变化时触发,包含了一个组件实例生命流程的主要时间点。 从基础库版本 2.8.5 开始, component 构造器开始支持 lifetimes 字段,用于定义节点树维度的生命周期。 生命周期函数具体信息见下表:函数名参数说明最低版本created-在组件实例刚刚被创建时执行。2.8.5attached-在组件实例进入页面节点树时执行。2.8.5ready-在组件在视图层布局完成后执行。2.8.5moved-在组件实例被移动到节点树另一个位置时执行。2.8.5detached-在组件实例被从页面节点树移除时执行。2.8.5开启 lifetimes为避免基础库原生支持的 lifetimes 与开发者自身对 lifetimes 字段的封装产生冲突,需要由开发者显式开启 lifetimes,否则框架不自动触发 lifetimes 相关方法。 通过 component 构造器的 options 配置项设置 lifetimes: true 开启。注意在 mixin 中也可以编写 lifetimes 内的生命周期方法,同时不会与其它 mixin 实例中的同名生命周期相互覆盖。bug & tip●bug 基础库 2.8.5 版本,退出一个页面时,还在页面节点树中的组件 detached 不会被触发。示例代码相关文档●my.caniuse●兼容