Vue3学习（组合式API——生命周期函数基础）
目录
一、Vue3组合式API中的生命周期函数。
（1）各阶段生命周期涉及函数简单介绍。
<1>创建挂载阶段的生命周期函数。
<2>更新阶段的生命周期函数。
<3>卸载阶段的生命周期函数。
<4>错误处理的生命周期函数。
（2）Vue3生命周期API——选项式与组合式对比。
Vue2 选项式、Vue3 选项式/组合式的卸载阶段生命周期API对比。
（3）以Vue3组合式 onMounted 生命周期函数代码示例。
<1>beforeCreate与created。(setup)
<2>onMounted。
一、Vue3组合式API中的生命周期函数。
（1）各阶段生命周期涉及函数简单介绍。
- Vue3 中组合式 API 的生命周期函数，是在组件不同阶段执行特定操作的回调函数。通过 “onXXX” 形式实现，在 setup() 内调用。
<1>创建挂载阶段的生命周期函数。
- onBeforeMount：组件挂载到 DOM 前触发。可初始化非响应式数据、设置全局状态。
- onMounted：组件挂载到 DOM 后触发。常用于 DOM 操作、获取数据、启动计时器等。
<2>更新阶段的生命周期函数。
- onBeforeUpdate：响应式数据变化，组件更新前触发。可用于比较数据变化、执行更新前逻辑。
- onUpdated：组件更新完成后触发。可进行 DOM 操作、更新 UI。
<3>卸载阶段的生命周期函数。
- onBeforeUnmount：组件卸载前触发。适合做清理工作，如移除事件监听器等。
- onUnmounted：组件卸载后触发。用于执行最终清理，像销毁定时器、释放资源等。
<4>错误处理的生命周期函数。
- onErrorCaptured：捕获子组件运行时错误。可处理错误、给出错误提示 。
（2）Vue3生命周期API——选项式与组合式对比。
选项式生命周期API 组合式生命周期API beforeCreate/created setup beforeMount onBeforeMount mounted onMounted beforeUpdate onBeforeUpdate updated onUpdated beforeUnmount onBeforeUnmount unmounted onUnmounted
- 注意：Vue3中是支持选项式API的。不过一般使用组合式API。逻辑方便复用、维护。
Vue2 选项式、Vue3 选项式/组合式的卸载阶段生命周期API对比。
Vue2 选项式 API Vue3 选项式 API Vue3 组合式 API 作用场景 beforeDestroy beforeUnmount onBeforeUnmount 组件卸载前的清理工作 destroyed unmounted onUnmounted 组件卸载后的最终清理
（3）以Vue3组合式 onMounted 生命周期函数代码示例。
<1>beforeCreate与created。(setup)
- 代码示例。
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title> </head><body><div id="app"></div><script type="module">import { createApp, ref } from './vue.esm-browser.js'createApp({setup() {//beforeCreate、created相关代码一律放在setup中const getList = () => {//模拟发请求setTimeout(() => {console.log('发送请求，获取数据List')}, 2000)}getList()return {}}}).mount('#app')</script> </body></html>
- 效果。
<2>onMounted。
- 代码示例。
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title> </head><body><div id="app"></div><script type="module">import { createApp, ref, onMounted } from './vue.esm-browser.js'createApp({setup() {//beforeCreate、created相关代码一律放在setup中const getList = () => {//模拟发请求setTimeout(() => {console.log('发送请求，获取数据List')}, 2000)}//一进入页面的请求getList()//假设某些代码需在mounted生命周期执行onMounted(() => {console.log('mounted生命周期函数')})return {}}}).mount('#app')</script> </body></html>
- 效果。
- 生命周期函数写成函数的调用方式，可以多次进行调用。（可写不同的逻辑，不会冲突且按照先后执行）
- 代码示例。
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title> </head><body><div id="app"></div><script type="module">import { createApp, ref, onMounted } from './vue.esm-browser.js'createApp({setup() {//beforeCreate、created相关代码一律放在setup中const getList = () => {//模拟发请求setTimeout(() => {console.log('发送请求，获取数据List')}, 2000)}//一进入页面的请求getList()//假设某些代码需在mounted生命周期执行onMounted(() => {console.log('mounted生命周期函数，逻辑1')})//写成函数的调用方式，可以调用多次。// 调用一次函数提供一个钩子，不会冲突，按照先后进行执行onMounted(() => {console.log('mounted生命周期函数，逻辑2')})return {}}}).mount('#app')</script> </body></html>
- 效果。
相关文章：
Vue3学习（组合式API——生命周期函数基础）
目录 一、Vue3组合式API中的生命周期函数。 （1）各阶段生命周期涉及函数简单介绍。 <1>创建挂载阶段的生命周期函数。 <2>更新阶段的生命周期函数。 <3>卸载阶段的生命周期函数。 <4>错误处理的生命周期函数。 （2&…...
全面指南：Xinference大模型推理框架的部署与使用
全面指南：Xinference大模型推理框架的部署与使用 Xinference（Xorbits Inference）是一个功能强大的分布式推理框架，专为简化各种AI模型的部署和管理而设计。本文将详细介绍Xinference的核心特性、版本演进，并提供多种部署方式的详细指南，包括本地部署、Docker-Compose部署…...
计量——检验与代理变量
1.非嵌套模型的检验 1Davidson-Mackinnon test 判断哪个模型好 log（y）β0β1x1β2x2β3x3u log（y）β0β1log（x1）β2log（x2）β3log（x3）u 1.对logÿ…...
Cocos Creator 3.8.5 构建依赖环境配置文档
Cocos Creator 3.8.5 构建依赖环境配置文档 文章目录 Cocos Creator 3.8.5 构建依赖环境配置文档✅ 构建依赖汇总表✅ 构建平台配置说明👉 Windows 构建👉 Android 构建 ✅ 推荐构建环境组合（稳定）✅ 常见问题提示 适用于打包 An…...
实验五：以太网UDP全协议栈的实现（通过远程实验系统）
文章目录 FPGA以太网：从ARP到UDP的完整协议栈一、引言二、核心模块详解1. ARP协议处理模块1.1 `arp_cache`：ARP缓存模块1.2 `arp_tx`：ARP请求与应答发送模块1.3 `arp_rx`：ARP接收与解析模块2. MAC层处理模块2.1 `mac_layer`：MAC层顶层模块2.2 `mac_tx_mode`：MAC发送模式选…...
HTML-实战之 百度百科（影视剧介绍）
本系列可作为前端学习系列的笔记，代码的运行环境是在HBuilder中，小编会将代码复制下来，大家复制下来就可以练习了，方便大家学习。 系列文章目录 HTML-1.1 文本字体样式-字体设置、分割线、段落标签、段内回车以及特殊符号 HTML…...
了解光学影像
本文来源 ： 腾讯元宝 光学影像是一种通过光学技术捕捉、记录和处理图像的技术，广泛应用于医学、工业、安防、科研等多个领域。以下是关于光学影像的详细介绍： 1. 基本原理 光学影像基于光的传播、反射、折射和散射等物理现象。通过…...
计算机视觉---目标追踪（Object Tracking）概览
一、核心定义与基础概念 1. 目标追踪的定义 定义：在视频序列或连续图像中，对一个或多个感兴趣目标（如人、车辆、物体等）的位置、运动轨迹进行持续估计的过程。核心任务：跨帧关联目标，解决“同一目标在不同…...
Weblogic SSRF漏洞复现（CVE-2014-4210）【vulhub靶场】
漏洞概述： Weblogic中存在一个SSRF漏洞，利用该漏洞可以发送任意HTTP请求，进而攻击内网中redis、fastcgi等脆弱组件。 漏洞形成原因： WebLogic Server 的 UDDI 组件（uddiexplorer.war）中的 SearchPublicR…...
fakeroot 在没有超级用户权限的情况下模拟文件系统的超级用户行为
fakeroot 是一个在 Linux 环境中使用的工具，它允许用户在没有超级用户权限的情况下模拟文件系统的超级用户行为。它是一个在 Linux 环境中广泛使用的工具，通常包含在大多数 Linux 发行版的软件仓库中。 主要功能 模拟 root 权限：fake…...
AI大模型应用：17个实用场景解锁未来
任何新技术的普及都需要经历一段漫长的过程，人工智能大模型也不例外。 尽管某些行业的从业者已经开始将大模型融入日常工作，但其普及程度仍远未达到“人手必备”的地步。 那么，究竟是什么限制了它的广泛应用？普通人如何才能用好…...
激光雷达点云畸变消除：MCU vs CPU 方案详解
在移动机器人、自动驾驶等场景中，激光雷达（LiDAR）用于获取高精度的空间点云数据。然而，当雷达在运动中扫描时，不同点的采集时刻对应的位置不同，就会出现“运动畸变（Motion Distortion࿰…...
java17
1.常见API之BigDecimal 底层存储方式： 2.如何分辨过时代码： 有横线的代码表示该代码已过时 3.正则表达式之字符串匹配 注意：如果X不是单一字符，需要加[]中括号 注意：1.想要表达正则表达式里面的.需要\\. 2.想要表…...
深度学习中的提示词优化：梯度下降全解析
深度学习中的提示词优化：梯度下降全解析 在您的代码中，提示词的更新方向是通过梯度下降算法确定的，这是深度学习中最基本的优化方法。 一、梯度下降与更新方向 1. 核心公式 对于可训练参数 θ \theta θ（这里是提示词嵌入向量），梯度下降的更新公式为：...
多智能体Multi-Agent应用实战与原理分析
一：Agent 与传统工具调用的对比 在当今的开发环境中，Agent 的出现极大地简化了工作流程。其底层主要基于提示词、模型和工具。用户只需向 Agent 输入需求，Agent 便会自动分析需求，并利用工具获取最终答案。而传统方式下，若没有 Agent，我们则需要手动编码来执行工具，还要…...
C++算法（22）：二维数组参数传递，从内存模型到高效实践
引言 在C程序设计中，二维数组的参数传递是许多开发者面临的棘手问题。不同于一维数组的相对简单性，二维数组在内存结构、类型系统和参数传递机制上都存在独特特性。本文将深入探讨静态数组、动态数组以及STL容器三种实现方式，通过底层原理分…...
ProceedingJoinPoint的认识
ProceedingJoinPoint 是 Spring AOP（面向切面编程） 中的核心接口，用于在 环绕通知（Around） 中拦截方法调用并控制其执行流程。以下是对其功能和用法的详细解释： 核心作用 拦截目标方法 在方法执行前后插…...
鸿蒙OSUniApp 制作动态加载的瀑布流布局#三方框架 #Uniapp
使用 UniApp 制作动态加载的瀑布流布局 前言 最近在开发一个小程序项目时，遇到了需要实现瀑布流布局的需求。众所周知，瀑布流布局在展示不规则尺寸内容（如图片、商品卡片等）时非常美观和实用。但在实际开发过程中，我…...
Lightpanda开源浏览器：专为 AI 和自动化而设计的无界面浏览器
一、软件介绍 文末提供程序和源码下载 Lightpanda开源浏览器：专为 AI 和自动化而设计的无界面浏览器； Javascript execution Javascript 执行Support of Web APIs (partial, WIP)支持 Web API（部分、WIP）Compatible with Pla…...
技术文档不完善，如何促进知识传承
建立统一的技术文档规范、引入文档自动化工具、将文档写作融入开发流程、建设团队知识共享文化 是促进知识传承的关键策略。在其中，尤应重视建立统一的技术文档规范，通过标准化文档结构、命名、版本管理等方式，提升文档质量和可维护性&#x…...
LLMs之MCP：2025年5月2日，Anthropic 宣布 Claude 重大更新：集成功能上线，研究能力大幅提升
LLMs之MCP：2025年5月2日，Anthropic 宣布 Claude 重大更新：集成功能上线，研究能力大幅提升 导读：2025年5月2日，Anthropic 宣布 Claude 推出 Integrations 集成功能和增强型高级研究功能。Integrations 基于 …...
Linux基础 -- 在内存中使用chroot修复eMMC
Linux基础 – 在内存中使用chroot修复eMMC 概述 本教程将介绍如何在Linux系统中，使用chroot在内存中构建一个临时系统，并在不依赖原有系统的情况下修复eMMC（如/dev/mmcblk2）磁盘。该方法适用于嵌入式系统修复、磁盘清理以及离线…...
Windows平台OpenManus部署及WebUI远程访问实现
前言：继DeepSeek引发行业震动后，Monica.im团队最新推出的Manus AI 产品正席卷科技圈。这款具备自主思维能力的全能型AI代理，不仅能精准解析复杂指令并直接产出成果，更颠覆了传统人机交互模式。尽管目前仍处于封闭测试阶段…...
位运算题目：找到最接近目标值的函数值
文章目录 题目标题和出处难度题目描述要求示例数据范围 解法思路和算法代码复杂度分析 题目 标题和出处 标题：找到最接近目标值的函数值 出处：1521. 找到最接近目标值的函数值 难度 8 级 题目描述 要求 Winston 构造了一个如上所示的函数 func \…...
哲学物理：太极图和莫比乌斯环有什么关系？
太极图 是中国传统文化中的经典符号，由阴阳两部分组成，黑白两色相互环绕，中间有两点表示阴中有阳，阳中有阴。太极图象征着对立统一、相互依存和动态平衡，是道家哲学的核心思想之一。 
机器学习笔记1
一、 机器学习介绍与定义 1. 机器学习定义 机器学习（Machine Learning）本质上就是让计算机自己在数据中学习规律，并根据所得到的规律对未来数据进行预测。 机器学习包括如聚类、分类、决策树、贝叶斯、神经网络、深度学习（Deep…...
JVM中的安全点是什么，作用又是什么？
JVM中的安全点（Safepoint） 是Java虚拟机设计中的一个关键机制，主要用于协调所有线程的执行状态，以便进行全局操作（如垃圾回收、代码反优化等）。它的核心目标是确保在需要暂停所有线程时，每个线程…...
关于github使用总结
文章目录 一、本地使用git（一）创建一个新的本地Git库首先在本地创建一个新的git仓库然后进行一次初始提交提交过后就可以查看提交记录 （二）在本地仓库进行版本恢复先执行 git log 查看项目提交历史使用 git checkout 恢复版本 二、…...
基于Qt6 + MuPDF在 Arm IMX6ULL运行的PDF浏览器——MuPDF Adapter文档
项目地址：总项目Charliechen114514/CCIMXDesktop: This is a Qt Written Desktop with base GUI Utilities 本子项目地址：CCIMXDesktop/extern_app/pdfReader at main Charliechen114514/CCIMXDesktop 前言 这个部分说的是Mupdf_adaper下的文档的工…...
google-Chrome常用插件
google-Chrome常用插件 1. json格式化展示插件 github下载jsonview-for-chrome插件 通过离线安装方式 拓展程序-》管理拓展程序-》打开开发者模式-》加载已解压的拓展程序-》选择拓展程序解压的位置 2. 翻译插件 插件下载地址：Immersive Translate - Bilingual …...