uniapp学习（004-2 组件 Part.2生命周期）

已于 2024-10-14 14:42:09 修改
阅读量1.2k 收藏 28
点赞数 36
分类专栏： uniapp 文章标签： uni-app 学习 微信小程序 小程序 前端 vue 前端框架
于 2024-10-10 18:05:41 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wang_book/article/details/142823225
版权

零基础入门uniapp Vue3组合式API版本到咸虾米壁纸项目实战，开发打包微信小程序、抖音小程序、H5、安卓APP客户端等

总时长 23:40:00 共116P

此文章包含第31p-第p35的内容

文章目录

组件生命周期

在这里插入图片描述

在这里插入图片描述
小程序分应用生命周期，组件生命周期，页面生命周期
在这里插入图片描述

这里详见
uniappVue3版本中组件生命周期和页面生命周期的详细介绍

在这里插入图片描述

在这里插入图片描述

引用上方的链接的图片
在这里插入图片描述
在这里插入图片描述

vue3官方页面的查看方法
在这里插入图片描述

我们主要使用的三种生命周期

这里我们主要使用三种生命周期:setup(创建组件时运行)、onMounted(挂载到dom时运行) 、onUnmounted(销毁时)

setup(创建组件时执行)

不可以操作dom节点

在标签里添加 ref=“节点名”
在script里定义 这个节点 = ref(null); 这时候因为在setup生命周期里，我们无法得到dom

在这里插入图片描述
值为null
在这里插入图片描述

onMounted(挂载到dom时执行)

可以操作dom节点

在标签里添加 ref=“节点名”
在script里定义 这个节点 = ref(null); 这时候因为在setup生命周期里，我们无法得到dom

代表虚拟dom变成真实dom了之后执行
在这里插入图片描述
值为dom元素
在这里插入图片描述

在这里插入图片描述

ps:这个REF和vue3还不一样，vue3里的是dom,uniapp是proxy

onUnmounted(销毁前执行)

我们定义一个子组件，并且设置一个onUnmounted，在父组件上引用
在这里插入图片描述

我们设置一个定时器 2秒后v-if=false 销毁这个子组件
在这里插入图片描述
一开始
在这里插入图片描述

两秒后
在这里插入图片描述

defineExpose 父组件直接获取子组件的数据

翻译:
define 英[dɪˈfaɪn] 美[dɪˈfaɪn] 定义
expose 英[ɪkˈspəʊz] 美[ɪkˈspoʊz] 暴露

子组件
在这里插入图片描述

暴露对象

使用defineExpose 把子组件的count向外导出
名字一样可以简写，{count:count}可以简写成{count}
在这里插入图片描述

在父页面调用
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

暴露方法

在这里插入图片描述

调用子组件暴露的++方法，修改子组件的值

在这里插入图片描述
初始样式 在这里插入图片描述
点击后
在这里插入图片描述

vue查看api

在这里插入图片描述

在这里插入图片描述

页面生命周期

在这里插入图片描述

onload

onload生命周期位置（beforeCreate之前）
主要作用就是接收url上的参数

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

写一个跳转url

在这里插入图片描述

这里可以得到页面的url参数
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

onReady

类似组件生命周期里的onMounted
在这里插入图片描述
在dom上定义
在这里插入图片描述
在这里插入图片描述

onShow和onHide

onShow

在这里插入图片描述

离开页面后，在另一个页面点击返回箭头的时候触发onShow
在这里插入图片描述
在这里插入图片描述

onHide

在这里插入图片描述
当我们离开页面的时候触发

例子

写一个计数器，每50毫秒加一
在这里插入图片描述
在这里插入图片描述

离开页面的时候停止计数器
在这里插入图片描述

回归页面的时候开始计数器
在这里插入图片描述

App.vue里也有生命周期（应用的生命周期）

在这里插入图片描述

这里的onLaunch可以判断有无登录信息等
这里的onShow onHide是整个应用进入和离开的时候调用

执行顺序

进入时顺序
在这里插入图片描述

离开时顺序
在这里插入图片描述
不用的时候可以去掉日志打印
在这里插入图片描述

onUnload

在这里插入图片描述

使用navigator跳转并且销毁之前的页面的时候触发
销毁使用 open-type=“reLaunch”
在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述
跳转到demo4的时候调用了onUnload
在这里插入图片描述
可以对一些缓存信息进行清理
在这里插入图片描述

onPageScroll 监听页面的滚动

在这里插入图片描述
在这里插入图片描述
滚动时
在这里插入图片描述
大于200的时候显示回到顶部，小于200时隐藏
在这里插入图片描述
简化写法
在这里插入图片描述

执行顺序

在这里插入图片描述
在这里插入图片描述

wang_book
关注
专栏目录
uniapp中组件生命周期
abcdebb的博客
04-16 2840
组件支持的生命周期，与vue标准组件的生命周期相同。这里没有页面级的onLoad等生命周期 父组件代码 <template> <view> 接收上一个页面的参数id{{id}}和age{{age}} <test v-if="flag"></test> <button type="primary" @click="change">test组件切换</button> </view> </template&g
uni-app组件与生命周期
2301_80735340的博客
07-21 1214
在demo1和demo2中调用这个组件，此时，demo1和demo2的页面是一摸一样的。尝试分别定义这两个页面，组件中有三个区域header、main、footer，我们要定义中间的main，就在main内放入一个标签，然后就可以去demo1和demo2的组件标签中定义，下面是demo1的代码，在组件标签内填写任意内容；接下来，尝试传递对象给组件：首先，要在组件中设置defineProps接受obj，并在template中渲染，然后在页面中script区域定义对象，并在template中调用。
uni-app 生命周期
最新发布
专研技术的大学生
09-01 427
uniapp的生命周期
Uni-app中的生命周期
qq_53694927的博客
10-31 1万+
Uni-app中的生命周期
uni-app组件的生命周期
weixin_44479957的博客
09-17 262
组件的创建 一般创建项目时，组件文件是不会一起创建的，需要自己创建目录，组件文件名为【componets(一般都是这个名字)】 – >选择【新建组件】 – >定义组件名 – >点击【创建】按钮 组件的引用 在pages文件下的【index.vue】引用 – > <script> import Menu from "../../components/menu.vue" export default { data() { return { }
gradle-4.4-all.zip
12-11
gradle-4.4-all.zip Gradle是一个基于JVM的构建工具，是一款通用灵活的构建工具，支持maven， Ivy仓库，支持传递性依赖管理，而不需要远程仓库或者是pom.xml和ivy.xml配置文件，基于Groovy，build脚本使用Groovy...
appengine-java-sdk-1.8.3.part2.rar
08-21
安装方法http://blog.csdn.net/u011029071/article/details/10143841
appengine-java-sdk-1.8.3.part1.rar
08-21
part2 http://download.csdn.net/detail/u011029071/5987179 part3 http://download.csdn.net/detail/u011029071/5986923 安装方法http://blog.csdn.net/u011029071/article/details/10143841
Understand-3.1.670-Linux-64bit.tgz2 part2（2-2）
06-18
Understand-3.1.670-Linux-64bit.tgz Linux 64位机下的Understand（2/2） 序列号： http://blog.csdn.net/look85/article/details/7988332
grub2引导iso镜像启动Ｕ盘制作（引导Fedora-Workstation-Live,kali-linux-2020.2-live,WIN10PE)
silent_ghost的专栏
06-11 4354
ENV: [root@Fedora32 ~]#uname -r 5.6.16-300.fc32.x86_64 [root@Fedora32 ~]#cat /etc/redhat-release Fedora release 32 (Thirty Two) 之前心血来潮突然想重新玩玩引导Ｕ盘，结果操作不当，先前做好的启动Ｕ盘废了，只好重新再做了一次，上次操作的过程有一部分记录，但是最主要的grub.cfg文件的内容没有存，杯具就开始了。新的内容重新做吧！并把这次的操作过程详细记录并发出来（主要是自己的
uni-app组件生命周期
热门推荐
weixin_45966674的博客
12-23 1万+
其实学过vue和小程序的人再来看uni-app真的会非常简单 其实他就是两种语法的融合 uni-app新增了整个应用程序的生命周期 延用了小程序组件和单页面都有自己不同的生命周期的做法 但有延用了 vue 单个vue文件即为一个组件 也可以是单独页面的特性 页面生命周期更像是小程序的生命周期写法 而组件的生命周期则更像vue2的生命周期函数 小看单页面生命周期的可以阅读我之前的文章 https://blog.csdn.net/weixin_45966674/article/details/12166
uniapp中的生命周期
AAAXiaoApple的博客
07-10 1048
uniapp是一个跨平台开发框架，其生命周期类似于Web应用程序的生命周期，分为App生命周期、页面生命周期和组件生命周期。
uniapp：组件生命周期
倚树探星的博客
07-12 501
生命周期钩子 动作 beforeCreate() 实例初始化完成之后调用。此时<script>的data中的数据为undefined，尚未完成初始化，页面也尚未开始渲染 create() 实例创建完成之后调用。此时<script>的data中的数据完成初始化，可以拿到数据，表明能够对数据进行操作（数据的初始化） beforeMount() 实例挂载之前调用。页面尚未渲染 mounted() 实例挂载之后调用（不能确定子组件全部挂载）。页面完成渲染，表明此时...
一文教你搞懂uniapp（生命周期和组件）
Mangcun_tutu的博客
01-17 1925
在 uni-app 中，可以通过创建一个后缀名为 vue 的文件，即创建一个组件成功，其他组件可以将该组件通过 impot 的方式导。创建 login 组件，在 component 中创建 login 目录，然后新建 login.vue 文件。需要注意的是：在小程序中网络相关的 API 在使用前需要配置域名白名单。在 uni 中可以调用 uni.request 方法进行请求网络请求。通过 props 来接受外界传递到组件内部的值。其他组件在使用 login 组件的时候传递值。在其他组件中导入该组件并注册。
uniapp生命周期
qq_43628158的博客
11-03 1050
uniapp生命周期及执行顺序
最全的uniapp生命周期梳理
钱端猿的博客
04-17 3812
页面生命周期是指页面从创建到销毁的整个过程，包括页面的创建、显示、隐藏和销毁等。onInit：监听页面初始化，其参数同 onLoad 参数，为上个页面传递的数据，参数类型为 Object（用于页面传参），触发时机早于 onLoad。onLoad：页面被加载时触发，监听页面加载，该钩子被调用时，响应式数据、计算属性、方法、侦听器、props、slots 已设置完成，其参数为上个页面传递的数据，参数类型为 Object（用于页面传参）可以进行数据初始化和网络请求等操作。
uniapp的生命周期
qq_52301431的博客
12-19 7591
创建 初始化 挂载 销毁。
MPEG-2与H.264压缩标准详解：高效编码与应用比较
H.264是MPEG-2之后的一个重要进展，它是MPEG-4 Part 10的简称，于2003年发布。相比于MPEG-2，H.264在压缩效率上有显著提升，尤其是在相同码率下，能够提供更高的画质。H.264采用了更先进的编码技术，如高效的帧内...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值