uniapp中组件生命周期函数

已于 2024-09-04 09:30:35 修改
阅读量523 收藏 5
点赞数 3
分类专栏： uniapp vue3 文章标签： uni-app java 服务器
于 2024-09-03 19:32:34 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/MuYuZiBuYan/article/details/141866922
版权

onLoad

        监听页面加载，该钩子被调用时，响应式数据、计算属性、方法、侦听器、props、slots 已设置完成，其参数为上个页面传递的数据，参数类型为 Object(用于页面传参）

1.引入onLoad

        onLoad是在页面加载是执行，打开页面上我们在控制台可以看见张三

2.onLoad回调函数

         在demo6页面创建一个跳转标签并且添加参数

        在demo7中接收参数并输出 

效果图

注意的是 scroll 在 onLoad 是拿不到值的

 效果图

onReady

在上方 scroll 在 onLoad 是拿不到值的所以我们提供了onReady，onReady是等onReady渲染完毕之后才开始执行

效果图

onShow

        当离开当前页面之后在返回当前页面就回触发onShow

        示例

在demo7中定义一个跳转页面链接

 启动页面

当页面跳转之后点击返回按钮 ，注意是返回而不是跳转

 当返回之后就会执行onShow

onShow在离开选项卡返回时也会触发 

当前页面选项卡运行结果

当 离开了当前选项卡

当返回选择卡时onShow执行

        

                

        onShow执行顺序

onHide

     onHide与onShow类似。当离开当前页面之后在返回当前页面就回触发onShow，而onHide是离开当前页面时触发

当页面启动时并没有onHide

当离开时触发onHide

应用生命周期 

        onLaunch 与 onLoad 类似都是进入时触发

        应用的生命周期要优先于页面生命周期

不包含组件的页面

onLoad > onShow > onReady

包含组件的页面

onLoad > onShow > onBeforeMount > onReady > onMounted

木与子不厌
关注
专栏目录
uni-app（15）— uni-app中组件的创建以及组件的生命周期函数
tiffany_kim的博客
05-14 1507
此文为uni-app 总结笔记（15）— uni-app中组件的创建以及组件的生命周期函数 uni-app中组件的创建 在uni-app中，可以通过创建一个后缀名为vue的文件，即创建一个组件成功，其他组件可以将该组件通过impot的方式导入，在通过components进行注册即可 创建test组件，在component中创建test目录，然后新建test.vue文件 <template> <view> 这是test组件 </view> </temp
uni-app中创建组件以及组件中生命周期函数
实践求真知
09-10 2683
一点睛 在uni-app中，可以通过创建一个后缀名为vue的文件，即创建一个组件成功，其他组件可以将该组件通过import的方式导入，再通过components进行注册即可。 二代码 1创建test.vue组件 <template> <view id="myview"> 这是test组件{{num}} </view> </template> <script> export default { data() { ...
UniApp `onShow` 和 `onLoad` 区别以及执行顺序
我们好像在哪见过 私
07-01 8141
生命周期钩子函数在页面加载时触发，表示页面的初始化过程。是在页面展示时触发，用于处理页面显示相关的逻辑，可能会多次执行，包括页面首次展示和从后台切换到前台时。生命周期钩子函数在页面展示时触发，表示页面被显示到前台。在该函数中，可以处理页面显示相关的逻辑，例如刷新数据、更新UI等。函数可能会多次执行，因为页面在切换后台和前台之间多次切换时都会触发。当页面再次被切换到后台，然后再次切换到前台时，会再次触发。是在页面加载时触发，用于页面的初始化操作，只执行一次。页面初始化完成后，页面会被展示到前台，此时会触发。
uni-app组件 子组件onLoad、onReady事件无效
肥晨开发的学习之路
07-05 1010
最终将onLoad，onReady换成mounted/created 替代解决了问题。欢迎关注我获取前端学习资源，日常分享技术变革，生存法则；行业内幕，洞察先机。在uni-app的组件中可以直接使用Vue的生命周期函数对逻辑进行处理。突然发现在项目中，组件 子组件的onLoad、onReady事件无效。打印也出不来值 怎么处理呢？
uni-app组件与生命周期
最新发布
2301_80735340的博客
07-21 1041
在demo1和demo2中调用这个组件，此时，demo1和demo2的页面是一摸一样的。尝试分别定义这两个页面，组件中有三个区域header、main、footer，我们要定义中间的main，就在main内放入一个标签，然后就可以去demo1和demo2的组件标签中定义，下面是demo1的代码，在组件标签内填写任意内容；接下来，尝试传递对象给组件：首先，要在组件中设置defineProps接受obj，并在template中渲染，然后在页面中script区域定义对象，并在template中调用。
uni-app生命周期
qq_33864480的博客
04-02 684
组件内（页面除外）不支持 onLoad、onShow 等页面生命周期 应用生命周期 uni-app 支持如下应用生命周期函数： 函数名 说明 onLaunch 当uni-app 初始化完成时触发（全局只触发一次） onShow 当 uni-app 启动，或从后台进入前台显示 onHide 当 uni-app 从前台进入后台 onError 当 uni-app 报错时触发...
uniapp - 组件的创建使用和组件的生命周期函数
技术共享，共同进步！
10-13 648
组件的创建使用和组件的生命周期函数一. 组件的创建使用二. 组件的生命周期函数 更多组件使用请查看 uniapp 官网：https://uniapp.dcloud.io/use?id=%e7%bb%84%e4%bb%b6 一. 组件的创建使用 在uni-app中，可以通过创建一个后缀名为 vue 的文件，即创建一个组件成功，其他组件可以将该组件通过 impot 的方式导入，在通过 components 进行注册即可。 新建一个 test 组件<template> <view>
一文教你搞懂uniapp（生命周期和组件）
Mangcun_tutu的博客
01-17 1866
在 uni-app 中，可以通过创建一个后缀名为 vue 的文件，即创建一个组件成功，其他组件可以将该组件通过 impot 的方式导。创建 login 组件，在 component 中创建 login 目录，然后新建 login.vue 文件。需要注意的是：在小程序中网络相关的 API 在使用前需要配置域名白名单。在 uni 中可以调用 uni.request 方法进行请求网络请求。通过 props 来接受外界传递到组件内部的值。其他组件在使用 login 组件的时候传递值。在其他组件中导入该组件并注册。
Uni-app中的生命周期
qq_53694927的博客
10-31 1万+
Uni-app中的生命周期
【填坑排错系列_uniapp篇】uniapp与vue中的生命周期函数
JC的博客
08-07 3659
vue的所有生命周期函数在uniapp中都可以使用     最近在调试基于uniapp开发的应用，发现一段请求js文件的代码在onLoad中没有反应，但在onShow、mounted等生命周期中有反应，所以写了个demo了解一下vue部分和uniapp页面部分生命周期函数的执行顺序，测试结果如下： 测试包含的uniapp生命周期函数：onLoad onSh...
uniapp组件生命周期函数
09-07
在Uniapp中，组件的生命周期函数包括created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy和destroyed共计7个生命周期函数。这些函数会在组件的不同阶段被触发，开发者可以在这些函数中执行相应的...
uniapp子组件生命周期
05-20
Uniapp 子组件的生命周期包括 `beforeCreate`、`created`、`beforeMount`、`mounted`、`beforeUpdate`、`updated`、`beforeDestroy` 和 `destroyed`。 具体解释如下： 1. `beforeCreate`：在实例初始化之后，数据...
最全的uniapp生命周期梳理
钱端猿的博客
04-17 3187
页面生命周期是指页面从创建到销毁的整个过程，包括页面的创建、显示、隐藏和销毁等。onInit：监听页面初始化，其参数同 onLoad 参数，为上个页面传递的数据，参数类型为 Object（用于页面传参），触发时机早于 onLoad。onLoad：页面被加载时触发，监听页面加载，该钩子被调用时，响应式数据、计算属性、方法、侦听器、props、slots 已设置完成，其参数为上个页面传递的数据，参数类型为 Object（用于页面传参）可以进行数据初始化和网络请求等操作。
uni-app中的应用生命周期，页面生命周期，组件生命周期
weixin_50240716的博客
02-08 6577
一、应用生命周期（写在app.vue中） onLaunch：当整个项目启动，渲染完成时触发（全局只触发一次） onShow：小程序显示出来（从后台进入前台显示，可以触发多次） onHide：小程序隐藏起来时触发（从前台进入后台，可以触发多次） onError: 出现异常时触发 二、页面生命周期 onLoad 监听页面加载，其参数为上个页面传递的数据，参数类型为 Object（用于页面传参） onShow 监听页面显示。页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面 onReady 监听页
uni-app组件生命周期
热门推荐
weixin_45966674的博客
12-23 1万+
其实学过vue和小程序的人再来看uni-app真的会非常简单 其实他就是两种语法的融合 uni-app新增了整个应用程序的生命周期 延用了小程序组件和单页面都有自己不同的生命周期的做法 但有延用了 vue 单个vue文件即为一个组件 也可以是单独页面的特性 页面生命周期更像是小程序的生命周期写法 而组件的生命周期则更像vue2的生命周期函数 小看单页面生命周期的可以阅读我之前的文章 https://blog.csdn.net/weixin_45966674/article/details/12166
uni-app 生命周期
猫老板的豆
05-14 3695
uni-app 组件支持的生命周期，与vue标准组件的生命周期相同。这里没有页面级的onLoad等生命周期函数名说明平台差异在实例初始化之前被调用created在实例创建完成后被立即调用在挂载开始之前被调用mounted挂载到实例上去之后调用。详见 注意：此处并不能确定子组件被全部挂载，如果需要子组件完全挂载之后在执行操作可以使用$nextTick数据更新时调用，发生在虚拟 DOM 打补丁之前仅H5平台支持updated由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。
uniapp的生命周期
qq_52301431的博客
12-19 7543
创建 初始化 挂载 销毁。
uniapp：组件生命周期
倚树探星的博客
07-12 484
生命周期钩子 动作 beforeCreate() 实例初始化完成之后调用。此时<script>的data中的数据为undefined，尚未完成初始化，页面也尚未开始渲染 create() 实例创建完成之后调用。此时<script>的data中的数据完成初始化，可以拿到数据，表明能够对数据进行操作（数据的初始化） beforeMount() 实例挂载之前调用。页面尚未渲染 mounted() 实例挂载之后调用（不能确定子组件全部挂载）。页面完成渲染，表明此时...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值