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

Vue.js 新的生命周期钩子:`onMounted`, `onUpdated` 等

Vue.js 新的生命周期钩子:onMounted, onUpdated

今天我们来聊聊 Vue 3 中的生命周期钩子,特别是 onMountedonUpdated 等。如果你对如何在 Vue 3 的组合式 API(Composition API)中使用这些钩子感到困惑,那么这篇文章将为你解答。

什么是生命周期钩子?

生命周期钩子是 Vue 在组件生命周期的特定阶段自动调用的函数。它们允许开发者在组件的创建、挂载、更新和销毁等阶段执行特定的操作。

Vue 3 中的生命周期钩子

在 Vue 3 中,随着组合式 API 的引入,生命周期钩子的使用方式也有所变化。以下是常用的生命周期钩子及其对应的调用时机:

  • onBeforeMount:在组件挂载到 DOM 之前调用。
  • onMounted:在组件挂载到 DOM 之后调用。
  • onBeforeUpdate:在组件更新之前调用。
  • onUpdated:在组件更新之后调用。
  • onBeforeUnmount:在组件卸载之前调用。
  • onUnmounted:在组件卸载之后调用。

如何在组合式 API 中使用生命周期钩子?

在组合式 API 中,这些钩子函数需要在 setup() 函数中同步调用。让我们通过一个示例来了解如何使用这些钩子。

示例:

<template><div><p>{{ message }}</p><button @click="updateMessage">更新消息</button></div>
</template><script setup>
import { ref, onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onBeforeUnmount, onUnmounted } from 'vue';const message = ref('Hello, Vue!');const updateMessage = () => {message.value = 'Hello, World!';
};onBeforeMount(() => {console.log('组件即将挂载');
});onMounted(() => {console.log('组件已挂载');
});onBeforeUpdate(() => {console.log('组件即将更新');
});onUpdated(() => {console.log('组件已更新');
});onBeforeUnmount(() => {console.log('组件即将卸载');
});onUnmounted(() => {console.log('组件已卸载');
});
</script>

在这个示例中,我们定义了一个简单的组件,并在 setup() 函数中使用了多个生命周期钩子来监听组件的不同生命周期阶段。每个钩子都会在相应的阶段打印一条消息到控制台。

注意事项

  • 调用时机:所有的生命周期钩子函数必须在 setup() 函数中同步调用。
  • 服务端渲染:某些钩子函数(如 onMountedonUpdatedonUnmounted)在服务端渲染期间不会被调用。
  • 避免状态修改:不要在 onUpdated 钩子中修改组件的状态,这可能会导致无限的更新循环。

总结

在 Vue 3 的组合式 API 中,生命周期钩子的使用变得更加直观和灵活。通过在 setup() 函数中导入并调用相应的钩子函数,我们可以轻松地在组件的不同生命周期阶段执行自定义逻辑。

相关文章:

Vue.js 新的生命周期钩子:`onMounted`, `onUpdated` 等

Vue.js 新的生命周期钩子&#xff1a;onMounted, onUpdated 等 今天我们来聊聊 Vue 3 中的生命周期钩子&#xff0c;特别是 onMounted、onUpdated 等。如果你对如何在 Vue 3 的组合式 API&#xff08;Composition API&#xff09;中使用这些钩子感到困惑&#xff0c;那么这篇文…...

OpenCV:闭运算

目录 1. 简述 2. 用膨胀和腐蚀实现闭运算 2.1 代码示例 2.2 运行结果 3. 闭运算接口 3.1 参数详解 3.2 代码示例 3.3 运行结果 4. 闭运算的应用场景 5. 注意事项 相关阅读 OpenCV&#xff1a;图像的腐蚀与膨胀-CSDN博客 OpenCV&#xff1a;开运算-CSDN博客 1. 简述…...

Android 音视频编解码 -- MediaCodec

引言 如果我们只是简单玩一下音频、视频播放&#xff0c;那么使用 MediaPlayer SurfaceView 播放就可以了&#xff0c;但如果想加个水印&#xff0c;加点其他特效什么的&#xff0c;那就不行了&#xff1b; 学习 Android 自带的硬件码类 – MediaCodec。 MediaCodec 介绍 Med…...

移动互联网用户行为习惯哪些变化,对小程序的发展有哪些积极影响

一、碎片化时间利用增加 随着生活节奏的加快&#xff0c;移动互联网用户的碎片化时间越来越多。在等公交、排队、乘坐地铁等间隙&#xff0c;用户更倾向于使用便捷、快速启动的应用来满足即时需求。小程序正好满足了这一需求&#xff0c;无需下载安装&#xff0c;随时可用&…...

数据分析系列--②RapidMiner导入数据和存储过程

一、下载数据 二、导入数据 1. 在本地计算机中创建3个文件夹 2. 从本地选择.csv或.xlsx 三、界面说明 四、存储过程 1.保存 Congratulations, you are done. 一、下载数据 点击下载AssociationAnalysisData.xlsx数据集 二、导入数据 1. 在本地计算机中创建3个文件夹 2. 从…...

Prometheus 中的 Exporter

在 Prometheus 生态系统中,Exporter 扮演着至关重要的角色,它们负责从不同的服务或系统中收集和暴露度量数据。本文将详细介绍 Exporter 的概念、类型以及如何有效使用它们将 Prometheus 集成到各种系统中进行监控。 什么是 Exporter? Exporter 是一段软件,它从应用程序或…...

从 HTTP/1.1 到 HTTP/3:如何影响网页加载速度与性能

一、前言 在最近使用Apipost时&#xff0c;突然注意到了http/1.1和http/2&#xff0c;如下图&#xff1a; 在我根深蒂固的记忆中&#xff0c;对于http的理解还停留在TCP协议、三次握手。由于我的好奇心&#xff0c;于是触发了我被动“开卷”&#xff0c;所以有了这篇文章&…...

GenAI 在金融服务领域的应用:2025 年的重点是什么

作者&#xff1a;来自 Elastic Karen Mcdermott GenAI 不是魔法 我最近参加了 ElasticON&#xff0c;我们与纽约 Elastic 社区一起度过了一天&#xff0c;讨论了使用检索增强生成 (retrieval augmented generation - RAG) 为大型语言模型 (large language models - LLMs) 提供…...

小红书文案生成器(基于openai API和streamlit)

prompt_text.py&#xff1a; # 专门用来放提示文本&#xff08;系统提示、用户提示&#xff09;system_prompt_text """ 你是小红书爆款写作专家&#xff0c;请你遵循以下步骤进行创作&#xff1a;首先产出5个标题&#xff08;包含适当的emoji表情&#xff09…...

Spring AOP 入门教程:基础概念与实现

目录 第一章&#xff1a;AOP概念的引入 第二章&#xff1a;AOP相关的概念 1. AOP概述 2. AOP的优势 3. AOP的底层原理 第三章&#xff1a;Spring的AOP技术 - 配置文件方式 1. AOP相关的术语 2. AOP配置文件方式入门 3. 切入点的表达式 4. AOP的通知类型 第四章&#x…...

力扣面试150 快乐数 循环链表找环 链表抽象 哈希

Problem: 202. 快乐数 &#x1f469;‍&#x1f3eb; 参考题解 Code public class Solution {public int squareSum(int n) {int sum 0;while(n > 0){int digit n % 10;sum digit * digit;n / 10;}return sum;}public boolean isHappy(int n) {int slow n, fast squa…...

【实战篇章】深入探讨:服务器如何响应前端请求及后端如何查看前端提交的数据

文章目录 深入探讨&#xff1a;服务器如何响应前端请求及后端如何查看前端提交的数据一、服务器如何响应前端请求HTTP 请求生命周期全解析1.前端发起 HTTP 请求&#xff08;关键细节强化版&#xff09;2. 服务器接收请求&#xff08;深度优化版&#xff09; 二、后端如何查看前…...

《AI大模型开发笔记》DeepSeek技术创新点

一、DeepSeek横空出世 DeepSeek V3 以颠覆性技术架构创新强势破局&#xff01;革命性的上下文处理机制实现长文本推理成本断崖式下降&#xff0c;综合算力需求锐减90%&#xff0c;开启高效 AI 新纪元&#xff01; 最新开源的 DeepSeek V3模型不仅以顶尖基准测试成绩比肩业界 …...

【大模型LLM面试合集】大语言模型架构_MHA_MQA_GQA

MHA_MQA_GQA 1.总结 在 MHA&#xff08;Multi Head Attention&#xff09; 中&#xff0c;每个头有自己单独的 key-value 对&#xff1b;标准的多头注意力机制&#xff0c;h个Query、Key 和 Value 矩阵。在 MQA&#xff08;Multi Query Attention&#xff09; 中只会有一组 k…...

实战技巧:如何快速增加网站的收录页面?

本文转自&#xff1a;百万收录网 原文链接&#xff1a;https://www.baiwanshoulu.com/43.html 要快速增加网站的收录页面&#xff0c;可以从以下几个方面进行实战优化&#xff1a; 一、内容优化 高质量原创内容 确保网站内容具备高质量与原创性&#xff0c;满足搜索引擎对独…...

20-30 五子棋游戏

20-分析五子棋的实现思路_哔哩哔哩_bilibili20-分析五子棋的实现思路是一次性学会 Canvas 动画绘图&#xff08;核心精讲50个案例&#xff09;2023最新教程的第21集视频&#xff0c;该合集共计53集&#xff0c;视频收藏或关注UP主&#xff0c;及时了解更多相关视频内容。https:…...

PYH与MAC的桥梁MII/MIIM

在学习车载互联网时&#xff0c;看到了一句话&#xff0c;Processor通过DMA直接存储访问与MAC之间进行数据的交互&#xff0c;MAC通过MII介质无关接口与PHY之间进行数据的交互。常见的以太网硬件结构是&#xff0c;将MAC集成进Processor芯片&#xff0c;将PHY留在Processor片外…...

pytorch基于 Transformer 预训练模型的方法实现词嵌入(tiansz/bert-base-chinese)

以下是一个完整的词嵌入&#xff08;Word Embedding&#xff09;示例代码&#xff0c;使用 modelscope 下载 tiansz/bert-base-chinese 模型&#xff0c;并通过 transformers 加载模型&#xff0c;获取中文句子的词嵌入。 from modelscope.hub.snapshot_download import snaps…...

探秘 TCP TLP:从背景到实现

回家的路上还讨论了个关于 TCP TLP 的问题&#xff0c;闲着无事缕一缕。本文内容参考自 Tail Loss Probe (TLP): An Algorithm for Fast Recovery of Tail Losses 以及 Linux 内核源码。 TLP&#xff0c;先说缘由。自 TCP 引入 Fast retrans 机制就是为了尽力避免 RTO&#xf…...

MCU内部ADC模块误差如何校准

本文章是笔者整理的备忘笔记。希望在帮助自己温习避免遗忘的同时&#xff0c;也能帮助其他需要参考的朋友。如有谬误&#xff0c;欢迎大家进行指正。 一、ADC误差校准引言 MCU 片内 ADC 模块的误差总包括了 5 个静态参数 (静态失调&#xff0c;增益误差&#xff0c;微分非线性…...

国产之光DeepSeek架构理解与应用分析

目录 初步探索DeepSeek的设计 一、核心架构设计 二、核心原理与优化 三、关键创新点 四、典型应用场景 五、与同类模型的对比优势 六、未来演进方向 从投入行业生产的角度看 一、DeepSeek的核心功能扩展 二、机械电子工程产业中的具体案例 1. 预测性维护&#xff08;Predictive…...

群晖NAS安卓Calibre 个人图书馆

docker 下载镜像johngong/calibre-web&#xff0c;安装之 我是本地的/docker/xxx/metadata目录 映射到 /usr/local/calibre-web/app/cps/metadata_provider CALIBREDB_OTHER_OPTION 删除 CALIBRE_SERVER_USER calibre_server_user 缺省用户名口令 admin admin123 另外有个N…...

openRv1126 AI算法部署实战之——Tensorflow模型部署实战

在RV1126开发板上部署Tensorflow算法&#xff0c;实时目标检测RTSP传输。视频演示地址 rv1126 yolov5 实时目标检测 rtsp传输_哔哩哔哩_bilibili ​ 一、准备工作 从官网下载tensorflow模型和数据集 手动在线下载&#xff1a; https://github.com/tensorflow/models/b…...

HTML特殊符号的使用示例

目录 一、基本特殊符号的使用 1、空格符号&#xff1a; 2、小于号 和 大于号&#xff1a; 3、引号&#xff1a; 二、版权、注册商标符号的使用 1、版权符号&#xff1a;© 2、注册商标符号&#xff1a; 三、数学符号的使用 四、箭头符号的使用 五、货币符号的使用…...

如何对系统调用进行扩展?

扩展系统调用是操作系统开发中的一个重要任务。系统调用是用户程序与操作系统内核之间的接口,允许用户程序执行内核级操作(如文件操作、进程管理、内存管理等)。扩展系统调用通常包括以下几个步骤: 一、定义新系统调用 扩展系统调用首先需要定义新的系统调用的功能。系统…...

【MFC】C++所有控件随窗口大小全自动等比例缩放源码(控件内字体、列宽等未调整) 20250124

MFC界面全自动等比例缩放 1.在初始化里 枚举每个控件记录所有控件rect 2.在OnSize里&#xff0c;根据当前窗口和之前保存的窗口的宽高求比例x、y 3.枚举每个控件&#xff0c;根据比例x、y调整控件上下左右,并移动到新rect struct ControlInfo {CWnd* pControl;CRect original…...

前端 | 深入理解Promise

1. 引言 JavaScript 是一种单线程语言&#xff0c;这意味着它一次仅能执行一个任务。为了处理异步操作&#xff0c;JavaScript 提供了回调函数&#xff0c;但是随着项目处理并发任务的增加&#xff0c;回调地狱 (Callback Hell) 使异步代码很难维护。为此&#xff0c;ES6带来了…...

【视频+图文讲解】HTML基础2-html骨架与基本语法

图文教程 基本骨架 举个例子&#xff0c;下图所展示的为html的源代码 -!DOCTYPE&#xff1a;表示文档类型&#xff08;后边写的html表示文档类型是html&#xff09;&#xff1b;其中“&#xff01;”表示声明 只要是加这个声明标签的&#xff0c;浏览器就会把下边的源代码当…...

LabVIEW在电机自动化生产线中的实时数据采集与生产过程监控

在电机自动化生产线中&#xff0c;实时数据采集与生产过程监控是确保生产效率和产品质量的重要环节。LabVIEW作为一种强大的图形化编程平台&#xff0c;可以有效实现数据采集、实时监控和自动化控制。详细探讨如何利用LabVIEW实现这一目标&#xff0c;包括硬件选择、软件架构设…...

《深入理解HTTP交互与数据监控:完整流程与优化实践》

文章目录 &#x1f310; 全链路解析&#xff1a;HTTP请求响应与数据可视化监控一、HTTP请求响应全流程解析1. 全链路交互流程图2.关键技术实现2.1 前端请求构造&#xff08;ES6语法示例&#xff09;2.2 服务端处理架构&#xff08;Node.js/Express&#xff09; 二、数据可视化监…...

pytorch使用SVM实现文本分类

人工智能例子汇总&#xff1a;AI常见的算法和例子-CSDN博客 完整代码&#xff1a; import torch import torch.nn as nn import torch.optim as optim import jieba import numpy as np from sklearn.model_selection import train_test_split from sklearn.feature_extract…...

Recommender Systems with Large Models

一、引言 信息爆炸时代&#xff0c;用户面临信息过载&#xff0c;传统推荐系统依赖经典算法&#xff0c;难以满足需求。大模型基于深度学习&#xff0c;经大规模预训练&#xff0c;具备强大能力&#xff0c;能实现更精准推荐&#xff0c;为推荐系统发展开辟新路径。 二、大模…...

团体程序设计天梯赛-练习集——L1-028 判断素数

前言 一道10分的题目&#xff0c;相对来说比较简单&#xff0c;思考的时候要仔细且活跃&#xff0c;有时候在写代码的时候一些代码的出现很多余&#xff0c;并且会影响最后的结果 L1-028 判断素数 本题的目标很简单&#xff0c;就是判断一个给定的正整数是否素数。 输入格式…...

SCRM开发为企业提供全面客户管理解决方案与创新实践分享

内容概要 在当今的商业环境中&#xff0c;客户关系管理&#xff08;CRM&#xff09;变得越来越重要。而SCRM&#xff08;社交客户关系管理&#xff09;作为一种新兴的解决方案&#xff0c;正在帮助企业彻底改变与客户的互动方式。快鲸SCRM是一个引人注目的工具&#xff0c;它通…...

Axure PR 9 旋转效果 设计交互

大家好&#xff0c;我是大明同学。 这期内容&#xff0c;我们将学习Axure中的旋转效果设计与交互技巧。 旋转 创建旋转效果所需的元件 1.打开一个新的 RP 文件并在画布上打开 Page 1。 2.在元件库中拖出一个按钮元件。 创建交互 创建按钮交互状态 1.选中按钮元件&#xf…...

自定义数据集 使用pytorch框架实现逻辑回归并保存模型,然后保存模型后再加载模型进行预测,对预测结果计算精确度和召回率及F1分数

代码&#xff1a; import torch import numpy as np import torch.nn as nn from sklearn.metrics import accuracy_score, precision_score, recall_score, f1_score# 定义数据&#xff1a;x_data 是特征&#xff0c;y_data 是标签&#xff08;目标值&#xff09; data [[-0…...

Linux02——Linux的基本命令

目录 ls 常用选项及功能 综合示例 注意事项 cd和pwd命令 cd命令 pwd命令 相对路径、绝对路径和特殊路径符 特殊路径符号 mkdir命令 1. 功能与基本用法 2. 示例 3. 语法与参数 4. -p选项 touch-cat-more命令 1. touch命令 2. cat命令 3. more命令 cp-mv-rm命…...

MySQL数据库(二)- SQL

目录 ​编辑 一 DDL (一 数据库操作 1 查询-数据库&#xff08;所有/当前&#xff09; 2 创建-数据库 3 删除-数据库 4 使用-数据库 (二 表操作 1 创建-表结构 2 查询-所有表结构名称 3 查询-表结构内容 4 查询-建表语句 5 添加-字段名数据类型 6 修改-字段数据类…...

Docker自定义镜像

Dockerfile自定义镜像 一&#xff1a;镜像结构 镜像是将应用程序及其需要的系统函数库、环境、配置、依赖打包而成。 我们以MySQL为例&#xff0c;来看看镜像的组成结构&#xff1a; 简单来说&#xff0c;镜像就是在系统函数库、运行环境基础上&#xff0c;添加应用程序文件、…...

网络协议基础

文章目录 前言一、网络协议分层1.应用层2.传输层3.网络层4.数据链路层5.物理层 二、图解IP1.IP基本认识&#xff08;1&#xff09;IP的作用&#xff08;2&#xff09;IP与MAC的关系 2.IP地址的基础知识&#xff08;1&#xff09;IP地址的定义&#xff08;2&#xff09;IP地址的…...

c语言进阶(简单的函数 数组 指针 预处理 文件 结构体)

c语言补充 格式 void函数头 {} 中的是函数体 sum函数名 &#xff08;&#xff09; 参数表 #include <stdio.h>void sum(int begin, int end) {int i;int sum 0;for (i begin ; i < end ; i) {sum i;}printf("%d到%d的和是%d\n", begin, end, sum); …...

Pytorch框架从入门到精通

目录 一、Tensors 1.1 初始化一个Tensor 1&#xff09;赋值初始化 2&#xff09;从 NumPy 数组初始化 3&#xff09;从另一个张量 4&#xff09;使用随机值或常量值 1.2 Tensor 的属性 1.3 对 Tensor 的操作 1.3.1 总体介绍 1.3.2 索引和切片 1.3.3 算术运算 矩阵乘…...

Vue.js组件开发-实现全屏图片文字缩放切换特效

使用 Vue 实现全屏图片文字缩放切换特效 步骤 创建 Vue 项目&#xff1a;使用 Vue CLI 来快速创建一个新的 Vue 项目。设计组件结构&#xff1a;创建一个包含图片和文字的组件&#xff0c;并实现缩放和切换效果。实现样式&#xff1a;使用 CSS 来实现全屏显示、缩放和切换动画…...

在 WSL2 中重启 Ubuntu 实例

在 WSL2 中重启 Ubuntu 实例&#xff0c;可以按照以下步骤操作&#xff1a; 方法 1: 使用 wsl 命令 关闭 Ubuntu 实例: 打开 PowerShell 或命令提示符&#xff0c;运行以下命令&#xff1a; wsl --shutdown这会关闭所有 WSL2 实例。 重新启动 Ubuntu: 再次打开 Ubuntu&#x…...

Flutter 新春第一弹,Dart 宏功能推进暂停,后续专注定制数据处理支持

在去年春节&#xff0c;Flutter 官方发布了宏&#xff08;Macros&#xff09;编程的原型支持&#xff0c; 同年的 5 月份在 Google I/O 发布的 Dart 3.4 宣布了宏的实验性支持&#xff0c;但是对于 Dart 内部来说&#xff0c;从启动宏编程实验开始已经过去了几年&#xff0c;但…...

Signature

打开得到加密脚本&#xff1a; import ecdsa import randomdef ecdsa_test(dA,k):sk ecdsa.SigningKey.from_secret_exponent(secexpdA,curveecdsa.SECP256k1)sig1 sk.sign(databHi., kk).hex()sig2 sk.sign(databhello., kk).hex()r1 int(sig1[:64], 16)s1 int(sig1[64:…...

UE求职Demo开发日志#18 数据表获取物品信息,添加背包模块

1 把获取物品信息改为读取数据表 先创建结构&#xff0c;暂时有这几个属性&#xff1a; USTRUCT(BlueprintType) struct ARPG_CPLUS_API FMyItemData:public FTableRowBase {GENERATED_USTRUCT_BODY()UPROPERTY(EditAnywhere, BlueprintReadWrite)int ItemId;//物品Id&#x…...

neo4j-community-5.26.0 create new database

1.edit neo4j.conf 把 # The name of the default database initial.dbms.default_databasehonglouneo4j # 写上自己的数据库名称 和 # Name of the service #5.0 server.windows_service_nameneo4j #4.0 dbms.default_databaseneo4j #dbms.default_databaseneo4jwind serve…...

项目中用的网关Gateway及SpringCloud

在现代微服务架构中&#xff0c;网关&#xff08;Gateway&#xff09;起到了至关重要的作用。它不仅负责路由请求&#xff0c;还提供了统一的认证、授权、负载均衡、限流等功能。Spring Cloud Gateway 是 Spring Cloud 生态系统中的一个重要组件&#xff0c;专门为微服务架构提…...

​《Ollama Python 库​》

Ollama Python 库 Ollama Python 库提供了将 Python 3.8 项目与 Ollama 集成的最简单方法。 先决条件 应该安装并运行 Ollama拉取一个模型以与库一起使用&#xff1a;例如ollama pull <model>ollama pull llama3.2 有关可用模型的更多信息&#xff0c;请参阅 Ollama.com。…...