组件生命周期
组件的生命周期指的是组件自身的一些函数,这些函数在特殊的时间点或遇到一些特殊的框架事件时被自动触发。
其中,最重要的生命周期是 created
、attached
和 detached
,包含一个组件实例生命流程的最主要时间点。
- 组件实例刚刚被创建时,
created
生命周期被触发。此时,组件数据this.data
就是在Component
构造器中定义的数据data
。 此时还不能调用setData
。通常情况下,这个生命周期只应该用于给组件this
添加一些自定义属性字段。 - 在组件完全初始化完毕、进入页面节点树后,
attached
生命周期被触发。此时,this.data
已被初始化为组件的当前值。这个生命周期很有用,绝大多数初始化工作可以在这个时机进行。 - 在组件离开页面节点树后,
detached
生命周期被触发。退出一个页面时,如果组件还在页面节点树中,则detached
会被触发。
定义生命周期方法
生命周期方法需要定义在 Component
构造器的 lifetimes
字段内进行声明。
示例代码:
Component({
lifetimes: {
attached: function () {
// 在组件实例进入页面节点树时执行
},
detached: function () {
// 在组件实例被从页面节点树移除时执行
},
},
// ...
});
在 behaviors
中也可以编写生命周期方法,同时不会与其他 behaviors
中的同名生命周期相互覆盖。但要注意,如果一个组件多次直接或间接引用同一个 behavior
,这个 behavior
中的生命周期函数在一个执行时机内只会执行一次。
可用的全部生命周期如下表所示。
生命周期 | 参数 | 描述 |
---|---|---|
created | 无 | 在组件实例刚刚被创建时执行。 |
attached | 无 | 在组件实例进入页面节点树时执行。 |
detached | 无 | 在组件实例被从页面节点树移除时执行。 |
ready | 无 | 在组件在视图层布局完成后执行。 |
组件所在页面的生命周期
还有一些特殊的生命周期,它们并非与组件有很强的关联,但有时组件需要获知,以便组件内部处理。这样的生命周期称为 组件所在页面的生命周期,在 pageLifetimes
定义段中定义。其中可用的生命周期包括:
生命周期 | 参数 | 描述 | 最低版本 |
---|---|---|---|
show | 无 | 组件所在的页面被展示时执行。 | / |
hide | 无 | 组件所在的页面被隐藏时执行。 | / |
resize | 无 | 组件所在的页面尺寸发生改变。 | 2.6.2 |
示例代码:
Component({
pageLifetimes: {
show: function () {
// 页面被展示
},
hide: function () {
// 页面被隐藏
},
resize: function () {
// 页面尺寸发生改变
},
},
});
定义和使用组件间关系
有时需要实现这样的组件:
<custom-ul>
<custom-li> item 1 </custom-li>
<custom-li> item 2 </custom-li>
</custom-ul>
这个例子中,custom-ul
和 custom-li
都是自定义组件,它们有相互间的关系,相互间的通信往往比较复杂。此时,在组件定义时加入 relations
定义段,可以解决这样的问题。示例:
// path/to/custom-ul.js
Component({
relations: {
'./custom-li': {
type: 'child', // 关联的目标节点应为子节点
linked: function (target) {
// 每次有custom-li被插入时执行,target是该节点实例对象,在该节点attached生命周期之后触发
},
linkChanged: function (target) {
// 每次有custom-li被移动后执行,target是该节点实例对象,在该节点moved生命周期之后触发
},
unlinked: function (target) {
// 每次有custom-li被移除时执行,target是该节点实例对象,在该节点detached生命周期之后触发
},
},
},
});
// path/to/custom-li.js
Component({
relations: {
'./custom-ul': {
type: 'parent', // 关联的目标节点应为父节点
linked: function (target) {
// 每次被插入到custom-ul时执行,target是custom-ul节点实例对象,在custom-ul节点attached生命周期之后触发
},
linkChanged: function (target) {
// 每次被移动后执行,target是custom-ul节点实例对象,在custom-ul节点moved生命周期之后触发
},
unlinked: function (target) {
// 每次被移除时执行,target是custom-ul节点实例对象,在custom-ul节点detached生命周期之后触发
},
},
},
});
注意:必须在两个组件定义中都加入 relations
定义,否则不会生效。
relations 定义段
relations
定义段包含目标组件路径及其对应选项,可包含的选项见下表。
选项 | 类型 | 是否必须 | 描述 |
---|---|---|---|
type | String | 是 | 目标组件的相对关系,可选的值为 parent 、 child 、 ancestor 和 descendant 。 |
linked | Function | 否 | 关系生命周期函数,当关系被建立在页面节点树中时触发,触发时机在组件 attached 生命周期之后。 |
unlinked | Function | 否 | 关系生命周期函数,当关系脱离页面节点树时触发,触发时机在组件 detached 生命周期之后。 |