微信小程序

2024-06-14 11:00| 来源: 网络整理| 查看: 265

查看微信小程序官网内容，请点击小程序官方组件生命周期

一、组件生命周期组件生命周期是组件自身的一些函数：组件实例刚被创建好，执行created，此时还不能调用setData在组件完全初始化完毕、进入页面节点树后，执行attached，this.data 已被初始化，绝大多数初始化工作可以在这个时机进行（这个生命周期可以做一些异步请求、数据更新）在组件离开页面节点树后， detached 生命周期被触发。退出一个页面时，如果组件还在页面节点树中，则 detached 会被触发。

在这里插入图片描述

具体的写法：生命周期方法可以直接定义在 Component 构造器的第一级参数中自小程序基础库版本 2.2.3 起，组件的的生命周期也可以在 lifetimes 字段内进行声明（这是推荐的方式，其优先级最高） Component({ lifetimes: { created: function() { // 在组件实例刚刚被创建时执行 console.log('子组件————————created') }, attached: function() { // 在组件实例进入页面节点树时执行 console.log('子组件————————attached') }, ready: function() { // 在组件在视图层布局完成后执行 console.log('子组件————————ready') }, detached: function() { // 在组件实例被从页面节点树移除时执行 console.log('子组件————————detached') }, }, // 以下是旧式的定义方式，可以保持对 // 在组件实例被从页面节点树移除时执行 }, })

记一下，上面有四个打印的log，后面我们一起综合看下执行顺序

二、组件所在页面的生命周期

即在组件内部，访问所在页面的生命周期

如果希望组件在页面 onShow等的时候，执行组件内部一些操作，就需要用到下面的生命周期

我具体的使用场景是，页面回退时需要更新子组件中data，用这个 pageLifetimes show 就很棒棒了

要注意一点，如果是在 method 手动调用页面的 onShow 或 onLoad方法，页面的生命周期会被执行，但是组件的相关生命周期、组件所在页面的相关生命周期都不会被再次执行！（可以往后面看打印的log）

Component({ // 组件所在页面的生命周期 pageLifetimes: { show: function() { console.log('子组件——————pageLifetimes——————show') }, hide: function() { console.log('子组件——————pageLifetimes——————hide') }, resize: function(size) { // 页面尺寸变化 } } })

这一次有两个打印的log，后面我们一起综合看下执行顺序

三、这么些个生命周期，执行顺序是怎样的？

为了看得更清晰，我在page中也加了打印：

Page({ onLoad() { console.log('页面————————onLoad') }, onShow () { console.log('页面————————onShow') }, onReady () { console.log('页面————————onReady') }, onHide () { console.log('页面————————onHide') }, doShow () { this.onShow() }, doLoad () { this.onLoad() }, }) 1、页面进入时的打印顺序子组件 ———————— created 子组件 ———————— attached 页面 ———————— onLoad 子组件 ———————— pageLifetimes —————— show 页面 ———————— onShow 子组件 ———————— ready 页面 ———————— onReady 2、页面跳转或点击胶囊退出时子组件 ———————— pageLifetimes —————— hide 页面 ———————— onHide 3、页面回退时子组件 ———————— pageLifetimes —————— show 页面 ———————— onShow 4、事件触发 Page 中的 onShow 页面 ———————— onShow 5、事件触发 Page 中的 onLoad 页面 ———————— onLoad 以上顺序可以看出：小程序在挂载、初始化的时候，是从内到外（从组件到page），在卸载的时候也是从内到外的页面回退时，可以触发 pageLifetimes 的 show，这个特性可用来更新组件用事件触发 Page 的 onShow、onLoad，组件生命周期（lifetimes）、组件中所在页面的生命周期（pageLifetimes）不会被再次调用，所以【Page想通过method调用onShow、onLoad后】与【组件内部做生命周期的联动】是不行滴，要老老实实走组件通信了

欢迎留言哦，一起探索更多~

【本文地址】

公司简介

联系我们