程序员scholar
  • 小程序开发
  • 原生微信小程序
  • 自定义组件
scholar
2024-10-18
目录

组件的生命周期

# 组件的生命周期

# 1. 组件全部的生命周期函数

微信小程序中的组件和页面一样，都有自己的生命周期函数。生命周期函数允许开发者在组件的不同阶段执行特定的操作，比如初始化数据、清理资源等。组件的生命周期比页面稍微复杂一点，因为组件还可能受到页面生命周期的影响。

组件的生命周期函数如下图所示：

组件生命周期

  • created：组件实例被创建时触发，此时组件还未被添加到页面节点树中，不能调用 setData 方法。
  • attached：组件被添加到页面节点树中时触发，适合进行组件的初始化工作，如数据请求。
  • ready：组件布局完成时触发，组件已经可以与页面和其他组件交互。
  • moved：组件被移动到页面节点树中的另一个位置时触发。
  • detached：组件被从页面节点树中移除时触发，适合进行资源清理操作。

# 2. 组件主要的生命周期函数

尽管小程序组件有多个生命周期函数，但最常用的生命周期函数有 3 个，它们是组件开发中最关键的部分，分别是：created、attached 和 detached。

# 2.1 created：组件实例被创建时触发

created 生命周期函数会在组件实例被创建时触发，此时组件还未被添加到页面的节点树中，因此无法与 DOM 交互或调用 setData 方法。

主要特点：

  • 此时 this 已经可以使用，但组件还未进入页面节点树中。
  • 不能调用 setData。
  • 适合用于初始化一些非界面相关的数据，如计算一些初始值或设置内部变量。

示例：

Component({
  created() {
    console.log('组件已创建');
    this.internalState = {};  // 初始化内部状态
  }
});
1
2
3
4
5
6

# 2.2 attached：组件进入页面节点树时触发

attached 生命周期函数会在组件被挂载到页面节点树中时触发。此时，setData 方法已经可以使用，组件的 data 数据已经初始化完毕，通常在这个时机进行页面渲染和数据请求。

主要特点：

  • 组件已经进入页面节点树，setData 可以使用。
  • 适合进行组件的初始化工作，比如发起网络请求、设置初始显示状态等。

示例：

Component({
  attached() {
    console.log('组件已挂载');
    this.setData({
      initialData: '已加载数据'
    });
  }
});
1
2
3
4
5
6
7
8

# 2.3 detached：组件从页面节点树中移除时触发

detached 生命周期函数会在组件被从页面节点树中移除时触发。此时通常需要清理组件中的一些资源，例如关闭定时器、取消网络请求等，以避免内存泄漏。

主要特点：

  • 组件从页面节点树中移除时触发。
  • 适合执行资源清理操作，比如移除事件监听器、清除定时器等。

示例：

Component({
  detached() {
    console.log('组件已卸载');
    clearInterval(this.timer);  // 清理定时器
  }
});
1
2
3
4
5
6

# 3. lifetimes 节点

在微信小程序中，生命周期函数可以直接定义在 Component 构造器的第一层参数中，但推荐使用 lifetimes 节点来声明生命周期函数。lifetimes 是小程序的官方推荐方式，并且其优先级最高。

# 3.1 lifetimes 的使用

在 Component 构造器中，通过 lifetimes 节点可以集中定义所有生命周期函数。

示例代码：

Component({
  lifetimes: {
    created() {
      console.log('生命周期函数 - created');
    },
    attached() {
      console.log('生命周期函数 - attached');
    },
    detached() {
      console.log('生命周期函数 - detached');
    }
  }
});
1
2
3
4
5
6
7
8
9
10
11
12
13

示例图：

lifetimes 声明生命周期函数

# 4. 组件所在页面的生命周期

组件的生命周期不仅仅受限于组件本身的状态，还可能与组件所在页面的生命周期有关。某些情况下，组件需要依赖页面的状态变化来执行某些操作，比如在页面显示时加载数据、在页面隐藏时暂停某些活动等。此时，我们需要使用组件所在页面的生命周期函数。

# 4.1 什么是组件所在页面的生命周期

组件所在页面的生命周期函数允许组件监听其所在页面的状态变化。当页面状态发生变化时，组件也可以做出相应的响应。常见的页面生命周期包括：

  • show：页面显示时触发，通常用于页面重新显示时执行一些操作，如重新加载数据。
  • hide：页面隐藏时触发，适合暂停某些活动，如停止动画、暂停视频等。
  • resize：页面尺寸发生变化时触发，通常用于处理页面在不同设备上的自适应。

# 4.2 使用 pageLifetimes 监听页面生命周期

在微信小程序中，组件可以通过 pageLifetimes 节点来监听组件所在页面的生命周期函数。例如，组件可以监听页面的 show、hide 和 resize 事件。

示例代码：

Component({
  pageLifetimes: {
    show() {
      console.log('页面显示，执行组件操作');
      this.setData({
        color: this.generateRandomColor()
      });
    },
    hide() {
      console.log('页面隐藏，暂停组件活动');
    },
    resize(size) {
      console.log('页面尺寸变化', size);
    }
  },
  methods: {
    generateRandomColor() {
      const r = Math.floor(Math.random() * 256);
      const g = Math.floor(Math.random() * 256);
      const b = Math.floor(Math.random() * 256);
      return `rgb(${r}, ${g}, ${b})`;
    }
  }
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

示例图：

pageLifetimes 节点

# 5. 案例：生成随机 RGB 颜色

我们通过一个简单的案例展示如何使用组件和页面的生命周期函数。在页面显示时生成一个随机的 RGB 颜色，并应用到组件的背景色上。

# 5.1 案例效果

在页面每次显示时，组件会生成一个随机的 RGB 颜色，并将其应用为组件的背景色。

# 5.2 生成随机颜色

在组件的 pageLifetimes 中监听页面的 show 生命周期，当页面显示时，调用 generateRandomColor 方法生成随机颜色。

示例代码：

Component({
  pageLifetimes: {
    show() {
      this.setData({
        color: this.generateRandomColor()
      });
    }
  },
  methods: {
    generateRandomColor() {
      const r = Math.floor(Math.random() * 256);
      const g = Math.floor(Math.random() * 256);
      const b = Math.floor(Math.random() * 256);
      return `rgb(${r}, ${g}, ${b})`;
    }
  }
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

# 5.3 示例图

生成随机颜色

总结

微信小程序中的组件生命周期是开发过程中非常重要的部分。通过生命周期函数，开发者可以控制组件在不同阶段的行为，包括初始化、渲染、资源清理等操作。与此同时，组件还可以监听其所在页面的生命周期，响应页面的状态变化，从而实现更灵活的组件交互和优化。理解并善用这些生命周期函数，能够有效提升小程序的性能和可维护性。

编辑此页 (opens new window)
上次更新: 2025/01/31, 00:08:39
纯数据字段
插槽

← 插槽→

Theme by Vdoing | Copyright © 2019-2025 程序员scholar