# Component life cycle

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

The most important life cycle is created attached detached , contains the most significant time point in the life flow of a component instance.

• The component instance has just been created, created The life cycle is triggered. At this point, the component data this.data That's when Component Data defined in the constructor Data 。 You cannot call at this time setData 。 Typically, this lifecycle should only be used to give components this Add some custom property fields.
• After the component is fully initialized and enters the page node tree, attached The life cycle is triggered. At this time, this.data Has been initialized to the current value of the component. This lifecycle is useful, and most of the initialization can be done at this point.
• After the component leaves the page node tree, detached The life cycle is triggered. When exiting a page, if the component is still in the page node tree, the detached Will be triggered.

# Defining a Life Cycle Approach

The lifecycle approach can be defined directly in the Component In the first level parameter of the constructor.

Mini Program base library version 2.2.3 The life cycle of a component can also be lifetimes Field (this is the recommended way and has the highest priority).

# Code Examples

Component({
  lifetimes: {
    attached: function() {
      // Executed when the component instance enters the page node tree
    },
    detached: function() {
      // Executed when the component instance is removed from the page node tree
    },
  },
  // The following is the old-fashioned way of defining it to keep the <2.2.3 Compatibility with version base library
  attached: function() {
    // Executed when the component instance enters the page node tree
  },
  detached: function() {
    // Executed when the component instance is removed from the page node tree
  },
  // ...
})

in behaviors You can also write lifecycle methods in the behaviors The lifetimes of the same name in the. But be aware that if a component refers directly or indirectly to the same behavior , This behavior Is executed only once in a single execution time. The periodic functions in.

The full life cycles available are shown in the table below.

# The life cycle of the page where the component resides

There are also special lifecycles that are not strongly associated with components, but that sometimes components need to be aware of in order for them to handle internally. Such a life cycle is called the "life cycle of the page on which the component resides." pageLifetimes Defined in the definition paragraph. The available life cycles include:

Note: Custom tabBar of PageLifetime It won't trigger.

# Code Examples

Component({
  pageLifetimes: {
    show: function() {
      // The page is displayed
    },
    hide: function() {
      // The page is hidden
    },
    resize: function(Size) {
      // Page Size Changes
    }
  }
})