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

vue3 onMounted 使用方法和注意事项

news 来源：原创 2025/8/29 6:41:57

基础用法 / 语法糖写法

<script>
import { onMounted } from 'vue';// 选项式 API 写法
export default {setup() {onMounted(() => {console.log('组件已挂载');});}
}
</script>

<script setup>
onMounted(() => {console.log('组件已挂载');
});
</script>

‌异步操作async/await

在 onMounted 中执行异步操作（如数据请求），确保组件已完全渲染

onMounted(async () => {const data = await fetch('https://api.example.com/data');console.log(data);
});

常见使用场景

访问 DOM 元素

结合 ref 获取模板中的 DOM 节点或子组件实例：

import { ref, onMounted } from 'vue';const elementRef = ref(null);
onMounted(() => {console.log(elementRef.value); // 输出 DOM 元素
});

初始化数据或事件

执行一次性初始化任务，例如绑定事件监听器：

onMounted(() => {window.addEventListener('resize', handleResize);
});

定时器

let timer;
onMounted(() => {timer = setInterval(() => {console.log('定时任务');}, 1000);
});

注意事项

‌仅执行一次‌
onMounted 仅在组件首次挂载时触发，不会在更新阶段重复调用‌。

‌清理操作‌
若在 onMounted 中注册了事件监听或定时器，需在 onUnmounted 中清理：

import { onUnmounted } from 'vue';onMounted(() => {window.addEventListener('resize', handleResize);
});onUnmounted(() => {window.removeEventListener('resize', handleResize);
});

‌执行顺序‌
多个 onMounted 按代码顺序依次执行，支持定义多个钩子函数‌。

vue3 onMounted 使用方法和注意事项

基础用法 / 语法糖写法 <script> import { onMounted } from vue;// 选项式 API 写法 export default {setup() {onMounted(() > {console.log(组件已挂载);});} } </script><script setup> onMounted(() > {console.log(组件已挂载); }); </scrip…...

编程日记 2025/8/29 6:41:57

【ubuntu】linux开机自启动

目录开机自启动： /etc/rc.loacl system V 使用/etc/rc*.d/系统运行优先级遇到的问题： 1. Linux 系统启动阶段概述方法1：/etc/rc5.d/ 脚本延时日志方法二：使用 udev 规则来触发脚本执行开机自启动： /etc/…...

编程日记 2025/8/23 11:10:55

OpenCV day2

Matplotlib相关知识 Matplotlib相关操作： import numpy as np from matplotlib import pyplot as pltx np.linspace(0, 2 * np.pi, 100) y1 np.sin(x) y2 np.cos(x)# 使用红色虚线，圆点标记，线宽1.5，标记大小为6绘制sin plt.p…...

编程日记 2025/8/27 18:29:25

OpenCV 图形API（31）图像滤波-----3x3 腐蚀操作函数erode3x3()

操作系统：ubuntu22.04 OpenCV版本：OpenCV4.9 IDE:Visual Studio Code 编程语言：C11 算法描述使用3x3矩形结构元素腐蚀图像。该函数通过使用中心作为锚点的3x3矩形结构元素来腐蚀源图像。腐蚀操作可以应用多次（迭代&#xff0…...

编程日记 2025/8/28 7:45:31

机器学习概述自用笔记（李宏毅）

机器学习概述机器学习即找一个复杂的人类写不出来的函数，把输入（向量，矩阵，序列）转换为输出。 regression：输出是一个数值（预测PM2.5的数值） classification：选择设置…...

编程日记 2025/8/20 21:09:26

大数据面试问答-Spark

1. Spark 1.1 Spark定位 "Apache Spark是一个基于内存的分布式计算框架，旨在解决Hadoop MapReduce在迭代计算和实时处理上的性能瓶颈。 1.2 核心架构 Spark架构中有三个关键角色： Driver：解析代码生成DAG，协调任务调度&a…...

编程日记 2025/8/28 21:44:29

UE5 设置父物体和解除父子关系（移除子物体）

文章目录设置父物体解除父子关系 Acotor类似于untiy的objecttransfrom，可以用来进行父子操作设置父物体 Actor attach to Actor节点解除父子关系 Detach From Actor...

编程日记 2025/8/21 1:39:16

Git - 怎么把当前修改追加到前面某个commit中

怎么把当前修改追加到前面某个commit中 git log commit b7cb11b53388d410d07e3b3084c67274cee4cdad (HEAD -> hotfix/task-108344, origin_dbackup/hotfix/task-108344) Author: aaa <aaammm.com> Date: Thu Mar 27 15:08:32 2025 0800Fix #108344: add bbbcommit …...

编程日记 2025/8/22 16:01:34

【HFP】蓝牙 HFP 协议状态通知机制研究

目录一、状态通知体系架构 1.1 核心功能矩阵 1.2 三层控制体系 1.3 角色分工 1.4 协议栈层级二、核心AT命令解析 2.1 ATCMER：指示器状态报告控制 2.2 ATBIA：指示器激活控制 2.3 CIEV：未请求结果码三、关键功能实现机制 3.1 注册…...

编程日记 2025/8/22 3:54:35

unity100天学习计划

以下是一个为期100天的Unity学习大纲，涵盖从零基础到独立开发完整游戏的全流程，结合理论、实践和项目实战，每天学习2-3小时：第一阶段：基础奠基（Day 1-20）目标：掌握Unity引擎基础与C#编程 Day 1-5：引擎入门安装Unity Hub和Unity Editor（LTS版本）熟悉Unity界面：S…...

编程日记 2025/8/24 5:14:01

STM32电机库电机控制特性

ST MC FW库提供FOC和六步法两种电机控制方式。这使得它能够驱动永磁同步电机（PMSM）和无刷直流电机（BLDC）。FOC 更适合 PMSM，而六步法更适合 BLDC 电机。该固件可以驱动内嵌式PMSM 和标贴式PMSM。 ST Motor Control 固件库提供以下功能： FOC SVPWM 生成：可配置的 PW…...

编程日记 2025/8/29 3:09:02

MySQL数据库 - 事务

事务此笔记参考黑马教程，仅学习使用，如有侵权，联系必删文章目录事务1. 事务简介2. 事务操作2.1 事务操作 - 方式一2.2 方式二代码实现 3. 事务四大特性（ACID）4. 并发事务问题5. 事务隔离级别代码实现总结 1. 事务…...

编程日记 2025/8/28 16:33:59

火山引擎旗下的产品

用户问的是火山引擎旗下的产品，我需要详细列出各个类别下的产品。首先，我得确认火山引擎有哪些主要业务领域，比如云计算、大数据、人工智能这些。然后，每个领域下具体有哪些产品呢？比如云计算方面可能有云服务器、容器…...

编程日记 2025/8/22 7:11:48

用 Python 从零构建异步回显服务器

简介让我们从 0 开始，搭建一个异步服务输出服务器。套接字套接字（socket），是不同计算机中实现通信的一种方式，你可以理解成一个接口，它会在客户端和服务端建立连接，一台发送数据&#xff…...

编程日记 2025/8/22 4:35:28

【3D文件】可爱小鹿3D建模，3D打印文件

【3D文件】可爱小鹿3D建模，3D打印文件免费下载，下载链接： 3D文件可爱小鹿3D建模，可爱小鹿建模仿真，小鹿仿真设计，3D打印文件，免费下载资源-CSDN文库资源下载： 3D文件可爱小鹿3D…...

编程日记 2025/8/29 0:38:42

RabbitMQ 优先级队列详解

本文是博主在记录使用 RabbitMQ 在执行业务时遇到的问题和解决办法，因此查阅了相关资料并做了以下记载，记录了优先级队列的机制和使用要点。本文为长文，详细介绍了相关的知识，可作为学习资料看。文章目录一、优先级队列介绍1、…...

编程日记 2025/8/26 15:31:59

串口通信简述

一.串口的特点 1.全双工异步通信全双工指通信双方可以同时进行数据的发送和接收操作。异步通信是指通信双方不使用共同的时钟信号来同步数据传输，而是通过特殊的信号或约定来标识数据的开始和结束 2.数据字长度可编程（8 位或 9 位） 不…...

编程日记 2025/8/27 17:18:49

【2025年五一数学建模竞赛A题】完整思路和代码

1.问题背景与重述 2.解题思路分析 2.1 问题一的分析问题一假设无人机以平行于水平面的方式飞行并投放物资，可以将物资的运动类比成平抛运动，由于物资的重量较大，因此不能简单的看成质点，还要考虑物资的重量。 2.1.1本题要求给…...

编程日记 2025/8/24 10:15:18

为了四季度的盈利，李斌的换人还在继续

李斌对蔚来和乐道人事调整还在继续。 4月10日，蔚来发布内部邮件宣布大量人事变动。蔚来方面： 原用户关系（UR）负责人沈泓因个人原因将离开公司。任命孙明担任用户关系（UR）负责人，向高级副总…...

编程日记 2025/8/25 9:43:17

Pytest 自动化测试框架详解

Pytest和Unittest测试框架的区别？ 如何区分这两者，很简单unittest作为官方的测试框架，在测试方面更加基础，并且可以再次基础上进行二次开发，同时在用法上格式会更加复杂；而pytest框架作为第三方框架&#x…...

编程日记 2025/8/29 2:55:59

sqli-labs靶场 less 9

文章目录 sqli-labs靶场less 9 时间盲注 sqli-labs靶场每道题都从以下模板讲解，并且每个步骤都有图片，清晰明了，便于复盘。 sql注入的基本步骤注入点注入类型字符型：判断闭合方式 （‘、"、’、“”&#xf…...

编程日记 2025/8/28 9:51:12

奇趣点播系统测试报告

1.项目简介本项目旨在搭建一个视频共享点播系统，服务器支持用户通过前端浏览器访问服务器，获取展示与观看和操作的界面，最终实现视频的上传以及观看和删改查等基础管理功能。让用户拥有良好的观看体验和分享视频的快捷方式，此外…...

编程日记 2025/8/23 12:56:04

空地机器人在复杂动态环境下，如何高效自主导航？

随着空陆两栖机器人(AGR)在应急救援和城市巡检等领域的应用范围不断扩大，其在复杂动态环境中实现自主导航的挑战也日益凸显。对此香港大学王俊铭基于阿木实验室P600无人机平台自主搭建了一整套空地两栖机器人，使用Prometheus开源框架完成算法的仿真验证与…...

编程日记 2025/8/28 4:00:32

01 - QEMU 初始化概览 - Init()

目录 1.初始化 - qemu_init() 1.1.基本设备 1.2.日志 1.3.模块信息 1.4.子系统 1.5.选项解析 - 阶段一 1.6.选项解析 - 阶段二 1.7.选项配置 1.8.Trace 1.9.主线程 1.10.CPU 时钟 1.11.其他设置 1.12.创建虚拟机 1.13.启动虚拟机 2.主线程 - qemu_main() 2.1.处…...

编程日记 2025/8/27 1:21:39

Vue3 使用ref

<button click"changeMsg">change</button> <div>{{ message }}</div>//接受一个内部值并返回一个响应式且可变的 ref 对象。ref 对象仅有一个 .value property，指向该内部值。 const message ref(hello world) const mum 1 co…...

编程日记 2025/8/21 17:05:03

React中点击事件写法的注意（this、箭头函数）

目录 ‌1、错误写法‌：onClick{this.acceptAlls()} ‌2、正确写法‌：onClick{this.acceptAlls}（不带括号） 总结方案1：构造函数绑定方案2：箭头函数包装方法（更简洁） 方案3&am…...

编程日记 2025/8/28 1:31:52

DeepSeek AI大模型：中国智能时代的“争气机“-AI生成

DeepSeek AI大模型：中国智能时代的"争气机" 当全球科技巨头在万亿参数竞赛中你追我赶时，一家中国公司悄然改写了游戏规则。DeepSeek AI最新发布的"探月"大模型不仅以中英双语能力打破技术壁垒，更用"动态脑区"设…...

编程日记 2025/8/24 6:01:29

Java老鼠迷宫（递归）---案例来自韩顺平老师讲Java

题目： 粉色圈圈是启动，红色方框是阻挡，蓝色五角星是出口，走到出口，老鼠winner 代码： public class test6 {public static void main(String[] args){//创建二维数组int[][] map new int[8][7];// 最外围都…...

编程日记 2025/8/29 5:24:28

Python大数据视频教程

概述最新整理的Python大数据视频教程已出，需要学习的小伙伴抓紧了。课程亮点： ❶ 编程基石：从Python基础到高阶函数式编程，用代码驯服数据 ❷ 数据魔法：SQL进阶ETL实战，Pandas玩转百万级数据分析 ❸ 分…...

编程日记 2025/8/27 13:00:54

Java工厂模式解析：灵活对象创建的实践指南

精心整理了最新的面试资料和简历模板，有需要的可以自行获取点击前往百度网盘获取点击前往夸克网盘获取一、模式定义与分类工厂模式（Factory Pattern）是创建型设计模式的核心成员之一，主要解决对象创建过程中的灵活性问题。根…...

编程日记 2025/8/20 14:24:44

PDF转换格式失败？原因及解决方法全解析

在日常工作中，我们经常会遇到将PDF转换为Word、Excel、PPT等格式的需求。有时候以为一键转换就能搞掂，没想到却转换失败。到底问题出在哪？别急，我们可以看看是否以下几个问题引起的，找到解决问题的关键！ 原…...

编程日记 2025/8/28 9:44:19

《轨道力学讲义》——第五讲：摄动理论基础

第五讲：摄动理论基础引言在实际的航天任务中，我们很少能够使用理想的二体问题来精确描述航天器的运动。地球的非球形性、大气阻力、太阳辐射压以及第三天体引力等各种因素都会对航天器轨道产生偏离理想轨道的影响。这些额外的力被称为"摄动力&q…...

编程日记 2025/8/26 10:56:23

【NLP】23.小结：选择60题

Question 1: What does the fixed lookup table in traditional NLP represent? A. A table of one‐hot vectors B. A table of pre‐trained dense word embeddings C. A dictionary of word definitions D. A table of n-gram counts Answer (中文): 答案选 B。传统NLP中“…...

编程日记 2025/8/29 0:09:11

C++核心机制-this 指针传递与内存布局分析

示例代码 #include<iostream> using namespace std;class A { public:int a;A() {printf("A:A()的this指针：%p!\n", this);}void funcA() {printf("A:funcA()的this指针：%p!\n", this);} };class B { public:int b;B() {prin…...

编程日记 2025/8/29 5:59:13

python asyncio 的基本使用

1、引言 asyncio 是 Python 标准库中的一个库，提供了对异步 I/O 、事件循环、协程和任务等异步编程模型的支持。 asyncio 文档 2、进程、线程、协程线程线程是操作系统调度的基本单位，同一个进程中的多个线程共享相同的内存空间。线程之间的切换由操…...

编程日记 2025/8/22 3:54:35

大模型中提到的分词器是什么

分词器在大模型中的核心解析 1. 分词器的定义与基本作用分词器（Tokenizer）是自然语言处理（NLP）中的核心组件，负责将原始文本拆分为模型可处理的离散单元（称为Token）。其核心功能包括：文本离散化：将连续字符序列转化为数字序列，作为模型的输入。语义单元提取：通过…...

编程日记 2025/8/25 23:40:09

Android中使用BuildConfig.DEBUG无法找到的解决方法

BuildConfig是Android构建工具自动生成的一个类，通常位于应用的包名下，包含一些构建相关的常量，比如DEBUG标志、应用ID、版本信息等。遇到的问题可能有几种情况。首先，可能项目没有正确构建，导致BuildConfig没有被生…...

编程日记 2025/8/28 5:07:16

Python（14）Python内置函数完全指南：从基础使用到高阶技巧

目录背景介绍一、内置函数全景分类1. 数据类型转换（15个）2. 数学运算（12个）3. 迭代处理（9个）4. 对象操作（11个）5. 输入输出（4个） 二、高阶函数应用场景1. en…...

编程日记 2025/8/27 15:22:21

echo命令，tail命令，反引号，重定向符

echo命令： 作用：在命令行中输出指定的内容，相当于print语句语法：echo 指定的内容（当内容包含空格和特殊字符的时候，语句很复杂的时候，最好用双引号括起来） tail命令：…...

编程日记 2025/8/29 1:14:05

集成学习介绍

集成学习（Ensemble Learning）是一种机器学习范式，它通过组合多个模型的预测来提高整体模型的性能。单一模型可能在某些方面表现不佳或具有较高的偏差或方差，而集成方法能够通过结合多个模型的优点来克服这些问题，从而提…...

编程日记 2025/8/22 16:01:46

【CUDA】ubuntu环境下安装cuda

写在前面软硬件匹配问题 ：如老显卡安装ubuntu24, 会发现适合显卡的cuda不适合ubuntu24, 适合ubuntu24的cuda不适合显卡，因此安装ubuntu系统前，务必查明 ：当前设备的显卡支持的cuda，支持哪些ubuntu版本下面的三个问题…...

编程日记 2025/8/28 4:11:28

进程间通信-信号量

消息队列（Message Queue）是一种在不同组件或进程间进行异步通信的机制，它允许应用程序以松耦合的方式交换消息。消息队列就像一个缓冲区，发送者将消息放入队列，接收者从队列中取出消息进行处理。以下为你详细介绍消息队…...

编程日记 2025/8/24 18:59:29

Ubuntu 22.04安装MySQL ： Qwen2.5 模型对话数据收集与微调教程

在Ubuntu 22.04安装MySQL的教程请点击下方链接进行参考：点击这里获取MySQL安装教程今天将为大家带来如何微调Qwen2.5模型并连接数据库进行对话的教程。快跟着小编一起试试吧~ 1 大模型 Qwen2.5 微调步骤 1.1 从 github 仓库克隆项目克隆存储库：#拉取代码 git clo…...

编程日记 2025/8/28 1:32:07

L1-8 新年烟花

单位杭州百腾教育科技有限公司新年来临，许多地方会举行烟花庆典庆祝。小 C 也想参加庆典，但不幸的是跟他一个想法的人实在太多，活动场地全是人人人人人人人人人…… 活动场地可视作一个 NM 的矩阵，其中有一些格子是空的&#…...

编程日记 2025/8/23 16:11:21

OpenCV中的轮廓检测方法详解

文章目录引言一、什么是轮廓？二、OpenCV中的轮廓检测基础1. 基本步骤2. findContours函数详解三、轮廓检索模式四、轮廓近似方法五、轮廓特征分析1. 轮廓面积2. 轮廓周长/弧长3. 轮廓近似（多边形拟合）4. 凸包5. 边界矩形6. 最小闭合圆7. 拟…...

编程日记 2025/8/26 7:13:24

AIP-231 批量方法：Get

编号231原文链接AIP-231: Batch methods: Get状态批准创建日期2019-06-18更新日期2019-06-18 一些API允许用户获取一组特定资源在一个时间点（例如使用读事务）的状态。批量获取方法提供了这个功能。指南 API 可以按照以下模式支持批量获取&#xff1…...

编程日记 2025/8/22 3:54:38

人工智能基础-matplotlib基础

绘制图形 import numpy as np x np.linspace(0, 10, 100) y np.sin(x) import matplotlib as mpl import matplotlib.pyplot as plt plt.plot(x, y) plt.show()绘制多条曲线 siny y.copy() cosy np.cos(x) plt.plot(x, siny) plt.plot(x, cosy) plt.show()设置线条颜色 …...

编程日记 2025/8/23 18:09:43