当前位置: 首页 > news >正文

你真的会使用Vue3的onMounted钩子函数吗?Vue3中onMounted的用法详解

目录

一、onMounted的前世今生

1.1、onMounted是什么

1.2、onMounted在vue2中的前身

1.2.1、vue2中的onMounted

1.2.2、Vue2与Vue3的onMounted对比

1.3、vue3中onMounted的用法

1.3.1、基础用法

1.3.2、顺序执行异步操作

1.3.3、并行执行多个异步操作

1.3.4、执行一次性副作用

1.3.5、清理工作(较少用)

1.3.6、组合使用(特定情况用)

1.3.7、直接将封装好的函数传递给onMounted钩子函数调用

二、总结


一、onMounted的前世今生

1.1、onMounted是什么

        onMounted钩子函数在组件实例被成功挂载后调用,此时你可以访问到 DOM 元素。它返回一个函数,可以用于在组件卸载时进行清理。

        可以说onMounted钩子函数是最常用的钩子函数了,玩转onMounted钩子函数,是写出优雅的vue前端代码的关键步骤。

1.2、onMounted在vue2中的前身

1.2.1、vue2中的onMounted

        在Vue 2中,onMounted钩子的前身实际上是mounted生命周期钩子。在Vue 2的Options API中,生命周期钩子是作为组件的选项来定义的。

        在Vue 2的组件中,mounted钩子用于执行那些需要在组件实例挂载到DOM之后运行的代码,这通常包括DOM操作、数据请求等。

        比如:

export default {data() {return {// 组件的数据};},mounted() {// 组件挂载完成后的副作用操作console.log('组件已挂载到DOM');// 可以执行DOM操作或数据请求等},methods: {// 组件的方法}
};

1.2.2、Vue2与Vue3的onMounted对比

  • Vue 2:使用mounted作为组件的一个选项来执行挂载后的代码。
  • Vue 3:使用onMounted作为Composition API的钩子来执行挂载后的代码。

        在Vue 3中,onMounted是Composition API的一部分,它提供了更灵活的方式来组织组件的逻辑。Vue 3的onMounted与Vue 2的mounted在功能上相似,都是在组件挂载完成后执行,但onMounted作为Composition API的一部分,可以更好地与其它Composition API一起使用,提供更细粒度的控制和更好的组合性。

1.3、vue3中onMounted的用法

1.3.1、基础用法

        这个没什么可说的,和watch、interval语法结构一样。

import { onMounted, ref } from 'vue';export default {setup() {const count = ref(0);onMounted(() => {// 在这里可以执行DOM操作或数据请求console.log('组件已挂载');});// 也可以返回一个函数进行清理return {count};}
};

1.3.2、顺序执行异步操作

        onMounted 也常用于执行顺序异步操作,如发起网络请求。

import { onMounted, ref } from 'vue';
import axios from 'axios';export default {setup() {const data = ref(null);onMounted(async () => {try {const response = await axios.get('https://api.example.com/data');data.value = response.data;const response2 = await axios.get('https://api.example.com/data2');data.value2 = response2.data;const response3 = await axios.get('https://api.example.com/data3');data.value3 = response3.data;const response4 = await axios.get('https://api.example.com/data4');data.value4 = response4.data;// ...更多的异步操作} catch (error) {console.error('请求错误:', error);}});return {data};}
};

1.3.3、并行执行多个异步操作

        onMounted 也常用于执行并行异步操作,也可以发起网络请求。但据我实际使用的经历来看,异步操作能在首屏加载、大量图片等资源加载时发挥不错的作用。

import { ref, onMounted } from 'vue';
import axios from 'axios';export default {setup() {// 声明响应式数据引用const data = ref(null);const data2 = ref(null);const data3 = ref(null);const data4 = ref(null);onMounted(async () => {// 使用Promise.all来处理并发的axios请求await Promise.all([axios.get('https://api.example.com/data'),axios.get('https://api.example.com/data2'),axios.get('https://api.example.com/data3'),axios.get('https://api.example.com/data4')]).then(responses => {// 所有请求成功完成后,更新响应式数据data.value = responses[0].data;data2.value = responses[1].data;data3.value = responses[2].data;data4.value = responses[3].data;// 这里可以放置所有异步任务完成后的代码...}).catch(error => {// 处理请求中出现的任何错误console.error('请求错误:', error);});});// 返回响应式状态供模板或其他Composition API使用return {data,data2,data3,data4};}
};

1.3.4、执行一次性副作用

        如果你需要执行一次性的副作用(side effect),onMounted 是一个理想的地方。

        "副作用"(side effect)是指函数在执行时除了返回值之外对外部环境产生的影响。这些影响可能包括但不限于:

  • 修改全局变量:改变在函数外部定义的变量的值。
  • 执行I/O操作:如读写文件、网络请求、控制台日志输出等。
  • 修改外部对象或数组:影响传入函数的参数对象或数组的状态。
  • 触发事件:如点击事件、网络事件等。
  • 定时器设置:设置 setTimeout 或 setInterval。

        这里是利用onMounted钩子函数在组件实例被成功挂载后调用的时序特性,这个组件实例已经挂载,页面首次渲染的时机。在这个阶段可以执行很多操作。

import { onMounted } from 'vue';export default {setup() {onMounted(() => {// 执行一次性副作用console.log('这是一个一次性副作用');});return {};}
};

1.3.5、清理工作(较少用)

        onMounted 提供的函数可以用于注册清理工作,这在处理定时器或监听器时非常有用。不过在onMounted清理的比较少,我见到的在onBeforeUnmount钩子函数清理定时器、监听器的比较多。

import { onMounted, ref } from 'vue';export default {setup() {const count = ref(0);const intervalId = setInterval(() => {count.value++;}, 1000);// 注册清理工作const cleanup = onMounted(() => {return () => {clearInterval(intervalId);console.log('定时器已清理');};});return {count,cleanup};}
};

1.3.6、组合使用(特定情况用)

        onMounted 可以与Vue 3的其他Composition API一起使用,以实现复杂的逻辑。这里主要是改变了watch的启动时机,本来是在setup阶段启动watch侦听器,但是这样写就变成了在onMounted阶段启动侦听器。

import { onMounted, ref, watch } from 'vue';export default {setup() {const data = ref(null);onMounted(() => {// 可以组合使用其他Composition APIwatch(data, (newValue, oldValue) => {console.log(`数据从 ${oldValue} 变更为 ${newValue}`);});});// 模拟数据变化setTimeout(() => {data.value = { name: '新数据' };}, 2000);return {data};}
};

1.3.7、直接将封装好的函数传递给onMounted钩子函数调用

        Vue3中onMounted可以重复使用,多次使用,并不是像vue2那样要写在某一个对象里面。但一般不推荐多次使用,这相当于多个onMounted异步执行操作,分散地写只会增加long terms的可维护性,降低可读性,哪怕是为了迎合和充分利用composition API的特点,我也觉得弊大于利。

function task1() {// 初始化任务1
}function task2() {// 初始化任务2
}onMounted(task1);
onMounted(task2);

二、总结

        onMounted作为vue3中最常用的钩子函数之一,能够灵活、随心应手的使用是每个Vue开发者的必修课,同时根据其不同写法的特性,来选择最合适最有利于维护的写法。

        更多前端有趣知识或疑难解决方案,请关注前端专栏,希望能帮到您:https://blog.csdn.net/rengj010617/category_12626626.html

        博客不应该只有代码和解决方案,重点应该在于给出解决方案的同时分享思维模式,只有思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~

相关文章:

你真的会使用Vue3的onMounted钩子函数吗?Vue3中onMounted的用法详解

目录 一、onMounted的前世今生 1.1、onMounted是什么 1.2、onMounted在vue2中的前身 1.2.1、vue2中的onMounted 1.2.2、Vue2与Vue3的onMounted对比 1.3、vue3中onMounted的用法 1.3.1、基础用法 1.3.2、顺序执行异步操作 1.3.3、并行执行多个异步操作 1.3.4、执行一次…...

JavaWeb基础(一)-IO操作

Java I/O工作机制: 注:简要笔记,示例代码可能较少,甚至没有。 1、Java 的 I/O 类库的基本架构。 ​ Java 的 I/O 操作类在包 java.io 下,大概有将近80个类,这些类大概可以分为如下四组。 基于字节操作的…...

拼多多(PDD)社招一面原题

未成年游戏退费 5 月 28 日,中国互联网协会发布《未成年人网络游戏服务消费管理要求(征求意见稿)》团体标准。 该标准是游戏行业首个完整的消费管理规范,可用于未成年人游戏消费退费纠纷解决,也可为相关行政部门、司法…...

类中使用QtConcurrent::run

在QtConcurrent::run中调用类的成员函数时,你需要注意几个关键点: 对象生命周期:你需要确保在QtConcurrent::run调用的整个期间,类对象都是有效的。如果对象在成员函数执行期间被销毁,将会导致未定义行为。成员函数访…...

基于深度学习的中文情感分析系统python flask

基于python的毕业设计 基于深度学习的中文情感分析系统(flask)(源码说明文档演示) 毕业设计课程设计期末大作业、课程设计、高分必看,下载下来,简单部署,就可以使用。 包含:项目源码、数据库脚本、软件工具等,该项目…...

Mysql联合索引

对mysql联合索引的认识 文章目录 对mysql联合索引的认识最左原则匹配一、最左匹配的原理?二、实战 最左原则匹配 所谓最左原则指的就是如果你的 SQL 语句中用到了联合索引中的最左边的索引,那么这条 SQL 语句就可以利用这个联合索引去进行匹配&#xff…...

Linux基础指令用户管理003

继Linux基础指令002我们讲了如何设置用户密码以及修改用户信息,我们讲一下高级用户管理。 操作系统 CentOS Stream 9 高级用户管理 visudo 用于普通用户临时提升权限执行命令,如下图 [yylocalhost ~]$ cp -av /etc/passwd{,_bak} /etc/passwd ->…...

java图书电子商务网站的设计与实现源码(springboot+vue+mysql)

风定落花生,歌声逐流水,大家好我是风歌,混迹在java圈的辛苦码农。今天要和大家聊的是一款基于springboot的图书电子商务网站的设计与实现。项目源码以及部署相关请联系风歌,文末附上联系信息 。 项目简介: 图书电子商…...

全球首个多语种手语视频生成模型诞生:SignLLM

近日,一项名为 SignLLM 的新型 AI 技术取得了突破性进展,或将彻底改变听障人士的沟通方式。作为全球首个多语种手语生成模型,SignLLM 能够将输入的文本或语音指令,实时转化为对应的手语手势视频,为打破语言障碍、促进信…...

初学C语言100题:经典例题节选(源码分享)

1.输出10000以内所有完数 完数的概念 一个正整数的所有因子&#xff08;除了自身以外的约数&#xff09;的和恰巧等于它本身 #include <stdio.h>int main() {int i 0;for (i 2; i < 10000; i)//生成1到10000之间的数{int j 0;int sum 0;//注意这里的sum每次循环结…...

C++设计模式之策略模式、迭代器模式、适配器模式、工厂模式、超级工厂模式、享元模式、代理模式

文章目录 一、介绍1.毫无价值的使用虚函数例子 二、策略模式1.策略模式2.多重策略与迭代器模式3.不要什么东西都塞一块 三、适配器模式1.跨接口的适配器2.跨接口的适配器 四、工厂模式1.工厂模式2.超级工厂模式3.RAII 自动管理内存4.工厂模式实战 五、享元模式1.享元模式2.代理…...

18 js时间对象

时间对象是一种复杂数据类型&#xff0c;用来存储时间 创建时间对象 内置构造函数创建 语法&#xff1a;var 时间名new Date() var datenew Date()console.log(date) //Wed May 29 2024 16:03:47 GMT0800 (中国标准时间) 创建指定日期 当参数为数字——>在格林威治的时间基…...

安卓赤拳配音v1.0.2Ai配音神器+百位主播音色

Ai配音神器 本人自用版本&#xff01;超级稳定&#xff01;百位主播音色 登陆即可用 链接&#xff1a;https://pan.baidu.com/s/1WVsrYZqLaPAriHMMLMdPBg?pwdz9ru 提取码&#xff1a;z9ru...

前端面试题日常练-day40 【面试题】

题目 希望这些选择题能够帮助您进行前端面试的准备&#xff0c;答案在文末 1. Bootstrap 的栅格系统是基于&#xff08; &#xff09;进行布局的。A. 像素 B. 百分比 C. 媒体查询 2. 在 Bootstrap 中&#xff0c;要创建一个按钮&#xff0c;可以使用&#xff08; &#xff…...

UG NX二次开发(C#)-UFun函数-利用UFPart.Export导出模型中的对象并创建一个新的part

文章目录 1、前言2、UF_PART_export函数定义3、UF_PART_export_with_options函数定义4、代码1、前言 在UG NX 10.0二次开发中,需要用到将装配体中通过几何建模创建的对象独立创建一个part文件,所以查找了下UFun函数,即是UF_PART_export 和UF_PART_export_with_options两个函…...

SFOS2:组件介绍

一、前言 在sailfish os application的开发过程中&#xff0c;几乎是困难重重&#xff0c;因为我暂未找到具有完整性、指导性、易懂性的开发文档&#xff0c;特别是组件的使用&#xff0c;现决定将自己的探究结果记录下来。因此&#xff0c;这篇文章只会具有参考价值&#xff0…...

交换机的三层交换技术

现有pc1与pc2不在同一个网段之下&#xff0c;通过交换机相连接。 进人交换机1&#xff0c;创建两个vlan 10和vlan 20 &#xff0c;进入串口2设置串口模式为access&#xff0c;并且设置默认vlan为10.进入串口3设置串口模式为access&#xff0c;并且设置默认vlan为20. 进入串口1…...

探秘URL的奥义:JavaScript中轻松获取页面参数值的N种姿势【含代码示例】

探秘URL的奥义&#xff1a;JavaScript中轻松获取页面参数值的N种姿势【含代码示例】 URL基础知识补给站基础案例&#xff1a;直接解析URL案例一&#xff1a;使用URLSearchParams案例二&#xff1a;传统字符串分割法 高级策略&#xff1a;动态与安全案例三&#xff1a;封装与模块…...

VSCode小技巧,忽略不想格式化的代码行

零&#xff0e;格式化工具文档 1 . Black Ignoring sections功能 2 . autopep8 disabling-line-by-line功能&#xff1b;&#xff1b;–line-range选项 3 . Prettier prettier-ignore功能(例&#xff1a;适用于JS的// prettier-ignore&#xff0c;适用于CSS的/* prettier-igno…...

揭秘网络编程:同步与异步IO模型的实战演练

摘要 ​ 在网络编程领域&#xff0c;同步(Synchronous)、异步(Asynchronous)、阻塞(Blocking)与非阻塞(Non-blocking)IO模型是核心概念。尽管这些概念在多篇文章中被广泛讨论&#xff0c;它们的抽象性使得彻底理解并非易事。本文旨在通过具体的实验案例&#xff0c;将这些抽象…...

[2025CVPR]DeepVideo-R1:基于难度感知回归GRPO的视频强化微调框架详解

突破视频大语言模型推理瓶颈,在多个视频基准上实现SOTA性能 一、核心问题与创新亮点 1.1 GRPO在视频任务中的两大挑战 ​安全措施依赖问题​ GRPO使用min和clip函数限制策略更新幅度,导致: 梯度抑制:当新旧策略差异过大时梯度消失收敛困难:策略无法充分优化# 传统GRPO的梯…...

stm32G473的flash模式是单bank还是双bank?

今天突然有人stm32G473的flash模式是单bank还是双bank&#xff1f;由于时间太久&#xff0c;我真忘记了。搜搜发现&#xff0c;还真有人和我一样。见下面的链接&#xff1a;https://shequ.stmicroelectronics.cn/forum.php?modviewthread&tid644563 根据STM32G4系列参考手…...

基于FPGA的PID算法学习———实现PID比例控制算法

基于FPGA的PID算法学习 前言一、PID算法分析二、PID仿真分析1. PID代码2.PI代码3.P代码4.顶层5.测试文件6.仿真波形 总结 前言 学习内容&#xff1a;参考网站&#xff1a; PID算法控制 PID即&#xff1a;Proportional&#xff08;比例&#xff09;、Integral&#xff08;积分&…...

Qt/C++开发监控GB28181系统/取流协议/同时支持udp/tcp被动/tcp主动

一、前言说明 在2011版本的gb28181协议中&#xff0c;拉取视频流只要求udp方式&#xff0c;从2016开始要求新增支持tcp被动和tcp主动两种方式&#xff0c;udp理论上会丢包的&#xff0c;所以实际使用过程可能会出现画面花屏的情况&#xff0c;而tcp肯定不丢包&#xff0c;起码…...

uniapp中使用aixos 报错

问题&#xff1a; 在uniapp中使用aixos&#xff0c;运行后报如下错误&#xff1a; AxiosError: There is no suitable adapter to dispatch the request since : - adapter xhr is not supported by the environment - adapter http is not available in the build 解决方案&…...

并发编程 - go版

1.并发编程基础概念 进程和线程 A. 进程是程序在操作系统中的一次执行过程&#xff0c;系统进行资源分配和调度的一个独立单位。B. 线程是进程的一个执行实体,是CPU调度和分派的基本单位,它是比进程更小的能独立运行的基本单位。C.一个进程可以创建和撤销多个线程;同一个进程中…...

(一)单例模式

一、前言 单例模式属于六大创建型模式,即在软件设计过程中,主要关注创建对象的结果,并不关心创建对象的过程及细节。创建型设计模式将类对象的实例化过程进行抽象化接口设计,从而隐藏了类对象的实例是如何被创建的,封装了软件系统使用的具体对象类型。 六大创建型模式包括…...

WEB3全栈开发——面试专业技能点P4数据库

一、mysql2 原生驱动及其连接机制 概念介绍 mysql2 是 Node.js 环境中广泛使用的 MySQL 客户端库&#xff0c;基于 mysql 库改进而来&#xff0c;具有更好的性能、Promise 支持、流式查询、二进制数据处理能力等。 主要特点&#xff1a; 支持 Promise / async-await&#xf…...

Docker、Wsl 打包迁移环境

电脑需要开启wsl2 可以使用wsl -v 查看当前的版本 wsl -v WSL 版本&#xff1a; 2.2.4.0 内核版本&#xff1a; 5.15.153.1-2 WSLg 版本&#xff1a; 1.0.61 MSRDC 版本&#xff1a; 1.2.5326 Direct3D 版本&#xff1a; 1.611.1-81528511 DXCore 版本&#xff1a; 10.0.2609…...

虚拟机网络不通的问题(这里以win10的问题为主,模式NAT)

当我们网关配置好了&#xff0c;DNS也配置好了&#xff0c;最后在虚拟机里还是无法访问百度的网址。 第一种情况&#xff1a; 我们先考虑一下&#xff0c;网关的IP是否和虚拟机编辑器里的IP一样不&#xff0c;如果不一样需要更改一下&#xff0c;因为我们访问百度需要从物理机…...