小程序组件的生命周期

news2025/1/21 9:37:27

组件生命周期

组件的生命周期,指的是组件自身的一些函数,这些函数在特殊的时间点或遇到一些特殊的框架事件时被自动触发。
其中,最重要的生命周期是 created attached detached ,包含一个组件实例生命流程的最主要时间点。
         ·组件实例刚刚被创建好时, created 生命周期被触发。此时,组件数据 this.data 就是在 Component 构造器中定义的数据 data 。 此时还不能调用 setData 。 通常情况下,这个生命周期只应该用于给组件 this 添加一些自定义属性字段。
在组件完全初始化完毕、进入页面节点树后, attached 生命周期被触发。此时, this.data 已被初始化为组件的当前值。这个生命周期很有用,绝大多数初始化工作可以在这个时机进行。
         ·在组件离开页面节点树后, detached 生命周期被触发。退出一个页面时,如果组件还在页面节点树中,则 detached 会被触发。
微信官方文档地址:组件生命周期 | 微信开放文档
代码示例:

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

1、created:在组件实例刚刚被创建时执行,在这个阶段由于组件刚刚被创建,this.setData这些函数是不会生效的,在这个生命周期内,我们只可以获取一些基本的值以及数据上的做处理,跟页面渲染相关的内容不能在这个生命周期实现;

2、attached:组件初始化完毕并且挂载到页面上之后触发,如果熟悉vue的话,和vue的mounted比较像,这个阶段才是我们一般做初始化的阶段,并且在这个阶段data也被初始化为组件的值;

3、detached:在组件实例被从页面节点树移除时执行,简单的说,就是这个 **组件被销毁 **的时候会被执行,这个使用的还是非常频繁的

4、ready:在组件在视图层布局完成后执行,简单的说,就是组件被挂载到页面上,并且页面渲染完毕后触发;这个生命周期我们一般处理一些跟视图操作相关的内容;

5、moved:在组件实例被移动到节点树另一个位置时执行

组件所在页面的生命周期

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

 

注意:自定义 tabBar 的 pageLifetime 不会触发。

代码示例:

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

整体周期

(1)打开页面

首先,前一个页面隐藏,在加载下一个页面之前,需要先初始化新页面的组件。页面首次渲染之后,会触发组件的ready,最后触发的是页面的onReady,如下图:

从PageA打开pageB时的生命周期顺序

 (2)离开页面

离开当前页面时,首先触发当前页面的卸载onUnload,接着是组件离开节点树的detached。最后显示之前的页面,触发onShow。如下图:

从PageB返回到PageA的生命周期顺序

 (3)打开小程序

小程序、Page与Component生命周期运行顺序,先从小程序加载然后再加载Page,在加载Page之前会先初始化该页面所用的所有组件,之后才触发页面的onLoad生命周期,如下图:

打开小程序时的生命周期顺序

 

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/414355.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

(链表专题) 83. 删除排序链表中的重复元素 ——【Leetcode每日一题】

83. 删除排序链表中的重复元素 给定一个已排序的链表的头 head &#xff0c; 删除所有重复的元素&#xff0c;使每个元素只出现一次 。返回 已排序的链表 。 示例 1&#xff1a; 输入&#xff1a;head [1,1,2] 输出&#xff1a;[1,2] 示例 2&#xff1a; 输入&#xff1a;he…

在线Plist文件格式转Json文件格式

Plist文件是一种用于存储应用程序配置信息的文件格式&#xff0c;其中包含应用程序的各种设置和数据。在过去&#xff0c;Plist文件通常是以 .plist 格式存储的。然而&#xff0c;随着时间的推移&#xff0c;人们开始使用 JSON 格式来存储更复杂的数据结构和数据。如果您需要将…

浏览器便携化操作方法

直接进入主题 如果我们不想把 Chrome 安装进 C 盘&#xff0c;又或者想测试多配置&#xff0c;那么浏览器的便携化就非常重要了。 浏览器便携化的方法有很多&#xff0c;国内常用的有两种。 1、MyChrome MyChrome 最早由网友“甲壳虫”开发&#xff0c;除了浏览器便携化&a…

Linux0.11 进程切换(十)

系列文章目录 Linux 0.11启动过程分析&#xff08;一&#xff09; Linux 0.11 fork 函数&#xff08;二&#xff09; Linux0.11 缺页处理&#xff08;三&#xff09; Linux0.11 根文件系统挂载&#xff08;四&#xff09; Linux0.11 文件打开open函数&#xff08;五&#xff09…

AI 写文献回顾,好使吗?

&#xff08;注&#xff1a;本文为小报童精选文章&#xff0c;已订阅小报童或加入知识星球「玉树芝兰」用户请勿重复付费&#xff09;作为一个大学老师&#xff0c;我平时少不了指导学生写论文。选题阶段很重要的工作&#xff0c;就是文献回顾。文献回顾的目的&#xff0c;是要…

jsp企业职工考勤管理系统myeclipse定制开发sqlserver数据库网页模式java编程jdbc

一、源码特点 jsp企业职工考勤管理系统 是一套完善的web设计系统&#xff0c;对理解JSP java编程开发语言有帮助&#xff0c;系统具有完整的源代码和数据库&#xff0c;系统主要采用B/S模式开发。 jsp企业职工考勤管理系统myeclipse定制开发sqls二、功能介绍 此次系统主要在JS…

Java集合框架概述

java中的集合分为单列集合(Collection)和双列集合(Map)&#xff0c;都在java.util包下&#xff0c;所有的集合框架都分为三大块内容&#xff1a;对外的接口、接口的实现、集合中的算法&#xff0c; 接口&#xff1a;代表集合的抽象数据类型&#xff0c;Collection(List、Set)、…

使用向量机(SVM)算法的推荐系统部署实现

包括3个模块&#xff1a;数据预处理、模型训练及保存、模型测试&#xff0c;下面分别给出各模块的功能介绍及相关代码。 数据集下载链接为https://www.aitechclub.com/data-detail? data_id29&#xff0c;停用词典下载链接为http://www.datasoldier.net/archives/636。 1.数…

Python进阶内容--迭代器和生成器

什么是迭代器 在 Python 中&#xff0c;迭代器&#xff08;Iterator&#xff09;是一个访问集合元素的对象&#xff0c;它能够实现遍历集合的所有元素&#xff0c;而无需了解集合底层结构和细节。Python 中所有可迭代的对象&#xff08;如 列表、元组、字符串、字典、集合等&a…

NumPy 基础知识 :1~5

原文&#xff1a;Numpy Essentials 协议&#xff1a;CC BY-NC-SA 4.0 译者&#xff1a;飞龙 一、NumPy 简介 “我宁愿使用通用语言进行数学运算&#xff0c;也不愿尝试使用数学语言进行通用编程。” – John D Cook 在过去的十年中&#xff0c;Python 已成为科学计算中最受欢迎…

(C语言版)力扣(LeetCode)面试题 17.04. 消失的数字5种解法

消失的数字题目介绍第一种解法&#xff1a;按位异或第二种解法&#xff1a;公式运算第三种解法&#xff1a;临时数组第四种解法&#xff1a;相加再相减第五种解法&#xff1a;快排加二分查找结语题目介绍 该题目取自力扣&#xff08;LeetCode&#xff09;面试题 17.04. 消失的…

Direct3D 12——灯光——光照模型的概述

将之前所述的所有光照内容都结合起来&#xff0c;即表面反射的光量相当于环境反射光、漫反射光以及 镜面反射光的光量总和。 1.环境光Ca&#xff1a;模拟经表面反射的间接光量。 2.漫反射光Cd&#xff1a;对进入介质内部&#xff0c;又经过表面下吸收而最终散射岀表面的光进行…

盐边县高堰沟灌区综合信息化管理系统及平台建设-案例分享

项目背景 盐边县南部降雨逐年减少&#xff0c;可用水源有限&#xff0c;部分村庄的水源取自仅20亩的山坪塘&#xff0c;常常因降雨量小而蓄不满水&#xff0c;出现“人争水、地缺水”的现象&#xff0c;且支渠及以下渠系基本为土渠&#xff0c;渗漏损失严重。为解决不同程度的工…

解决魔兽世界wow中鼠标莫名其妙消失或自动跳回屏幕中间等类似问题整理

魔兽世界已经离开中国大陆~~&#xff0c;最近在玩xxx&#xff0c;咳咳&#xff0c;突然发现一个远古问题&#xff0c;一直以为是自己的鼠标问题&#xff0c;但这么多年换了这么多台电脑&#xff0c;这个问题也一直存在&#xff0c;今天突发奇想查了一下&#xff0c;结果竟然有答…

能聊天、会学习,远不是GPT的终局

自然语言处理&#xff08;NLP&#xff09;技术的发展和运用&#xff0c;使得计算机性能增长速度一举跃过摩尔定律瓶颈&#xff0c;将AI拱入属于它的高光时代。而象征技术融合的ChatGPT一夜爆红&#xff0c;仿佛给整个商业社会带来了一次“技术革命”。 微软、谷歌、百度、华为…

C++ 23 实用工具(二)绑定工具

C 23 实用工具&#xff08;二&#xff09;绑定工具 Adaptors for Functions std::bind、std::bind_front、std::bind_back和std::function这四个函数非常适合一起使用。 其中&#xff0c;std::bind、std::bind_front和std::bind_back可以让您即时创建新的函数对象&#xff0c…

一文! 解决镜像法,电轴法在电磁场中的应用

目录 镜像法原理 例题 模型一&#xff1a;无限大导体平面 一些理解 模型二&#xff1a;球面镜像 情况一&#xff1a;球壳接地 同样的几点思考&#xff1a; 情况二&#xff1a;球壳不接地 球壳不接地&#xff0c;但是点电荷放置在内部 镜像法在双层介质中的作用 电轴法…

C++017-C++指针及其应用

文章目录C017-C指针及其应用C指针及其应用CSP-J目标1. 指针1.指针变量的定义、赋值2.指针的引用与运算2. 基于指针的数组访问3. 指针与字符串4. 结构体与指针在练习&#xff1a;总结C017-C指针及其应用 在线练习&#xff1a; http://noi.openjudge.cn/ https://www.luogu.com.c…

设计师都在用的6个免费设计素材网站~

本期给大家推荐几个设计师都在用的素材网站&#xff0c;免费下载&#xff0c;赶紧收藏起来吧~ 1、菜鸟图库 https://www.sucai999.com/?vNTYwNDUx 菜鸟图库是我推荐过很多次的网站&#xff0c;主要是站内素材多&#xff0c;像平面、UI、电商等设计素材都能找到&#xff0c;还…

零售数据可视化|人、货、场、供、财报表分享

有没有零售数据可视化的例子&#xff0c;让大家看看BI零售数据可视化的效果&#xff1f;有&#xff0c;奥威BI零售标准方案提供了数十张BI数据可视化报表&#xff0c;覆盖人、货、场、供、财等核心业务&#xff0c;既可以让大家一次性体验零售数据可视化报表效果&#xff0c;也…