微信小程序开发中组件的生命周期详细介绍

微信小程序开发中，组件的生命周期是指组件实例从创建到销毁的整个过程中的各个环节。组件的生命周期可以分为创建、更新和销毁三个阶段，每个阶段有对应的生命周期函数，开发者可以在生命周期函数中编写业务逻辑代码，来响应组件的生命周期事件。

组件的生命周期

一个组件的完整生命周期会包括以下三个阶段：

创建阶段

组件创建阶段的生命周期函数：

• created
• attached
• ready

created

created生命周期函数在组件被创建后立即执行，此时组件视图还未添加到页面中。通常可以在这个函数中初始化一些数据和变量。例如：

Component({
  created: function() {
    console.log('component created')
    this.setData({
      count: 0
    })
  }
})

上例中，当组件被创建时，将count初始化为0。

attached

attached生命周期函数在当前组件实例被附加到页面视图中后执行，即当前组件生成了对应的节点，并添加到页面中。例如：

Component({
  attached: function() {
    console.log('component attached')
  }
})

上例中，在当前组件被添加到页面中后（即附加时），打印一段日志信息。

ready

ready生命周期函数在组件视图层布局完成后执行，此时可以获取到组件的宽度和高度等信息。例如：

Component({
  ready: function() {
    console.log('component ready')
  }
})

上例中，在组件视图布局完成后，打印一段日志信息。

更新阶段

组件更新阶段的生命周期函数：

• moved
• detached
• propertiesChanged
• observers

moved

在小程序组件中，一个被重新插入到节点树中的组件会触发moved生命周期函数。例如：

Component({
  moved: function() {
    console.log('component moved')
  }
})

上例中，当组件被重新插入到页面节点树中时（例如，在某个条件满足后），触发移动事件，并打印日志信息。

detached

detached生命周期函数在组件被从页面节点树中移除后（即销毁）触发，这时组件实例已经被销毁掉了。例如：

Component({
  detached: function() {
    console.log('component detached')
  }
})

上例中，当组件被销毁后，打印日志信息。

propertiesChanged

propertiesChanged生命周期函数在组件的属性值被更新时触发。例如：

Component({
  properties: {
    text: {
      type: String,
      value: ''
    }
  },
  observers:{
    text: function(val) {
      console.log('text value changed', val)
    }
  }
})

上例中，当组件的text属性值被更新时触发observers监听，并打印日志信息。

observers

observers生命周期函数可以监听组件的属性、数据或其他值的变化，当监听的数据发生变化时会触发该函数。例如：

Component({
  properties: {
    text: {
      type: String,
      value: ''
    }
  },
  observers:{
    textAndCount: function(text, count) {
      console.log('text or count value changed', text, count)
    }
  }
})

上例中，定义了一个对text和count进行监听的observers函数，当属性值发生变化时，将会触发打印日志信息。

销毁阶段

组件销毁阶段的生命周期函数：

• detached

在组件被销毁后，该组件的实例、事件监听、数据及其状态也随之销毁，此时组件的生命周期也随之结束。从下列示例可以更好的了解组件的生命周期。

代码示例

下面给出两段示例，可以更好地了解微信小程序组件的生命周期。

例如，一个自定义组件的代码如下：

Component({
  properties: {
    text: {
      type: String,
      value: 'hello'
    }
  },
  data: {
    count: 0
  },
  lifetimes: {
    created: function() {
      console.log('component created')
    },
    attached: function() {
      console.log('component attached')
    },
    ready: function() {
      console.log('component ready')
    },
    detached: function() {
      console.log('component destroyed')
    },
    error: function() {
      console.log('component error')
    }
  },
  methods: {
    onClick: function() {
      this.setData({
        count: this.data.count + 1
      })
    }
  }
})

上例中的自定义组件具有一个text属性和一个count状态值，在组件本身的生命周期函数和方法中分别实现了日志输出和点击事件响应功能。

又如，在一个具有observers属性的自定义组件中，可以监听数据的变化：

Component({
  properties: {
    text: {
      type: String,
      value: ''
    }
  },
  observers:{
    text: function(val) {
      console.log('text value changed', val)
    }
  },
  methods: {
    setText: function() {
      this.setData({
        text: 'new text'
      })
    }
  }
})

上例中，自定义组件的observers属性监听了组件的text属性变化，当text属性值发生变化时，打印日志信息。组件中还提供了setText方法，通过调用该方法，在控制台可以看到输出的日志信息。

总结

综上所述，微信小程序组件生命周期分为创建、更新和销毁三个阶段，每个阶段都有对应的生命周期函数，开发者可以在这些函数中编写业务逻辑代码，来响应组件的生命周期事件。在开发过程中，需要注意生命周期函数的调用顺序以及不同阶段的作用。