UNI-APP 生命周期执行顺序

最新推荐文章于 2025-04-28 18:38:08 发布
最新推荐文章于 2025-04-28 18:38:08 发布
阅读量823 收藏 3
点赞数 1
分类专栏： 小程序 + uni-app 文章标签： vue.js 小程序 uni-app
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_42695298/article/details/120163143
版权

生命周期

生命周期文档

应用生命周期

App 在App.vue中定义

// 应用初始化完成触发，全局只触发一次，可做登录判断...
onLaunch
// 应用启动的时候，或者从后台进入前台就会触发
onShow
// 应用从前台进入后台就会触发
onHide

页面生命周期

page 在页面中都可以定义

// 监听页面加载，在开始加载的时候触发，元素还未开始渲染 -- 页面只执行一次  tab页面不加载
onLoad
// 监听页面显示，每次页面出现的时候，就会触发这个钩子。
onShow
// 监听页面渲染完成， 如果页面渲染速度快(元素太少)，会在页面翻页动画完成前就触发了 -- 页面只执行一次
onReady
// 监听页面隐藏，每次页面隐藏的时候，就会触发这个钩子。 页面跳转会触发
onHide
// 监听页面卸载 重定向跳转页面会触发
onUnload

组件主要用到的生命周期

component 组件中使用

// 在实例初始化之后被调用
beforeCreate
// 在实例创建完成后被立即调用--调函数
created
// 在挂载开始之前被调用
beforeMount
// 挂载到实例上去之后调用
mounted
// Vue 实例销毁后调用
destroyed

生命周期执行顺序

// 进入应用
App Launch
App Show
page onLoad
page onShow
component beforeCreate
component created
component mounted
page onReady

// 应用后台
App Hide
page onHide

// 应用关闭
page onUnload
component destory

// 后台重新进入
App Show
page onLoad
page onShow
uni-app生命周期
Quentin0823的博客
10-11 2116
组件 components/TestComponent.vue。更多页面生命周期细节，详见。
uni-app页面生命周期（微信小程序）与vue生命周期的执行顺序
id_lutra的博客
10-22 2585
最近接受一个新项目用的uni-app写小程序，自己翻了很多文档，总结一下： uni-app的页面生命周期函数（微信小程序）： onInit 监听页面初始化，为上个页面传递的数据，参数类型为 Object（用于页面传参），触发时机早于 onLoad onLaunch:function(){//当uni-app初始化完成时触发（全局只触发一次） console.log('App onLaunch') } onLoad 监听页面加载，其参数为上个...
uniapp的生命周期顺序
weixin_45977349的博客
01-03 2162
Page页面生命周期函数执行顺序 beforeCreate => onLoad => onShow => created => beforeMount => onReady => mounted 刷新数据后 beforeUpdate => updated 我的例子 代码 // beforeCreate() { console.group('be...
uni-app页面生命周期中，执行顺序
最新发布
qq_45440712的博客
04-28 180
uni-app页面生命周期
uni-app 生命周期函数执行顺序
qq_45067263的博客
05-23 2345
<template> <view ref="ref" class="test-container"> <text>{{message}}</text> <button @click="addMsg">点击</button> </view> </template> <script> import { mapState,
uniapp生命周期及执行顺序
程邓楠的博客
07-29 7195
应用生命周期 函数名 说明 onLaunch 当uni-app初始化完成时触发（全局只触发一次） onShow 当uni-app启动，或从后台进入前台显示 onHide 当uni-app从前台进入后台 注意 应用生命周期仅可在App.vue中监听，在其它页面监听无效。 onlaunch里进行页面跳转，如遇白屏报错，请参考https://ask.dcloud.net.cn/article/35942 页面生命周期 函数名 说明 onIn...
了解uni-app的生命周期（应用，页面生命周期）执行顺序
热门推荐
weixin_42467467的博客
03-27 1万+
应用生命周期 定义在app.vue中 生命周期函数名 说明 onLaunch 当uni-app 初始化完成时触发（全局只触发一次） onShow 当 uni-app 启动，或从后台进入前台显示(多次触发) onHide 当 uni-app 从前台进入后台（多次触发） onUniNViewMessage 对 nvue 页面发送的数据进行监听，可参考 nvue 向 vue ...
在uni-app中使用pdf.js实现在手机上打开pdf
11-04
在uni-app中，可以使用Vue的生命周期钩子函数来处理： ```javascript , height: '100%' }"> import * as PDFJS from '@/static/uni-app-pdf-master/pdf.js' import { getURL } from '@/utils/helper' ...
uni-app页面生命与vue生命周期
nxyhgq的博客
06-27 566
vue生命周期uni-app中的vue的生命周期执行顺序： 支持如下应用生命周期函数：
uni-app如何页面传参数的几种方法总结
11-21
在uni-app中，页面间通信是一个常见的需求，特别是在构建复杂应用时。本文主要讨论的是如何通过uni.$emit()和uni.$on()实现这种通信。这两种方法是uni-app提供的一种全局事件总线机制，允许不同页面之间传递数据和...
uniapp常用生命周期执行顺序
front_endxiaobaia的博客
04-07 8056
主要讨论onLoad，onReady，onShow，beforeCreate，created，beforeMount，mounted七大生命周期。 data () { return { num: 100 } }, onLoad () { console.log('页面onLoad执行:',this.num); }, onReady () { console.log('页面onReady执行:',this.num); }, onShow () {
uniapp 常用生命周期以及执行顺序
Hiroshi's
02-28 1万+
uniapp 生命周期分为应用生命周期，页面生命周期，还有组件生命周期 我们先看一个例子： 这是项目结构，里面的App.vue是我们的App页面，应用的生命周期有onLaunch,onShow和onHide等： // App.vue <script> export default { onLaunch: function() { console.log('App Launch') }, onShow: function() { console.log('App Sh
UniApp 生命周期详解
zzx262625的博客
01-27 2794
UniApp 是一个使用 Vue.js 开发所有前端应用的框架，它可以编译到 iOS、Android、H5、小程序等多个平台。在 UniApp 中，生命周期是指应用或页面从创建到销毁的过程中所经历的一系列阶段。了解生命周期可以帮助开发者更好地管理资源、优化性能和提升用户体验。通过合理地利用 UniApp 的生命周期，开发者可以更有效地管理资源、提高应用的性能和用户体验。在开发过程中，根据实际需求选择合适的事件进行处理，确保应用的稳定性和流畅性。
【uni-app】uniapp页面与组件生命周期介绍
余浩的博客
06-04 2086
uniapp应用开发过程中经常会在不同的时机触发一些事件，这篇文章主要是总结一下uniapp常用的一些生命周期钩子。不同的环境运行可能有差异,下图为微信小程序执行图示。
最全的uniapp生命周期梳理
钱端猿的博客
04-17 5405
页面生命周期是指页面从创建到销毁的整个过程，包括页面的创建、显示、隐藏和销毁等。onInit：监听页面初始化，其参数同 onLoad 参数，为上个页面传递的数据，参数类型为 Object（用于页面传参），触发时机早于 onLoad。onLoad：页面被加载时触发，监听页面加载，该钩子被调用时，响应式数据、计算属性、方法、侦听器、props、slots 已设置完成，其参数为上个页面传递的数据，参数类型为 Object（用于页面传参）可以进行数据初始化和网络请求等操作。
uniapp 组件生命周期 he 页面生命周期
wangongchao的博客
01-28 742
编写uniapp 项目时，组件生命周期用了页面生命周期，不生效，查了下是因为生命周期的问题，特此记录 1.组件生命周期 beforeCreate 实例已经开始初始化之后调用 【数据初始化未完成，页面没有开始渲染】 created 实例创建完成之后调用 【组件创建完成，不代表组件已挂载到页面】 beforeMount 在挂载开始之前被调用。 mounted 挂载到实例上去之后调用。 注意：此处并不能确定子组件被全部挂载，　　　　　　
uni-app中页面生命周期与vue生命周期的执行顺序
hu104160112的博客
04-30 3468
应用生命周期 页面生命周期 组件生命周期 执行顺序 1.beforeCreate 2.onLoad 3.created 4.onShow 5.beforeMount 6.onReady 7.mounted 8.beforeUpdate 9.updated 10.返回上一页时，会执行onUnLoad，并未有执行destroyed，并未执行onHide 11进入下一页时，会执行onHide 这四个的执行顺序是这样的 onLoad>created>onShow>mounted ...
Uniapp生命周期
star_star999的博客
03-16 881
本文讲述的是Uniapp的一些常用生命周期钩子的介绍，是有什么作用，先后顺序，以及一些应用
uniapp 生命周期
weixin_41614525的博客
03-20 389
请注意，onInit 是 UniApp 特有的生命周期钩子，在 Vue 的生命周期之外添加，用于满足页面间数据传递的需求。onInit（UniApp特有）：监听页面初始化，触发时机早于 onLoad，可以在此阶段获取上个页面传递的参数。当页面从前台切换到后台（即用户打开了新的页面或者返回了上一个页面）时触发。当页面被导航至时触发，参数通常包含从其他页面传递的数据。beforeMount：在挂载开始之前被调用，相关的render函数首次被调用。当页面从前台切回或从其他页面跳转过来时触发。当页面被销毁时触发。
uni-app tab切换就加载生命周期
03-04
### uni-app Tab 切换时触发的组件生命周期方法 在uni-app框架中，Tab切换会涉及到页面以及其内部组件的重新渲染和状态管理。具体来说，在Tab切换过程中，页面及其所含有的组件将会经历一系列特定的生命周期钩子函数。 对于页面级别的生命周期而言，当用户通过底部导航栏点击不同的Tab项来实现页面间的转换时，目标页面可能会执行`onLoad`、`onShow`等方法[^2]；而当前离开的页面则可能依次调用`onHide`等相关回调[^1]。需要注意的是，如果只是在同一Tab内的不同页面间跳转，则不会触发应用层面的整体隐藏(`onHide`)与显示(`onShow`)事件，而是仅限于单个页面范围内的展示/隐藏逻辑处理。 至于更细粒度的组件级别生命周期方面： - 当首次加载某个带有Tabs布局结构的页面并初次访问其中某一项标签页对应的视图区域时，该区域内定义好的Vue组件将按照标准顺序依次激活它们各自的前置创建(beforeCreate)、已创建(created)、预挂载(beforeMount)直至最终完成挂载(mounted)等一系列初期化阶段的方法； - 如果是在已经存在缓存的情况下再次回到同一个Tab位置的话（即非第一次进入），那么此时并不会重复走一遍完整的初始化流程，而是直接从`activated`这个特殊的生命周期钩子切入，表示此组件由不可见变为可见的状态恢复过程已经开始发生[^4]；相反地，一旦因切换至其他Tab而导致本组件暂时失去焦点变得不可见的时候，则会先经过`deactivated`这一步骤作为过渡，意味着即将进入到暂停活动模式下等待下次唤醒的机会到来。 ```javascript export default { data() { return {}; }, activated() { // 只有keep-alive包裹下的组件才会触发 console.log('Component is reactivated'); }, deactivated() { // 同样适用于keep-alive场景中的组件 console.log('Component has been deactivated'); } } ``` 为了确保良好的用户体验及性能优化考虑，开发者可以利用上述提到的各种时机来进行必要的资源分配调整或是界面刷新操作等工作。例如可以在`activated`里拉取最新的数据列表用于即时呈现给用户查看；而在`deactivated`处释放不再使用的图片对象以节省内存空间等等。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值