uniapp 微信小程序:页面+组件的生命周期顺序

uniapp 微信小程序:页面+组件的生命周期顺序

  • 首页
  • 页面
  • 父组件
  • 子组件
  • 完整顺序
  • 参考资料

这个uniapp的微信小程序项目使用的是 VUE2

首页

首页只提供了一个跳转按钮。

<template><view><navigator url="/pages/myPage/myPage?name=jerry" hover-class="navigator-hover"><button type="default">跳转到新页面</button></navigator></view>
</template><script>export default {data() {return { }},}
</script><style>
</style>

页面

<template><view> 页面 <parent-component>parent-component</parent-component> </view>
</template><script>export default {data() {return { }},onInit(option){console.log(`页面 onInit: ${JSON.stringify(option)}`)},onLoad(option){console.log(`页面 onLoad: ${JSON.stringify(option)}`)},onShow(option){console.log(`页面 onShow: ${JSON.stringify(option)}`)},onReady(option){console.log(`页面 onReady: ${JSON.stringify(option)}`)},onHide(option){console.log(`页面 onHide: ${JSON.stringify(option)}`)},onUnload(option){console.log(`页面 onUnload: ${JSON.stringify(option)}`)},onResize(option){console.log(`页面 onResize: ${JSON.stringify(option)}`)},onPullDownRefresh(option){console.log(`页面 onPullDownRefresh: ${JSON.stringify(option)}`)},onReachBottom(option){console.log(`页面 onReachBottom: ${JSON.stringify(option)}`)},onTabItemTap(option){console.log(`页面 onTabItemTap: ${JSON.stringify(option)}`)},onShareAppMessage(option){console.log(`页面 onShareAppMessage: ${JSON.stringify(option)}`)},onPageScroll(option){console.log(`页面 onPageScroll: ${JSON.stringify(option)}`)},onShareTimeline(option){console.log(`页面 onShareTimeline: ${JSON.stringify(option)}`)},onAddToFavorites(option){console.log(`页面 onAddToFavorites: ${JSON.stringify(option)}`)},}
</script><style>
</style>

父组件

<template><view> 父组件 <child-component>child-component</child-component> </view>
</template><script>export default {data() {return {};},beforeCreate(option){console.log(`父组件 beforeCreate: ${option}`)},created(option){console.log(`父组件 created: ${option}`)},beforeMount(option){console.log(`父组件 beforeMount: ${option}`)},mounted(option){console.log(`父组件 mounted: ${option}`)},beforeDestroy(option){console.log(`父组件 beforeDestroy: ${option}`)},destroyed(option){console.log(`父组件 destroyed: ${option}`)},}
</script><style>
</style>

子组件

<template><view> 子组件 </view>
</template><script>export default {data() {return {};},beforeCreate(option){console.log(`子组件 beforeCreate: ${option}`)},created(option){console.log(`子组件 created: ${option}`)},beforeMount(option){console.log(`子组件 beforeMount: ${option}`)},mounted(option){console.log(`子组件 mounted: ${option}`)},beforeDestroy(option){console.log(`子组件 beforeDestroy: ${option}`)},destroyed(option){console.log(`子组件 destroyed: ${option}`)},}
</script><style>
</style>

完整顺序

在这里插入图片描述

// 进入
父组件 beforeCreate: undefined
父组件 created: undefined
父组件 beforeMount: undefined
子组件 beforeCreate: undefined
子组件 created: undefined
子组件 beforeMount: undefined
页面 onLoad: {"name":"jerry"}
页面 onShow: undefined
子组件 mounted: undefined
父组件 mounted: undefined
页面 onReady: undefined// 退出
页面 onUnload: undefined
子组件 beforeDestroy: undefined
子组件 destroyed: undefined
父组件 beforeDestroy: undefined
父组件 destroyed: undefined

参考资料

uniap 页面生命周期
uniapp 组件生命周期

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

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

相关文章

【React】精选5题

第1题&#xff1a;简述下 React 的生命周期&#xff1f;每个生命周期都做了什么&#xff1f; React 组件的生命周期可以分为三个阶段&#xff1a;挂载阶段、更新阶段和卸载阶段。每个生命周期方法都有特定的目的和功能。 挂载阶段&#xff1a; constructor&#xff1a;组件的构…

6个高清图片素材网站,免费下载,值得推荐~

关于图片素材网站&#xff0c;我一直都在推荐这几个&#xff0c;免费下载&#xff0c;可商用&#xff0c;建议收藏起来~ 菜鸟图库 https://www.sucai999.com/pic.html?vNTYwNDUx 网站主要是为新手设计师提供免费素材的&#xff0c;素材的质量都很高&#xff0c;类别也很多&a…

Git移除commit过的大文件

前言&#xff1a;在提交推送本地更改至仓库时&#xff0c;误将大文件给提交了&#xff0c;导致push时报错文件过大&#xff0c;因此需要将已经commit的大文件移除后再push 若已知要删除的文件或文件夹路径&#xff0c;则可以从第4步开始 1.对仓库进行gc操作 $ git gc 2.查询…

23款奔驰S400豪华型升级后排电动腿托系统,提升后排乘坐舒适性

奔驰S400L后排座椅是不带腿托和脚托的&#xff0c;也没有一键躺平功能&#xff0c;相对于奔驰S级高配车型上配置的右边老板位座椅&#xff0c;舒适性就差强了一些。

【基于Spark的电影推荐系统】环境准备

概览 本科毕设做过电影推荐系统&#xff0c;但当时的推荐算法只有一个&#xff0c;现在已经忘记大部分了&#xff0c;当时也没有记录&#xff0c;因此写这个博客重新来记录一下。此外&#xff0c;技术栈由于快秋招原因来不及做过多的部分&#xff0c;因此只实现简单的功能&…

从零开始 Spring Cloud 7:Gateway

从零开始 Spring Cloud 7&#xff1a;Gateway 图源&#xff1a;laiketui.com Spring Cloud Gateway 是 Spring Cloud 的一个全新项目&#xff0c;该项目是基于 Spring 5.0&#xff0c;Spring Boot 2.0 和 Project Reactor 等响应式编程和事件流技术开发的网关&#xff0c;它旨…

ICC2删除所有电源的方法

我正在「拾陆楼」和朋友们讨论有趣的话题&#xff0c;你⼀起来吧&#xff1f;知识星球入口 remove_pg_patterns -all remove_pg_strategies -all remove_pg_strategy_via_rules -all remove_pg_via_master_rules -all remove_pg_regions -all remove_routes -net_types {p…

网安周报 | 银行业成为开源软件供应链攻击的目标

网安周报是棱镜七彩推出的安全资讯专栏&#xff0c;旨在通过展示一周内发生的与开源安全、软件供应链安全相关攻击事件&#xff0c;让用户了解开源及软件供应链威胁&#xff0c;提高对安全的重视&#xff0c;做好防御措施。 1、银行业成为开源软件供应链攻击的目标 网络安全研…

微服务入门---SpringCloud(二)

微服务入门---SpringCloud&#xff08;二&#xff09; 1.Nacos配置管理1.1.统一配置管理1.1.1.在nacos中添加配置文件1.1.2.从微服务拉取配置 1.2.配置热更新1.2.1.方式一1.2.2.方式二 1.3.配置共享1&#xff09;添加一个环境共享配置2&#xff09;在user-service中读取共享配置…

vue2+wangEditor5富文本编辑器(图片视频自定义上传七牛云/服务器)

1、安装使用 安装 yarn add wangeditor/editor # 或者 npm install wangeditor/editor --save yarn add wangeditor/editor-for-vue # 或者 npm install wangeditor/editor-for-vue --save在main.js中引入样式 import wangeditor/editor/dist/css/style.css在使用编辑器的页…

Android 截图功能实现

Android 截图功能实现 简介效果图功能实现1. 截取当前可见范围屏幕2. 截取当前可见范围屏幕&#xff08;不包含状态栏&#xff09;3. 截取某个控件4. 截取ScrollView5. 长截图6. 截屏动画效果7. 显示截屏结果&#xff0c;自动消失6. 完整代码 简介 在Android应用中开发截图功能…

顺序表的实现

文章目录 1.概念及结构 2.接口实现 3.数组相关oj题 4.顺序表的问题及思考 文章内容 1.概念及结构 线性表&#xff08;linear list&#xff09;是n个具有相同特性的数据元素的有限序列。 线性表是一种在实际中广泛使 用的数据结构&#xff0c;常见的线性表&#xff1a;顺序…

【物理】模拟粒子在电场和磁场中的轨迹研究(Matlab代码实现)

目录 &#x1f4a5;1 概述 &#x1f4da;2 运行结果 &#x1f389;3 参考文献 &#x1f308;4 Matlab代码实现 &#x1f4a5;1 概述 模拟粒子在电场和磁场中的轨迹研究是物理学中的一个重要研究领域&#xff0c;涉及到电磁场、粒子运动、轨迹分析等多个方面。在这个研究中&…

Python爬虫实例之淘宝商品页面爬取(api接口)

可以使用Python中的requests和BeautifulSoup库来进行网页爬取和数据提取。以下是一个简单的示例&#xff1a; import requests from bs4 import BeautifulSoupdef get_product_data(url):# 发送GET请求&#xff0c;获取网页内容headers {User-Agent: Mozilla/5.0 (Windows NT…

【Spring框架】Spring读取与存储综合练习

练习 在 Spring 项⽬中&#xff0c;通过 main ⽅法获取到 Controller 类&#xff0c;调⽤ Controller ⾥⾯通过注⼊的⽅式调⽤ Service 类&#xff0c;Service 再通过注⼊的⽅式获取到 Repository 类&#xff0c;Repository 类⾥⾯有⼀个⽅法构建⼀个 User 对象&#xff0c;返…

抖音账号矩阵系统开发源码

一、技术自研框架开发背景&#xff1a; 抖音账号矩阵系统是一种基于数据分析和管理的全新平台&#xff0c;能够帮助用户更好地管理、扩展和营销抖音账号。 部分源码分享&#xff1a; ic function indexAction() { //面包屑 $breadcrumbs [ [tit…

虚拟机 RHEL8 安装 MySQL 8.0.34

目录 安装步骤一、清除所有残留的旧MySQL二、安装MySQL 报错问题1. 提示未找到匹配的参数&#xff1a; mysql-community-server2. 公钥问题 安装步骤 一、清除所有残留的旧MySQL 1. 关闭MySQL [rootlocalhost /]# service mysqld stop Redirecting to /bin/systemctl stop …

【导入外部jar包到maven项目中--亲测可行】

若项目为springweb项目&#xff0c;则先将jar放到WEB-INF/lib 目录下选中对应的jar包&#xff0c;右键选项 add-lirrary &#xff1b;成功加入之后的jar包是一个项目的目录结构&#xff1a; 至此&#xff0c;项目能够正常运行&#xff0c;在代码周也能够进行导包 转折点&…

一文谈谈Git

"And if forever lasts till now Alright" 为什么要有git&#xff1f; 想象一下&#xff0c;现如今你的老师同时叫你和张三&#xff0c;各自写一份下半年的学习计划交给他。 可是你的老师是一个极其"较真"的人&#xff0c;发现你俩写的学习计划太"水&…

QT:当登录成功时,关闭登录界面,跳转到新的界面中

1> 继续完善登录框&#xff0c;当登录成功时&#xff0c;关闭登录界面&#xff0c;跳转到新的界面中 widget.h #include "widget.h" //#include "ui_widget.h"Widget::Widget(QWidget *parent): QWidget(parent)//, ui(new Ui::Widget) {//ui->setu…