The component lifecycle

The life cycle of a component refers to functions of the component itself that are automatically triggered at a particular point in time or when special framework events are encountered.

One of the most important lifecycles is the create attached detached, which contains the most important point in the life flow of a component instance.

• When a component instance has just been created, the create lifecycle is triggered. A t this point, component data this.data is the data that is defined in the Component constructor. S etData cannot be called at this time. Typically, this lifecycle should only be used to add some custom property fields to the component this.
• The attached lifecycle is triggered after the component is fully initialized and enters the page node tree. A t this point, this.data has been initialized to the current value of the component. This life cycle is useful, and most initialization can be done at this time.
• The detached lifecycle is triggered after the component leaves the page node tree. When you exit a page, detached is triggered if the component is still in the page node tree.

Define lifecycle methods

The lifecycle method can be defined directly in the first-level parameters of the Component constructor.

Since the base library version 2.2.3, the life cycle of a component can also be declared within the lifetimes field (this is the recommended approach, with the highest priority).

Code example:

Component({
  lifetimes: {
    attached: function() {
      // 在组件实例进入页面节点树时执行
    },
    detached: function() {
      // 在组件实例被从页面节点树移除时执行
    },
  },
  // 以下是旧式的定义方式，可以保持对 <2.2.3 版本基础库的兼容
  attached: function() {
    // 在组件实例进入页面节点树时执行
  },
  detached: function() {
    // 在组件实例被从页面节点树移除时执行
  },
  // ...
})

Lifecycle methods can also be written in Behaviors, and will not be covered with each other in other Behaviors.But note that if a component is directly or indirectly references the same behavior, the lifecycle function in this Behavior will only be once in an execution timing.

The full life cycle available is as shown in the following table.

The life cycle of the page where the component is located

There are also special lifecycles that are not very relevant to components, but sometimes components need to be informed for internal processing. S uch a lifecycle is called the "life cycle of the page on which the component is located" and is defined in the pageLifetimes definition segment. The life cycles available include:

Code example:

Component({
  pageLifetimes: {
    show: function() {
      // 页面被展示
    },
    hide: function() {
      // 页面被隐藏
    },
    resize: function(size) {
      // 页面尺寸变化
    }
  }
})