微信小程序组件生命周期的踩坑记录

我来为你详细讲解“微信小程序组件生命周期的踩坑记录”的完整攻略。

1. 小程序组件生命周期简介

组件是小程序中重要的 UI 交互部件，类似于 HTML 中的元素。而组件的生命周期则是描述组件自身在不同的时刻调用的生命周期函数的过程。小程序中的组件生命周期分为三个阶段：创建阶段、属性更新阶段和销毁阶段。

下面是组件生命周期的函数调用顺序：

1. created：在组件实例刚刚被创建时调用，此时组件数据未绑定，因此无法调用 setData。

2. attached：在组件实例进入页面节点树时调用，此时组件可以调用 setData 更新数据。

3. ready：在组件渲染完毕后调用，此时可以获取组件宽度、高度等属性。

4. moved（仅基础库 2.2.3 及以上支持）：在组件实例被移动到节点树另一个位置时调用。

5. detached：在组件实例从页面节点树中移除时调用。

2. 组件生命周期函数的注意事项

在编写小程序组件时，需要注意以下几点：

1. 组件的生命周期函数只能在 Component 构造器内定义，不要直接在组件实例或外部枚举中定义。

2. 组件的 created 函数中不要调用 setData 方法，因为在此生命周期函数时，组件数据还未绑定。

3. 组件的 ready 函数中可以获取组件宽度、高度等属性值，但不推荐在此处调用 setData 更新数据，因为如果本次 setData 导致了视图的更新，又会触发一次组件的生命周期函数，从而造成无限循环。

3. 示例说明

示例1：组件销毁时清除定时器

在组件销毁时，需要清除该组件内的所有定时器，否则会出现内存泄漏的问题。我们可以在组件的 detached 生命周期函数中清除所有的定时器。

Component({
  created() {
    this.timer = null;
  },

  attached() {
    this.timer = setInterval(() => {
      console.log('setInterval');
    }, 1000);
  },

  detached() {
    clearInterval(this.timer);
  }
});

示例2：获取组件宽度和高度

在组件 ready 生命周期函数中，可以获取组件的宽度和高度等信息。

Component({
  ready() {
    const query = wx.createSelectorQuery().in(this);
    query.select('.container').boundingClientRect((res) => {
      console.log('width:', res.width);
      console.log('height:', res.height);
    }).exec();
  }
});

在上面的例子中，我们使用了 wx.createSelectorQuery() 方法来创建一个 SelectorQuery 对象，然后调用 query.select() 方法获取组件节点的信息。获取到组件节点信息后，我们可以在回调函数中获取到宽度和高度等属性值。