uniapp学习(004-2 组件 Part.2生命周期)

零基础入门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时隐藏

简化写法

执行顺序



相关推荐
小破孩呦1 分钟前
动态循环表单+动态判断表单类型+动态判断表单是否必填方法
前端·javascript·html
每次的天空11 分钟前
Android学习总结之service篇
android·学习
ElasticPDF-新国产PDF编辑器18 分钟前
React PDF Annotation plugin library online API examples
前端·react.js·pdf
技术干货贩卖机1 小时前
MATLAB之数据分析图系列 三
学习·matlab·数据挖掘·数据分析·可视化
Bruce_Liuxiaowei1 小时前
构建macOS命令速查手册:基于Flask的轻量级Web应用实践
前端·macos·flask
每次的天空2 小时前
Android学习总结之应用启动流程(从点击图标到界面显示)
android·学习
Python私教2 小时前
安装electron项目是为什么要执行postinstall script
前端·javascript·electron
·醉挽清风·2 小时前
学习笔记—C++—入门基础()
c语言·开发语言·c++·笔记·学习·算法
shmily_yyA2 小时前
Nextjs15 实战 - React Notes之SidebarNoteList优化和Suspense的使用
前端·react.js·前端框架
知识分享小能手2 小时前
CSS3学习教程,从入门到精通, 化妆品网站 HTML5 + CSS3 完整项目(26)
前端·javascript·css·学习·css3·html5·媒体