小程序学习笔记：组件的生命周期及组件所在页面的生命周期

本文链接：https://blog.csdn.net/you4580/article/details/149062481

在小程序开发中，组件的生命周期是一个非常重要的概念，它关乎着组件在不同阶段的行为和状态管理。今天，就让我们一起来深入探讨小程序组件的生命周期，包括生命周期函数有哪些、它们的执行时机、主要生命周期函数的特点，以及如何定义这些函数。

一、组件的生命周期函数有哪些

小程序组件中总共有六个生命周期函数，它们按照执行顺序分别是：created、attached、ready、moved、detached、error。这些函数在组件的不同阶段发挥着各自的作用，下面我们来详细了解一下每个函数的执行时机。

created：当组件实例刚刚被创建好时执行。此时组件还未被放入小程序页面中，在这个阶段能做的事情比较有限，比如只能为组件的this实例挂载一些自定义的属性字段，但不能调用this.setData方法为组件里面的数据重新赋值。
attached：组件实例刚进入到页面节点树时执行。这意味着组件已经被放入到页面的 UI 结构中，但还未被渲染。在这个生命周期函数内部，组件的data数据已经被初始化完毕，可以进行一些初始化的操作，例如发起网络数据请求获取初始数据，这在实际开发中经常会用到。
ready：组件被渲染完成后执行。当组件在页面上真正显示出来，就会触发这个函数。
moved：当组件在页面上被移动位置时执行。比如将已经渲染好的组件从页面的 A 位置移动到 C 位置，此时就会触发moved生命周期函数。
detached：组件实例被从页面节点树移除的时候执行。当组件被销毁，或者退出包含该组件的页面时，就会触发这个函数，适合在其中做一些清理性质的工作，比如解绑在组件创建期间绑定的事件监听。
error：每当组件方法抛出错误，即组件里面的方法执行异常时触发。

二、主要生命周期函数的特点

在这六个生命周期函数中，有三个是比较重要的，分别是created、attached和detached。

created：组件创建初期，仅能为this挂载自定义属性，无法操作数据。
attached：组件初始化完成进入页面，可在此进行数据请求等初始化操作，使用频率较高。
detached：组件销毁时执行，用于清理资源，如解绑事件监听。

三、如何定义组件的生命周期函数

小程序组件定义生命周期函数有新旧两种方式

旧方式：直接和data节点、methods节点平级声明生命周期函数。例如，在组件的js文件中，可以这样定义：

Component({
  data: {
    // 数据定义
  },
  methods: {
    // 方法定义
  },
  created() {
    console.log('created');
  },
  attached() {
    console.log('attached');
  }
})

这种方式虽然能够正常工作，但目前已经不再推荐使用。
2. 新方式：在lifetimes节点里面进行定义，这是目前推荐的形式。示例代码如下：

Component({
  data: {
    // 数据定义
  },
  methods: {
    // 方法定义
  },
  lifetimes: {
    created() {
      console.log('created');
    },
    attached() {
      console.log('attached');
    }
  }
})

如果新旧两种方式同时存在，会以新的方式为主，旧方式定义的生命周期函数会被覆盖而不会执行。所以，在今后的开发中，建议统一在lifetimes节点内部去定义组件的生命周期函数。

==========================================================

在前端开发的世界里，组件化开发是提高代码复用性和开发效率的关键手段。而理解组件所在页面的生命周期，对于打造灵活、高效的前端应用至关重要。今天，就让我们一起深入探索组件所在页面的生命周期，通过理论与实战相结合的方式，掌握其精髓。

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

在实际开发中，自定义组件的行为往往需要依赖页面状态的变化。比如，一个组件可能只有在特定页面展示时才会发挥作用，或者需要根据页面的显示、隐藏以及尺寸变化做出相应调整。这时候，我们就需要借助组件所在页面的生命周期。

简单来说，在组件的 JavaScript 文件中，我们可以监听页面状态的变化，并根据这些变化执行相关操作。以一个名为test3的组件为例，它依赖于home首页才能展示，且默认颜色为黑色。如果我们希望在首页展示时随机生成一个颜色值，就需要用到组件所在页面的生命周期。

在组件中，我们可以访问页面的三个生命周期函数，分别是show、hide和resize：

show：用于在组件内部监听当前页面展示的行为。当页面被展示出来时，show函数会被触发。
hide：用于监听当前页面被隐藏的行为。当页面切换到其他页面或被隐藏时，hide函数会被调用。
resize：用于监听当前页面尺寸变化的行为。当页面的大小发生改变时，resize函数会执行

如何在组件中监听所在页面的生命周期函数

要在组件中监听所在页面的生命周期函数，我们需要用到lifetimes配置节点。这个节点与data、methods等节点同级，所有希望监听的页面生命周期函数都要定义在lifetimes节点中。

以下是一个示例代码，展示了如何在组件的js文件中监听页面的生命周期函数：

Component({
  lifetimes: {
    show() {
      console.log('页面展示');
    },
    hide() {
      console.log('页面隐藏');
    },
    resize() {
      console.log('页面尺寸变化');
    }
  }
});

在实际操作中，我们可以打开微信开发者工具进行演示。以test3组件为例，在组件的js文件中，按照上述代码配置lifetimes节点。保存代码后，打开调试器，当组件所在页面被展示出来时，在终端中会看到页面展示的打印信息；当从首页切换到其他页面时，会打印页面隐藏；如果页面尺寸发生变化，就会打印页面尺寸变化。这证明我们可以通过这些生命周期函数成功监听页面的相关事件。

实战：在页面展示时为组件生成随机 RGB 颜色值

接下来，我们通过一个实战案例，深入理解如何利用组件所在页面的生命周期函数来实现具体功能 —— 在页面被展示出来时，为组件生成一个随机的 RGB 颜色值。

需求描述

我们有一个test3组件，放置在home首页中展示，其默认颜色值为纯黑色。现在希望每次进入home首页时，都能为组件的颜色值（假设为_rgb对象）重新生成一个随机的 RGB 颜色值。

实现思路

组件的展示依赖于页面，所以我们在组件内部监听页面的show生命周期函数。
当show函数被触发时，证明组件所在页面被展示出来了。此时，在show方法内部随机生成一个 RGB 颜色值，并赋值给组件data中的_rgb对象。

核心代码实现

在methods节点中声明一个方法_randomColor，用于生成随机的 RGB 颜色值并赋值给_rgb对象。

Component({
  data: {
    _rgb: {
      r: 0,
      g: 0,
      b: 0
    }
  },
  methods: {
    _randomColor() {
      const r = Math.floor(Math.random() * 256);
      const g = Math.floor(Math.random() * 256);
      const b = Math.floor(Math.random() * 256);
      this.setData({
        _rgb: {
          r,
          g,
          b
        }
      });
    }
  }
});

在lifetimes配置节点的show方法中调用_randomColor方法。

Component({
  data: {
    _rgb: {
      r: 0,
      g: 0,
      b: 0
    }
  },
  methods: {
    _randomColor() {
      const r = Math.floor(Math.random() * 256);
      const g = Math.floor(Math.random() * 256);
      const b = Math.floor(Math.random() * 256);
      this.setData({
        _rgb: {
          r,
          g,
          b
        }
      });
    }
  },
  lifetimes: {
    show() {
      this._randomColor();
    }
  }
});