Vue3中setup运行时机介绍
在 Vue3 中，直接写在 <script setup>...</script> 中的代码运行时机可以分为以下几个关键阶段：
一、执行顺序层级
二、具体运行阶段
1. 组件实例初始化前
- 执行时机：在 Vue 实例化过程中，早于
beforeCreate生命周期钩子 - 典型行为：
<script setup> // 以下代码会先于 beforeCreate 执行 import { ref } from 'vue' const count = ref(0) // 响应式变量初始化 console.log('ScriptSetup 执行') // 会在此阶段输出 </script>
2. 响应式系统构建
- 依赖收集：所有在
<script setup>中声明的ref/reactive变量会被立即初始化 - 示例验证：
<script setup> const message = ref('Hello') console.log(message.value) // 输出 "Hello" </script>
3. 生命周期钩子对比
| 代码位置 | 执行时机 | 示例 |
|---|---|---|
<script setup> | beforeCreate 之前 | 初始化响应式变量、导入模块 |
setup() 函数 | beforeCreate 之前 | （等同于 <script setup>） |
onMounted 钩子 | 组件挂载完成后 | 访问 DOM 元素 |
created 钩子 | beforeCreate 之后 | 不能访问 DOM |
三、异步操作的特殊处理
1. 异步代码执行时机
<script setup>
// 以下异步代码会立即执行（在实例化前）
const fetchData = async () => {const res = await fetch('/api/data')data.value = await res.json()
}
fetchData() // 立即发起请求
</script>
2. 与生命周期的关系
- 请求会在
beforeCreate前发起，但响应处理会在组件挂载后完成 - 典型场景：
<script setup> import { ref, onMounted } from 'vue'const data = ref(null)// 立即执行的异步请求 fetchData().then(res => {data.value = res // 在 mounted 钩子前可能已赋值 })onMounted(() => {console.log(data.value) // 可能已有值（取决于请求速度） }) </script>
四、与选项式 API 的对比
| 特性 | <script setup> | 选项式 API (setup() 函数) |
|---|---|---|
| 执行时机 | beforeCreate 前 | beforeCreate 前 |
| 响应式声明 | ref/reactive 直接声明 | 需要返回对象 |
| 代码组织 | 更简洁，无 this 上下文 | 需要 this 访问实例 |
| 编译优化 | Tree-shaking 友好 | 需要手动优化 |
五、关键注意事项
1. 不要访问 DOM
<script setup>
// ❌ 错误：此时 DOM 尚未创建
const element = document.getElementById('app')
</script>
2. 异步数据获取
<script setup>
// ✅ 正确：在 setup 阶段发起请求
const data = ref(null)fetch('/api/data').then(res => {data.value = res.json()
})
</script>
3. 响应式变量初始化
<script setup>
// ✅ 正确：响应式变量在实例化前初始化
const count = ref(0)
</script>
六、底层原理
-
编译阶段：
- Vue 编译器将
<script setup>转换为setup()函数 - 所有顶层代码被提升到
setup()最顶部
- Vue 编译器将
-
运行时阶段：
- 在组件实例化流程中，先执行
<script setup>代码 - 再依次触发
beforeCreate→created→beforeMount等生命周期
- 在组件实例化流程中，先执行
总结
- 运行时机：
<script setup>中的代码在 组件实例化前 执行（早于beforeCreate） - 核心特性：
- 响应式变量立即初始化
- 顶级代码立即执行
- 无法访问 DOM 元素
- 最佳实践：
- 用于初始化数据、导入模块、注册组合函数
- 异步操作需注意执行顺序
- 避免在此阶段直接操作 DOM
相关文章：
Vue3中setup运行时机介绍
在 Vue3 中，直接写在 <script setup>...</script> 中的代码运行时机可以分为以下几个关键阶段： 一、执行顺序层级 #mermaid-svg-bF3p98MiNdLfcoSG {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#33…...
计算机视觉----感兴趣区域（ROI）、非极大值抑制
感兴趣区域（Region of Interest，ROI）是指在一幅图像或者数据集中，用户关注并希望进行重点分析、处理或者研究的特定区域。以下为你详细介绍它在不同领域的应用： 医学影像领域 在医学影像中，医生可以通过确…...
YOLO11解决方案之对象裁剪探索
概述 Ultralytics提供了一系列的解决方案，利用YOLO11解决现实世界的问题，包括物体计数、模糊处理、热力图、安防系统、速度估计、物体追踪等多个方面的应用。 对象裁剪是指从图像或视频中分离并提取特定的检测对象，YOLO11 模型功能可用于准…...
将单链表反转【数据结构练习题】
- 第 98 篇 - Date: 2025 - 05 - 16 Author: 郑龙浩/仟墨 反转单链表(出现频率非常的高) 文章目录 反转单链表(出现频率非常的高)题目：反转一个链表思路：代码实现(第3种思路): 题目：反转一个链表 将 1->2->3->4->5->NULL反转…...
多网卡管理实战指南：原理、问题分析与实用工具推荐
多网卡管理实战指南：原理、问题分析与实用工具推荐 在现代网络环境中，越来越多的用户面临一个实际问题：一台电脑连接了多个网络接口，如有线 无线、双有线、或实体网卡 虚拟VPN网卡。这种“多网卡”环境虽然提供了更多可能性&am…...
qt5.14.2 opencv调用摄像头显示在label
ui界面添加一个Qlabel名字是默认的label 还有一个button名字是pushButton mainwindow.h #ifndef MAINWINDOW_H #define MAINWINDOW_H#include <QMainWindow> #include <opencv2/opencv.hpp> // 添加OpenCV头文件 #include <QTimer> // 添加定…...
使用Python实现简单的人工智能聊天机器人
最近研学过程中发现了一个巨牛的人工智能学习网站，通俗易懂，风趣幽默，忍不住分享一下给大家。点击链接跳转到网站人工智能及编程语言学习教程。读者们可以通过里面的文章详细了解一下人工智能及其编程等教程和学习方法。下面开始对正文内容的…...
Python爬虫（28）Python爬虫高阶：Selenium+Splash双引擎渲染实战与性能优化
目录 一、背景：动态渲染技术的演进与挑战二、核心技术对比与选型三、环境搭建与工具链配置1. Docker部署Splash集群2. Selenium环境配置 四、双引擎渲染核心实现1. 智能路由中间件2. Splash高级Lua脚本控制 五、性能优化实战方案1. 浏览器资源池化2. 异步渲染加速 六…...
uv python 卸载
又是查了半天 官网wiki没有 网上一堆傻子胡说 uv提示也不对 AI还在这尼玛胡编乱造 开始 我原来装了这几个环境 uv python list 现在python3.7.7不需要了，卸载，直接 uv python uninstall 3.7.7 去找你自己要卸载的版本号，不需要整个包名复制…...
如何备考GRE？
1.引言 GRE和雅思不太相同，首先GRE是美国人的考试，思维方式和很多细节和英系雅思不一样。所以底层逻辑上我觉得有点区别。 难度方面，我感觉GRE不容易考低分，但考高分较难。雅思就不一样了不仅上限难突破，下限还容易6…...
Crowdfund Insider聚焦：CertiK联创顾荣辉解析Web3.0创新与安全平衡之术
近日，权威金融科技媒体Crowdfund Insider发布报道，聚焦CertiK联合创始人兼CEO顾荣辉教授在Unchained Summit的主题演讲。报道指出，顾教授的观点揭示了Web3.0生态当前面临的挑战，以及合规与技术在推动行业可持续发展中的关键作用。…...
第六章 进阶10 实习生的焦虑
时间过得很快，实习的蕾蕾入职已经三个月了，到了离开的日子。 照例我和她约了1对1谈话，在开始和结束阶段的谈话格外有意义。 谈话的最后，我问蕾蕾有没有什么问题问我，她的问题让我格外惊讶： “自己有点焦…...
技术融资：概念与形式、步骤与案例、挑战与应对、发展趋势
一、技术融资概述 技术融资是指通过外部资金支持技术研发、产品开发或市场扩展的过程。它通常涉及风险投资、天使投资、私募股权、众筹等多种形式。技术融资的核心目标是为技术创新提供资金保障，推动技术从概念到市场的转化。 技术融资的主要形式包括以下几种&…...
duxapp 2025-03-29 更新 编译结束的复制逻辑等
CLI copy 文件夹内的内容支持全量复制优化小程序配置文件合并逻辑（更新后建议将 project.config.json 文件从git的追踪中移除）新增 copy.build.complete 文件夹的复制逻辑，会在程序编译结束之后将文件复制到指定位置 （模块和用户…...
【Linux】Shell脚本中向文件中写日志，以及日志文件大小、数量管理
1、写日志 shell脚本中使用echo命令，将字符串输入到文件中 覆盖写入：echo “Hello, World!” > laoer.log ，如果文件不存在，则会创建文件追加写入：echo “Hello, World!” >> laoer.log转移字符：echo -e “Name:\tlaoer\nAge:\t18” > laoer.log，\t制表符 …...
Qwen3技术报告
参考链接：https://zhuanlan.zhihu.com/p/1905945819108079268 介绍的很详细，先贴后续再整理...
python + flask 做一个图床
1. 起因， 目的: 对这个网站：https://img.vdoerig.com/ ， 我也想实现这种效果。做一个简单的图床，后面，可以结合到其他项目中。 2. 先看效果 实际效果。 3. 过程: Grok 聊天： https://img.vdoerig.co…...
虚拟来电 4.3.0 |集虚拟来电与短信于一体，解锁VIP优雅脱身
虚拟来电是一款集虚拟来电与虚拟短信于一体的应用程序。它可以帮助用户在需要时模拟一个真实的来电或短信，以最顾及对方情面的方式逃离尴尬场合。无论是自定义来电联系人、时间、次数，还是设置自定义通话语音、来电震动和铃声，这款解锁了VIP功…...
日志与策略模式
什么是设计模式 IT⾏业 ,为了让 菜鸡们不太拖⼤佬的后腿, 于是⼤佬们针对⼀些经典的常⻅的场景, 给定了⼀些对应的解决⽅案, 这个就是 设计模式 日志认识 计算机中的⽇志是记录系统和软件运⾏中发⽣事件的⽂件，主要作⽤是监控运⾏状态、记录异常信 息ÿ…...
Linux下载与安装
一、YUM 1.1 什么是YUM 在CentOS系统中，软件管理方式通常有三种方式：rpm安装、yum安装以及编译（源码）安装。 编译安装，从过程上来讲比较麻烦，包需要用户自行下载，下载的是源码包，需…...
java18
1.API之时间类 Date类： SimpleDateFormat类： Calendar类：...
向量和矩阵范数
向量和矩阵范数 向量范数 定义 设 x T \boldsymbol{x}^\text{T} xT， y T \boldsymbol{y}^\text{T} yT ∈ K n \in \mathbb{K}^n ∈Kn,数量积定义为： y T x ( 或 y H x ) \boldsymbol{y} ^\text{T} \boldsymbol{x}\left(或\boldsymbol{y}^\text{H}\bo…...
使用 gcloud CLI 自动化管理 Google Cloud 虚拟机
被操作的服务器，一定要开启API完全访问权限，你的电脑安装gcloud CLI前一定要先安装Python3！ 操作步骤 下载地址，安装大概需要十分钟：https://cloud.google.com/sdk/docs/install?hlzh-cn#windows 选择你需要的版本&a…...
驱动芯片走线、过孔指导，大电流、散热过孔
参考： 一份大厂PCB布局指南参考！ 技巧 使用大面积铺铜 铜是一种极好的导热体。由于 PCB 的基板材料（FR-4 玻璃环氧树脂）是一种不良导热体。因此，从热管理的角度来看，PCB的铺铜区域越多则导热越理想。 走…...
数据结构进阶：AVL树与红黑树
目录 前言 AVL树 定义 结构 插入 AVL树插入的大致过程 更新平衡因子 旋转 右单旋 左单旋 左右双旋 右左双旋 实现 红黑树 定义 性质 结构 插入 实现 总结 前言 在学习了二叉搜索树之后，我们了解到其有个致命缺陷——当树的形状呈现出一边倒…...
AI人工智能在交通物流领域的应用
AI人工智能在交通物流领域的应用 AI人工智能在交通物流领域有着广泛而深入的应用，正推动着该领域的深刻变革，以下是详细介绍： 交通领域 智能驾驶 自动驾驶汽车：依靠深度学习算法、计算机视觉、激光雷达和传感器融合技术&#x…...
牛客网NC22222:超半的数
牛客网NC22222:超半的数 题目描述 输入输出格式 输入格式： 第一行包含一个整数 n (1 ≤ n ≤ 1000)第二行包含 n 个整数 a_i (1 ≤ a_i ≤ 10^9) 输出格式： 输出一个整数，表示出现次数超过一半的那个数 解题思路 这道题目有多种解法&a…...
)
在服务器上安装AlphaFold2遇到的问题(2)
如何删除已安装的cuDNN 1. 通过包管理器卸载（推荐） RHEL/CentOS (dnf/yum) #查看已安装的 cuDNN 包 sudo dnf list installed | grep cudnn #卸载 cuDNN 运行时和开发包 sudo dnf remove -y libcudnn* libcudnn8* libcudnn-devel* Ubuntu/Debian (ap…...
【2025年软考中级】第一章1.5 输入输出技术（外设）
文章目录 输入输出技术（外设）I/O设备总线结构输入输出控制程序控制方式中断方式直接内存存取（DMAC）方式IO通道方式和外围处理机（IOP）方式 数据传输方式生物特征认证技术 输入输出技术（外设&…...
2025 家用投影新标杆：雷克赛恩 CyberPro1 如何重新定义客厅观影体验
目录 一、家庭影音升级：从 “看得清” 到 “看得精” 的需求之变 （一）传统投影的痛点突围 （二）技术参数背后的用户价值 二、全天候观影无忧：亮度与环境光的博弈艺术 （一）真实亮…...
[基础] HPOP、SGP4与SDP4轨道传播模型深度解析与对比
HPOP、SGP4与SDP4轨道传播模型深度解析与对比 文章目录 HPOP、SGP4与SDP4轨道传播模型深度解析与对比第一章 引言第二章 模型基础理论2.1 历史演进脉络2.2 动力学方程统一框架 第三章 数学推导与摄动机制3.1 SGP4核心推导3.1.1 J₂摄动解析解3.1.2 大气阻力建模改进 3.2 SDP4深…...
12 web 自动化之基于关键字+数据驱动-反射自动化框架搭建
文章目录 一、如何实现一条用例，实现覆盖所有用例的测试1、结合数据驱动：编辑一条用例，外部导入数据实现循环测试2、用例体：实现不同用例的操作步骤对应的断言 二、实战1、项目路径总览2、common 文件夹下的代码文件3、keywords 文…...
学习状态不佳时的有效利用策略
当学习状态不佳时，可以尝试以下策略，将这段时间转化为有意义的活动，既不勉强自己又能为后续高效学习铺路： 1. 整理与规划：低精力高回报任务 整理学习环境：收拾书桌、归类资料、清理电脑文件，减…...
Spring Cloud深度实践：从服务发现到弹性智能API网关全景解析
引言 大家好！继初步搭建了微服务基础架构后，我们进一步深入到服务调用的优化、系统的弹性构建以及API网关的高级应用。本文将全面回顾这一进阶阶段的实践成果，通过更丰富的图解，力求清晰展现各核心组件的工作原理与协同方式。 项…...
第J1周：ResNet-50算法实战与解析
🍨 本文为🔗365天深度学习训练营 中的学习记录博客 🍖 原作者：K同学啊 我的环境 语言环境:Python3.8 编译器:Jupyter Lab 深度学习环境:Pytorchtorch1.12.1cu113 torchvision0.13.1cu113 一、准备工作 二、导入数据 三、划分数据…...
PCL 计算一条射线与二次曲面的交点
文章目录 一、简介二、实现代码三、实现效果一、简介 对于二次曲面而言，其一般方程可以写为： z = a 0 + a 1 x + a 2 y + a...
Executors类详解
Executors类详解 Executors 是Java中用于快速创建线程池的工具类，提供了一系列工厂方法，简化了 ThreadPoolExecutor 和 ScheduledThreadPoolExecutor 的配置。以下是其核心方法、实现原理及使用注意事项： 1. 常用线程池工厂方法 (1) newFixedThreadPool 作用：创建固定大小…...
学习alpha
(sign(ts_delta(volume, 1)) * (-1 * ts_delta(close, 1))) 这个先用sign操作符 sign.如果输入NaN则返回NaN 在金融领域，符号函数 sign(x) 与 “基础”（Base）的组合概念可结合具体场景解读，以下从不同金融场景分析其潜在意义&…...
6种方式来探究数据集的的方法worldquant
覆盖率百分比 指金融数据字段（如股价、成交量、财务指标）在时间或空间上的有效数据比例。 时间维度：数据在历史周期内的完整度（如：某股票过去 1 年中，95% 的交易日有收盘价）。空间维度…...
MiniMax语音模型Speech-02近日登顶多个全球榜单，详细技术解析
MiniMax最新发布的Speech-02把TTS领域传统巨头OpenAI、ElevenLabs拉下马来，直接登顶智能语音权威榜单Artificial Arena，不管是WER（字错率），还是SIM（声纹相似度）等客观指标都领先国外顶级模型&am…...
JavaScript 时间转换：从 HH:mm:ss 到十进制小时及反向转换
关键点 JavaScript 可以轻松实现时间格式（HH:mm:ss 或 HH:mm）与十进制小时（如 17.5）的相互转换。两个函数分别处理时间字符串到十进制小时，以及十进制小时到时间字符串的转换，支持灵活的输入和输出格式。这…...
前端面经 手写Promise
核心功能 仿Promise对象需要接收包含两个变量的回调函数 构造函数 <script>class myPromise {constructor(func){const resolve (result)>{console.log(resolve执行了)}const reject (result)>{console.log(reject执行了)}func(resolve,reject)}}// Promise的…...
JavaSE基础语法之方法
方法 一、方法入门 1.方法定义 方法是一种语法结构，它可以把一段代码封装成一个功能，以便重复调用。 2.方法的格式 修饰符 返回值类型 方法名( 形参列表 ){方法体代码(需要执行的功能代码) }示例： public static int sum ( int a ,…...
在 Neo4j 中实现向量化存储：从文本到高效语义搜索
在当今数据驱动的时代，图数据库因其强大的关系表达能力和高效的查询性能，逐渐成为处理复杂数据结构的首选工具之一。Neo4j 作为领先的图数据库，不仅支持传统的图数据存储和查询，还通过向量化存储功能，为语义搜索和推荐…...
三格电子上新了——IO-Link系列集线器
一、产品概述 1.1产品用途 IO-Link系列集线器是一系列数字量输入输出I/O设备，可以将标准开关量信号接入到此设备。通过此集线器方便的将大量的I/O点位接入到IO-Link主站，进而接入到PLC控制系统。 IO-Link通信接口和8个I/O接口(16个IO点位)均采用M12规…...
记一次从windows连接远程Linux系统来控制设备采集数据方法
文章目录 0 引入1、方法2、优化Process使用 3、引用 0 引入 最近使用的探测器是老外的，老外的探测器需要在centos系统上，在这系统上有相应的指令或者软件控制，但是我们的软件在windwons上，所以目前的困难是：如何在Win…...
鸿蒙 ArkTS 常用的数组和字符串 操作方法
数组的常用方法 方法名功能描述concat(value0, ?value1, /* … ,*/ ?valueN)合并两个或多个数组。此方法不会更改现有数组，而是返回一个新数组copyWithin(target, ?start, ?end)浅复制数组的一部分到同一数组中的另一个位置，并返回它，不…...
Web性能优化的未来：边缘计算、AI与新型渲染架构
一、边缘计算与性能优化深度整合 1.1 边缘节点计算卸载策略 • 智能任务分割：将非关键路径计算卸载到边缘节点 // 客户端代码 const edgeTask = new EdgeTask(image-processing); edgeTask.postMessage(imageData, {transfer...
Python字符串常用内置函数详解
文章目录 Python字符串常用内置函数详解一、基础字符串函数1. len() - 获取字符串长度2. ord() - 获取字符的Unicode码点3. chr() - 通过Unicode码点获取字符4. ascii() - 获取字符的ASCII表示 二、类型转换函数1. str() - 将对象转为字符串2. repr() - 获取对象的官方字符串表…...
2025程序设计天梯赛补题报告
2025程序设计天梯赛补题报告 仅包含L1 L2 L1-6 这不是字符串题 题目描述 因为每年天梯赛字符串题的解答率都不尽如人意，因此出题组从几年前开始决定：每年的天梯赛的 15 分一定会有一道字符串题，另外一道则一定不是字符串题。 小特现在有…...