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

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

总时长 23:40:00 共116P

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


文章目录

  • 组件生命周期
    • 我们主要使用的三种生命周期
      • setup(创建组件时执行)
        • 不可以操作dom节点
      • onMounted(挂载到dom时执行)
        • 可以操作dom节点
      • onUnmounted(销毁前执行)
    • defineExpose 父组件直接获取子组件的数据
      • 暴露对象
      • 暴露方法
      • vue查看api
  • 页面生命周期
      • onload
      • 写一个跳转url
      • onReady
      • onShow和onHide
        • onShow
        • onHide
        • 例子
        • App.vue里也有生命周期(应用的生命周期)
          • 执行顺序
      • onUnload
      • onPageScroll 监听页面的滚动
    • 执行顺序

组件生命周期

在这里插入图片描述

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

这里详见
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时隐藏
在这里插入图片描述
简化写法
在这里插入图片描述

执行顺序

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


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

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

相关文章

JavaScript找到深层dom元素并修改的全部方法

在 JavaScript 中,找到深层标签元素并进行修改有多种方法。这些方法可以帮助我们遍历和操作 DOM 结构。以下是所有常用的方法,包括简单查找、选择器、遍历等方式,以及如何修改这些元素的属性和内容。 1. 使用选择器 1.1 querySelector que…

【开发工具】K8s经验: 在k8s中 服务1部署到了k8s,那服务2也在k8s中的某个dockers中,服务1和服务2能互相找到吗 ?

今天在开发中遇到了需要调用其他dubbo服务中的一个接口,首先通过注解DubboReference来引入另外一个dubbo服务,但是还需要设置url吗? 下面是思考经验:希望能帮到大家 服务1已经被部署到了Kubernetes(k8s)集…

最新CSS入门总结

CSS(层叠样式表)是一种用于网页样式设计的语言,它通过为 HTML 标签添加样式来控制网页的外观和布局。CSS 可以设置元素的颜色、字体、间距、对齐方式等,还可以用于创建响应式设计,以适应不同设备的屏幕尺寸。CSS 是前端…

再给我两分钟,我能教会你使用 nvm 一键搞定node 和 npm

1. nvm简介 NVM(Node Version Manager)是Node.js的版本管理工具,它允许用户在同一台机器上安装和管理多个Node.js版本。这对于需要在不同项目之间切换Node.js版本的开发者来说非常有用,因为不同的项目可能依赖于不同版本的Node.js…

排队模型和贪心算法,贪心算法在算力共享排队系统中的应用

目录 排队模型和贪心算法 一、排队模型概述 二、贪心算法简介 三、排队模型与贪心算法的关系 四、实例说明 贪心算法在算力共享排队系统中的应用 贪心算法的局限性 排队模型和贪心算法 之间存在密切的关系,主要体现在排队问题的求解过程中。 一、排队模型概述 排队模…

CAN总线通信协议

目录 一、CAN总线的介绍 二、主流通信协议对比 1.CAN硬件电路 三、CAN电平标准 四、CAN总线帧格式 1.CAN总线的5种类型帧 2.CAN总线的帧介绍 1.CAN总线的两种数据格式(标准格式与扩展格式) 2.遥控帧 3.错误帧 4.过载帧 5.帧间隔 3.位填充 4…

golang必备项目管理机制:工作区

在 Go 1.18 及以后的版本中,工作区(Workspace)是一种新的项目管理方式,可以让多个项目共享同一个模块缓存和依赖。这意味着你不需要在每个项目中单独安装依赖,而是可以共享依赖,这样可以节省空间和时间。 假…

CUDA 运行时GPU信息查询

cuda 官网文档名&#xff1a;CUDA_Runtime_API 运行时API查询GPU信息 调用 cudaDeviceProp prop; cudaGetDeviceProperties(&prop, device_id) 定义 由此可见&#xff0c;只能在主机上调用。 #include <cuda_runtime.h>#include <iostream> #include <…

ConditionVideo: 无训练的条件引导视频生成 | AAAI 2024

作者&#xff1a;彭博&#xff0c;上海人工智能实验室与上海交大2023级联培博士。 最近的工作已经成功地将大规模文本到图像模型扩展到视频领域&#xff0c;产生了令人印象深刻的结果&#xff0c;但计算成本高&#xff0c;需要大量的视频数据。在这项工作中&#xff0c;我们介…

游戏如何应对薅羊毛问题

在大众眼里&#xff0c;“薅羊毛”是指在电商领域&#xff0c;“羊毛党”利用平台、商家的促销规则&#xff0c;低价获取商品和服务的行为。如前不久“小天鹅被一夜薅走7000万”的案例震惊全网。 然而实际上&#xff0c;“薅羊毛”现象不仅存在于电商场景&#xff0c;在游戏中…

Java数据结构--顺序表

目录 1.介绍2.顺序表实现2.1 代码简单实现顺序表2.2 List接口实现顺序表 3.ArrayList常用方法4.ArrayList的遍历4.1 直接打印4.2 for循环或for-each4.3 迭代器 1.介绍 线性表(一种广泛使用的数据结构)&#xff0c;是n个具有相同特征的数据元素的有限序列&#xff0c;在逻辑上线…

设计模式之适配器模式(通俗易懂--代码辅助理解【Java版】)

文章目录 设计模式概述1、适配器模式2、适配器模式的使用场景3、优点4、缺点5、主要角色6、代码示例1&#xff09;UML图2&#xff09;源代码&#xff08;1&#xff09;定义一部手机&#xff0c;它有个typec口。&#xff08;2&#xff09;定义一个vga接口。&#xff08;3&#x…

docker入门-快速学会docker

死记硬背一张图 镜像类似于我们是使用的虚拟机&#xff0c;创建虚拟机前需要下载的系统镜像文件&#xff0c;比如iso文件&#xff0c;img文件等等这样一些镜像文件。 容器可以比作正在运行中的一个虚拟机。 tar文件&#xff0c;tar文件类似于vm使用时的vmdk文件。通过load指…

在 Docker容器中安装 ROS-Melodic 并使用 rviz 进行图形化显示

文章目录 写在前面1. 背景描述2. 安装步骤2.1 允许本地机器上的用户或进程连接到 X server2.2 拉取 docker 镜像2.3 使用镜像osrf/ros:melodic-desktop-full创建并运行容器2.4 运行 roscore2.5 运行 rviz 参考链接 写在前面 自己的测试环境&#xff1a; Ubuntu20.04&#xff0…

面网易后台开发居然遇到了一个困难难度算法题

在提供面经的同学中&#xff0c;竟然有同学在面试网易后台研发的时候遇到了一道困难难度的算法题。 一般来说&#xff0c;大多数面试的算法题都是以中等难度为主&#xff0c;遇到困难难度的算法题也许是公司现在不缺人、也许是在选拔人才、当然也很可能是面试官其实并不想要你…

在三维可视化项目中,B/S和C/S架构该如何选择?

一、什么是B/S和C/S 在3D数据可视化中&#xff0c;有两种常见的架构模式&#xff1a;BS&#xff08;Browser/Server&#xff09;和CS&#xff08;Client/Server&#xff09; B/S模式 B/S模式是指将3D数据可视化的逻辑和处理放在服务器端&#xff0c;而在客户端使用浏览器进行…

前端新机部署

编辑器&#xff1a;vscode 下载地址 vscode常用插件 显示代码修改历史、作者等信息 GitLens Nodejs版本 Node版本管理工具 Nvm下载地址 nvm常用命令&#xff1a; nvm ls // 查看安装的所有node.js的版本nvm list available //查看可以安装的所有node.js版本nvm install 版本…

k8s pod详解使用

什么是pod&#xff1f; Kubernetes&#xff08;简称K8s&#xff09;是一个开源的容器编排平台&#xff0c;广泛用于构建、部署和管理容器化应用程序。在K8s中&#xff0c;Pod是一个核心概念&#xff0c;下面是对Pod的详细解释&#xff1a; 一、Pod的定义 Pod是K8s中最小的可…

JQuery的基本使用

jQuery 是一个快速、小巧且功能强大的 JavaScript 库&#xff0c;它使得 HTML 文档的遍历和操作、事件处理、动画和 Ajax 交互变得简单。以下是 jQuery 的基本使用&#xff0c;包括常见的操作和示例。 1. 引入 jQuery 在使用 jQuery 之前&#xff0c;您需要将其引入到您的 HT…

Linux:Ubuntu系统开启SSH服务

在Ubuntu上开启SSH服务&#xff0c;可以按照以下步骤进行&#xff1a; 1.安装OpenSSH服务 如果你还没有安装OpenSSH服务&#xff0c;可以使用以下命令安装&#xff1a; sudo apt update sudo apt install openssh-server2. 启动SSH服务 安装完成后&#xff0c;启动SSH服务&a…