微信小程序组件生命周期

淡淡的烟草味﹌ 2021-09-08 20:14 341阅读 0赞

[完整**微信小程序(Java后端) 技术贴**目录清单页面（必看）][Java_]

组件的生命周期，指的是组件自身的一些函数，这些函数在特殊的时间点或遇到一些特殊的框架事件时被自动触发。

其中，最重要的生命周期是 `created` `attached` `detached` ，包含一个组件实例生命流程的最主要时间点。

*  组件实例刚刚被创建好时， `created` 生命周期被触发。此时，组件数据 `this.data` 就是在 `Component` 构造器中定义的数据 `data` 。 **此时还不能调用 `setData` 。** 通常情况下，这个生命周期只应该用于给组件 `this` 添加一些自定义属性字段。
 *  在组件完全初始化完毕、进入页面节点树后， `attached` 生命周期被触发。此时， `this.data` 已被初始化为组件的当前值。这个生命周期很有用，绝大多数初始化工作可以在这个时机进行。
 *  在组件离开页面节点树后， `detached` 生命周期被触发。退出一个页面时，如果组件还在页面节点树中，则 `detached` 会被触发。

**定义生命周期方法**

生命周期方法可以直接定义在 `Component` 构造器的第一级参数中。

自小程序基础库版本 [2.2.3][] 起，组件的的生命周期也可以在 `lifetimes` 字段内进行声明（这是推荐的方式，其优先级最高）。

**代码示例：**

Component({ 
      lifetimes: { 
        attached: function() { 
          // 在组件实例进入页面节点树时执行
        },
        detached: function() { 
          // 在组件实例被从页面节点树移除时执行
        },
      },
      // 以下是旧式的定义方式，可以保持对 <2.2.3 版本基础库的兼容
      attached: function() { 
        // 在组件实例进入页面节点树时执行
      },
      detached: function() { 
        // 在组件实例被从页面节点树移除时执行
      },
      // ...
    })

在 behaviors 中也可以编写生命周期方法，同时不会与其他 behaviors 中的同名生命周期相互覆盖。但要注意，如果一个组件多次直接或间接引用同一个 behavior ，这个 behavior 中的生命周期函数在一个执行时机内只会执行一次。

可用的全部生命周期如下表所示。

<table> 
 <thead> 
  <tr> 
   <th align="left">生命周期</th> 
   <th align="left">参数</th> 
   <th align="left">描述</th> 
   <th align="left">最低版本</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">created</td> 
   <td align="left">无</td> 
   <td align="left">在组件实例刚刚被创建时执行</td> 
   <td align="left"><a href="https://developers.weixin.qq.com/miniprogram/dev/framework/compatibility.html" rel="nofollow">1.6.3</a></td> 
  </tr> 
  <tr> 
   <td align="left">attached</td> 
   <td align="left">无</td> 
   <td align="left">在组件实例进入页面节点树时执行</td> 
   <td align="left"><a href="https://developers.weixin.qq.com/miniprogram/dev/framework/compatibility.html" rel="nofollow">1.6.3</a></td> 
  </tr> 
  <tr> 
   <td align="left">ready</td> 
   <td align="left">无</td> 
   <td align="left">在组件在视图层布局完成后执行</td> 
   <td align="left"><a href="https://developers.weixin.qq.com/miniprogram/dev/framework/compatibility.html" rel="nofollow">1.6.3</a></td> 
  </tr> 
  <tr> 
   <td align="left">moved</td> 
   <td align="left">无</td> 
   <td align="left">在组件实例被移动到节点树另一个位置时执行</td> 
   <td align="left"><a href="https://developers.weixin.qq.com/miniprogram/dev/framework/compatibility.html" rel="nofollow">1.6.3</a></td> 
  </tr> 
  <tr> 
   <td align="left">detached</td> 
   <td align="left">无</td> 
   <td align="left">在组件实例被从页面节点树移除时执行</td> 
   <td align="left"><a href="https://developers.weixin.qq.com/miniprogram/dev/framework/compatibility.html" rel="nofollow">1.6.3</a></td> 
  </tr> 
  <tr> 
   <td align="left">error</td> 
   <td align="left"><code>Object Error</code></td> 
   <td align="left">每当组件方法抛出错误时执行</td> 
   <td align="left"><a href="https://developers.weixin.qq.com/miniprogram/dev/framework/compatibility.html" rel="nofollow">2.4.1</a></td> 
  </tr> 
 </tbody> 
</table>

**组件所在页面的生命周期**

还有一些特殊的生命周期，它们并非与组件有很强的关联，但有时组件需要获知，以便组件内部处理。这样的生命周期称为“组件所在页面的生命周期”，在 `pageLifetimes` 定义段中定义。其中可用的生命周期包括：

**代码示例：**

Component({ 
      pageLifetimes: { 
        show: function() { 
          // 页面被展示
        },
        hide: function() { 
          // 页面被隐藏
        },
        resize: function(size) { 
          // 页面尺寸变化
        }
      }
    })

> 微信搜一搜【java1234】关注这个放荡不羁的程序员，关注后回复【资料】有我准备的一线大厂笔试面试资料以及简历模板。

[Java_]: https://blog.csdn.net/caoli201314/article/details/116643190
[2.2.3]: https://developers.weixin.qq.com/miniprogram/dev/framework/compatibility.html