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

一、什么是生命周期?

生命周期有多重叫法,有叫生命周期函数的,也有叫生命周期钩子的,还有钩子函数的,其实都是代表,在 Vue 实例创建、更新和销毁的不同阶段触发的一组钩子函数,这些生命周期函数允许开发者在不同阶段对 Vue 实例进行操作,以便执行特定的逻辑或清理工作。

生命周期主要包含以下四个阶段:创建、挂载、更新、销毁。
好比一款手机,创建(拿到全新一款手机)、挂载(安装各种软件)、更新(系统或者软件升级)、销毁(丢弃手机)

二、Vue3中的生命周期函数

官方生命周期函数地址

  • setup()是在beforeCreate和created之前运行的,所以可以用setup代替这两个钩子函数。
  • onBeforeMount() : 已经完成了模板的编译,但是组件还未挂载到DOM上的函数。
  • onMounted() : 组件挂载到DOM完成后执行的函数。
  • onBeforeUpdate(): 组件更新之前执行的函数。
  • onUpdated(): 由于数据更改导致的虚拟 DOM 重新渲染和打补丁,在这之后会调用该函数。
  • onBeforeUnmount(): 在组件实例被卸载之前调用。
  • onUnmounted(): 组件卸载完成后执行的函数
  • onActivated(): 若组件实例是 缓存树的一部分,当组件被插入到 DOM 中时调用。
  • onDeactivated(): 若组件实例是 缓存树的一部分,当组件从 DOM 中被移除时调用。
  • onErrorCaptured(): 在捕获了后代组件传递的错误时调用。

注意:在uniapp组件中,onBeforeUpdate、onUpdated、onActivated、onDeactivated,H5支持,小程序无法使用。

在这里插入图片描述

三、Vue2与Vue3的对比

在这里插入图片描述

四、uniapp中的页面生命周期函数

uniapp页面生命周期函数与 Vue.js 的生命周期函数有所不同,因为 uni-app 是基于 Vue.js 的跨平台应用框架,因此它具有自己特定的生命周期函数。
可以在这些生命周期函数中编写相应的逻辑代码,以便在不同阶段对页面进行初始化、展示、隐藏和卸载时执行特定的操作。

在开发uniapp Vue3版本的时候,不能像vue2的选项式API一样,可以直接使用onLoad、onShow等,在组合式API中需要先从“@dcloudio/uni-app”模块中导入才可以。

<script setup>
import {onLoad,onReady} from "@dcloudio/uni-app"
</script>
  • onLoad:页面加载时触发,可以在此生命周期函数中进行页面初始化操作。
  • onShow:页面显示时触发,可以在此生命周期函数中进行页面展示相关的操作。
  • onReady:页面初次渲染完成时触发,可以在此生命周期函数中进行页面渲染完成后的操作。
  • onHide:页面隐藏时触发,可以在此生命周期函数中进行页面隐藏相关的操作。
  • onUnload:页面卸载时触发,可以在此生命周期函数中进行页面卸载相关的操作。

其他常用的生命周期,可以看官方发文档,页面生命周期函数

五、uniapp中组件生命周期函数和页面生命周期函数的执行顺序

不包含组件的页面

onLoad > onShow > onReady

包含组件的页面

onLoad > onShow > onBeforeMount > onReady > onMounted

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

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

相关文章

【java爬虫】首页显示沪深300指数走势图以及前后端整合部署方法

添加首页 本文我们将在首页添加沪深300指数成立以来的整体走势数据展示&#xff0c;最后的效果是这样的 单独贴一张沪深300整体走势图 我感觉从总体上来看指数还是比较稳的&#xff0c;没有特别大的波动&#xff0c;当然&#xff0c;这只是相对而言哈哈。 首先是前端页面 &l…

HarmonOS 通用组件(Button)

本文 我们来看看基础组件中的 Button 这是 ArkTS ui 原生支持的一个组件 用来创建不同样式的按钮 首先 我们还是创建一个最基本的组件结构 Entry Component struct Index {build() {Row() {Column() {}.width(100%)}.height(100%)} }我们可以在 Column 组件中 加入一个button…

【Electron】快速建立Vue3+Vite+Electron Ts项目

git https://github.com/electron-vite/electron-vite-vue 创建项目 npm create electron-vite or pnpm create electron-vite 初始化 pnpm install or pnpm i 启动项目 pnpm dev 打包项目 pnpm build 项目创建成功后默认情况下 窗口是H800 W600 在createWindow 函数…

亚马逊自养号测评:提升商品排名与流量的必要操作

自养号测评是通过使用自主注册的海外买家账号&#xff0c;对商品进行评价&#xff0c;以提升其在平台上的排名和流量的操作。卖家选择自养号这种方式来增强商品的曝光度和吸引更多潜在买家。然而&#xff0c;养号并非易事&#xff0c;需要卖家提高养号技术、掌握相应技巧&#…

java中list,map习题

&#x1f4d1;前言 本文主要是【java】——java中list,map习题的文章&#xff0c;如果有什么需要改进的地方还请大佬指出⛺️ &#x1f3ac;作者简介&#xff1a;大家好&#xff0c;我是听风与他&#x1f947; ☁️博客首页&#xff1a;CSDN主页听风与他 &#x1f304;每日一句…

dubbo的基础知识

dubbo是什么 Dubbo是一个分布式服务框架&#xff0c;是一种高性能的远程通讯框架。它提供了基于Java的RPC&#xff08;远程过程调用&#xff09;通信机制&#xff0c;使得应用之间可以方便地进行远程调用&#xff0c;实现分布式服务的调用和管理。Dubbo提供了服务注册、发现、负…

GPT实战系列-大模型为我所用之借用ChatGLM3构建查询助手

GPT实战系列-https://blog.csdn.net/alex_starsky/category_12467518.html 如何使用大模型查询助手功能&#xff1f;例如调用工具实现网络查询助手功能。目前只有 ChatGLM3-6B 模型支持工具调用&#xff0c;而 ChatGLM3-6B-Base 和 ChatGLM3-6B-32K 模型不支持。 定义好工具的…

【Java集合篇】负载因子和容量的关系

负载因子和容量有什么关系 ✔️典型解析✔️loadfactor为啥默认是0.75F&#xff0c;不是1呢?✔️为什么HashMap的默认负载因子设置成0.75✔️0.75的数学依据是什么✔️0.75的必然因素 ✔️HashMap的初始值设为多少合适? ✔️典型解析 HashMap 中有几个属性&#xff0c;如 cap…

HarmonyOS ArkTS 三方库的基本使用(十六)

如何获取三方库 目前提供了两种途径获取开源三方库&#xff1a; 1、通过访问Gitee网站开源社区获取 在Gitee中&#xff0c;搜索OpenHarmony-TPC仓库&#xff0c;在tpc_resource中对三方库进行了资源汇总&#xff0c;可以供开发者参考。 2、通过OpenHarmony三方库中心仓获取 …

【已解决】js定义对象属性是.如何访问

当变量没有length属性的时候&#xff0c;可能是个对象变量&#xff0c;当有键值对的时候就可能是个对象&#xff0c;读者都知道的是&#xff0c;用typeof(变量)可以查看属性&#xff0c;今天本文解决的问题是如果js定义对象中属性是"点"如何访问 问题再现 var a {…

C语言习题集(035)

//有n个人围成一圈&#xff0c;顺序排号。从第1个人开始报 //数&#xff08;从1到3报数&#xff09;&#xff0c;凡报到3的人退出圈子&#xff0c;问 //最后留下的是原来第几号的那位。 /* */ //解答&#xff1a; #include<stdio.h> int main() { int a[10000],n,i,k0,…

谈谈我的三次考研经历

阿七经历过三次考研。 第一次&#xff0c;大四毕业那年&#xff0c;大三开始有紧迫感&#xff0c;因为大学几年什么也没学会&#xff0c;毕业考试成绩从第二个学期开始就一路下滑&#xff0c;每次都是考前一周突击&#xff0c;最后擦着及格线通过。 大三就开始和几个同学组队…

iPhone 恢复出厂设置后如何恢复数据

如果您在 iPhone 上执行了恢复出厂设置&#xff0c;您会发现所有旧数据都被清除了。这对于清理混乱和提高设备性能非常有用&#xff0c;但如果您忘记保存重要文件&#xff0c;那就是坏消息了。 恢复出厂设置后可以恢复数据吗&#xff1f;是的&#xff01;幸运的是&#xff0c;…

第13课 利用openCV检测物体是否运动了

FFmpeg与openCV绝对是绝配。前面我们已经基本熟悉了FFmpeg的工作流程&#xff0c;这一章我们重点来看看openCV。 在前面&#xff0c;我们已经使用openCV打开过摄像头并在MFC中显示图像&#xff0c;但openCV能做的要远超你的想像&#xff0c;比如可以用它来实现人脸检测、车牌识…

基于平衡优化器算法优化的Elman神经网络数据预测 - 附代码

基于平衡优化器算法优化的Elman神经网络数据预测 - 附代码 文章目录 基于平衡优化器算法优化的Elman神经网络数据预测 - 附代码1.Elman 神经网络结构2.Elman 神经用络学习过程3.电力负荷预测概述3.1 模型建立 4.基于平衡优化器优化的Elman网络5.测试结果6.参考文献7.Matlab代码…

vivado xsim 终端 模拟

只模拟的话直接终端运行会快很多 计数器举例 mkdir srccounter.v module counter(input wire clk,input wire rst_n,output reg[31:0] cnt ); always (posedge clk or negedge rst_n)if(!rst_n)cnt < 31h0;elsecnt < cnt1;endmodule tb.v module tb; wire[31:0] out…

【大厂秘籍】系列 - Java多线程面试题

Java多线程面试题 友情提示&#xff0c;看完此文&#xff0c;在Java多线程这块&#xff0c;基本上可以吊打面试官了 线程和进程的区别 进程是资源分配的最小单位&#xff0c;线程是CPU调度的最小单位 线程是进程的子集&#xff0c;一个进程可以有很多线程&#xff0c;每条线…

【复现】DiffTalk

code&#xff1a;GitHub - sstzal/DiffTalk: [CVPR2023] The implementation for "DiffTalk: Crafting Diffusion Models for Generalized Audio-Driven Portraits Animation" 问题1. ERROR: Failed building wheel for pysptk Cython.Compiler.Errors.CompileError:…

Beauty algorithm(三)腮红

查阅资料了解到腮红位于苹果肌处,同样使用关键点确定目标区域,然后对该区域进行渲染达到美妆效果。考虑到如果使用简单的RGB是很难做到特效,本篇采用模板方式进行区域融合。 一、skills 前瞻 1、png图像读取 cv::imread(imgPath, cv::IMREAD_UNCHANGED) IMREAD_UNCHANGE…

python属性管理getattr、getattribute、setattr和delattr避免循环

1 python属性管理getattr、getattribute、setattr和delattr避免循环 在__getattr__()、__getattribute__()和__setattr__()方法体内&#xff0c;通过self进行对应的点号运算、赋值运算&#xff0c;会自动调用当前实例的相应方法&#xff0c;导致无限循环。通过object或者__dic…