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

Vue 3中的setup【与Vue 2的区别】

news 来源：原创 2025/8/25 23:33:58

一、前言

  • 在Vue 3中，setup是组合式API（Composition API）的核心入口函数。
  • 其核心作用是为组件提供灵活的逻辑组织方式，解决复杂组件中逻辑碎片化的问题。

二、核心作用

1.初始化响应式数据

  • 通过ref和reactive等API声明响应式状态，替代Vue 2的data选项。
  • 示例：
setup() {const count = ref(0); // 基本类型响应式数据const user = reactive({ name: "张三" }); // 对象类型响应式数据return { count, user };
}

2.访问组件的Props和上下文

  • props参数：接收父组件传递的响应式属性，不可直接解构（需用toRefs保持响应性）。
  • context参数：提供非响应式的上下文对象，包含attrs、slots、emit和expose。
setup(props, { attrs, emit }) {console.log(props.title); // 访问propsemit('update'); // 触发事件
}

3.替代生命周期钩子

  • 通过onMounted、onUpdated等函数直接注册生命周期逻辑。
setup() {onMounted(() => {console.log('组件已挂载');});
}

4.逻辑复用与组织

  • 将相关逻辑封装为自定义Hook（如useFetch），实现高内聚、低耦合。
// 自定义Hook
function useFetch(url) {const data = ref(null);onMounted(async () => {data.value = await fetch(url).then(r => r.json());});return { data };
}

5.暴露变量与方法

  • 返回的对象会暴露给模板和组件实例，其他选项（如methods）可通过this访问这些值。
setup() {const increment = () => count.value++;return { increment };
}

三、"script setup"语法糖

  • 在单文件组件中，setup提供更简洁的语法：
    • 自动暴露顶层变量：无需手动返回。
    • 直接使用TypeScript：支持类型推导。
    • 编译优化：模板与逻辑同一作用域，性能更高。
<script setup lang="ts">
import { ref } from 'vue';
const count = ref(0);
</script>

四、注意事项

  • this不可用：setup执行时组件实例尚未创建，this为undefined。
  • 异步setup：需配合Suspense组件使用，但生产环境慎用。
  • 响应式解构：使用toRefs(props)保持解构后的响应性：
const { title } = toRefs(props);

五、与Vue 2选项式API对比

在这里插入图片描述

六、总结

  • setup是Vue 3组件逻辑的组织核心，通过组合式API解决了复杂组件中代码分散的问题。
  • 同时支持更好的TypeScript集成和编译优化。
  • 对于新项目，推荐优先使用"script setup"语法以简化开发。

相关文章：

Vue 3中的setup【与Vue 2的区别】

一、前言 在Vue 3中&#xff0c;setup是组合式API&#xff08;Composition API&#xff09;的核心入口函数。其核心作用是为组件提供灵活的逻辑组织方式&#xff0c;解决复杂组件中逻辑碎片化的问题。 二、核心作用 1.初始化响应式数据 通过ref和reactive等API声明响应式状态…...

编程日记 2025/8/25 23:33:58

基于PySide6的YOLOv8/11目标检测GUI界面——智能安全帽检测系统

&#x1f4d6; 前言 在工业安全领域&#xff0c;智能安全帽检测是保障工人生命安全的重要技术手段。本文将介绍如何利用YOLOv8/YOLOv11目标检测算法与PySide6 GUI框架&#xff0c;开发一套功能完整的智能安全帽检测系统。系统支持&#xff1a; 动态切换检测模型&#xff08;Y…...

编程日记 2025/8/19 18:01:11

AF3 generate_chain_data_cache脚本解读

AlphaFold3 generate_chain_data_cache 脚本在源代码的scripts文件夹下。该脚本从指定目录中批量解析 mmCIF/PDB 文件的工具，并将每个链的基本信息（序列、分辨率、是否属于聚类等）提取并写入 JSON 文件，主要用于后续蛋白质建模、过滤或训练数据准备。 源代码： import ar…...

编程日记 2025/8/20 9:03:55

C/C++不透明指针

今天在ESP32编程中又看到了这个词&#xff0c;这个词出现在cursor回答中。回答如下&#xff1a; struct esp_netif_obj; typedef struct esp_netif_obj esp_netif_t;esp_netif_obj的具体实现细节被隐藏了用户代码只能通过esp_netif_t类型指针来操作网络接口这种封装方式被称为…...

编程日记 2025/8/25 23:33:56

电力实习中需要注意哪些安全用电问题

电力实习中需要注意哪些安全用电问题 在电工实习中&#xff0c;由于涉及到电力设备和电气设施&#xff0c;安全问题尤为重要。 以下是电工实习中需要注意的安全问题&#xff1a; 一、电气设备及线路安全 使用电气设备前&#xff0c;应确保设备具有良好的电气绝缘&#xff0c…...

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

【版本控制】git命令使用大全

大家好&#xff0c;我是jstart千语。今天来总结一下git的使用命令&#xff0c;上文会先将git命令都列出来&#xff0c;便于快速寻找&#xff0c;然后还会对部分常用命令图文讲解&#xff0c;适合新手&#xff0c;让你快速地理解。最后还会总结在idea中使用git。如果有缺失的&am…...

编程日记 2025/8/21 1:06:15

Day09【基于Tripletloss实现的简单意图识别对话系统】

基于Tripletloss实现的表示型文本匹配 目标数据准备参数配置数据处理Triplet Loss目标Triplet Loss计算公式公式说明 模型构建网络结构设计网络训练目标损失函数设计 主程序推理预测类初始化加载问答知识库文本向量化知识库查询主程序main测试测试效果 参考博客 目标 在此之前…...

编程日记 2025/8/24 22:21:02

什么是HIGG验厂，HIGG验厂有什么要求？HIGG验厂有什么作用

什么是Higg验厂&#xff1f; Higg验厂&#xff08;Higg Facility Environmental Module, FEM & Higg Facility Social & Labor Module, FSLM&#xff09;是由可持续服装联盟&#xff08;SAC, Sustainable Apparel Coalition&#xff09;开发的一套评估工具&#xff0c…...

编程日记 2025/8/17 18:40:06

SmolVLM新模型技术解读笔记

原文地址&#xff1a;https://huggingface.co/blog/zh/smolervlm 一、核心发布概要 新成员亮相&#xff1a;推出256M&#xff08;2.56亿参数&#xff09;与500M&#xff08;5亿参数&#xff09;视觉语言模型关键定位&#xff1a;目前全球最小VLM&#xff08;256M&#xff09;…...

编程日记 2025/8/19 10:54:32

解决USG5150防火墙web无法连接问题

参考 防火墙usg5500&#xff08;V300R001C00SPC700&#xff09;WEB界面无法登陆 现象 Web防火墙突然无法web登录&#xff0c;Ping通&#xff0c;但是Tcpping端口不通。无论是从外网、还是内网都一样。 Probing 192.168.100.1:1234/tcp - No response - time2047.528ms Prob…...

编程日记 2025/8/25 23:33:58

Resilience4j与Spring Cloud Gateway整合指南：构建弹性的API网关

什么是Resilience4j&#xff1f; Resilience4j是一个轻量级的容错库&#xff0c;专为Java 8和函数式编程设计。它借鉴了Netflix Hystrix的设计理念&#xff0c;但更加轻量且专注于Java 8的函数式编程风格。Resilience4j提供了多种容错机制&#xff0c;帮助开发者构建弹性强健的…...

编程日记 2025/8/21 1:31:43

Quipus，LightRag的Go版本的实现

1 项目简介 奇谱系统当前版本以知识库为核心&#xff0c;基于知识库可以快构建自己的问答系统。知识库的Rag模块的构建算法是参考了LightRag的算法流程的Go版本优化实现&#xff0c;它可以帮助你快速、准确地构建自己的知识库&#xff0c;搭建属于自己的AI智能助手。与当前LLM…...

编程日记 2025/8/21 4:34:54

怎样完成本地模型知识库检索问答RAG

怎样完成本地模型知识库检索问答RAG 目录 怎样完成本地模型知识库检索问答RAG使用密集检索器和系数检索器混合方式完成知识库相似检索1. 导入必要的库2. 加载文档3. 文本分割4. 初始化嵌入模型5. 创建向量数据库6. 初始化大语言模型7. 构建问答链8. 提出问题并检索相关文档9. 合…...

编程日记 2025/8/25 23:32:37

研发效率破局之道阅读总结(2)流程优化

研发效率破局之道阅读总结(2)流程优化 Author: Once Day Date: 2025年4月15日 一位热衷于Linux学习和开发的菜鸟&#xff0c;试图谱写一场冒险之旅&#xff0c;也许终点只是一场白日梦… 漫漫长路&#xff0c;有人对你微笑过嘛… 全系列文章可参考专栏: 程序的艺术_Once-Day…...

编程日记 2025/8/22 10:03:37

解决PIP 安装出错ERROR: cp310-cp310-manylinux_2_28_x86_64.whl is not a supported wheel

ERROR: torch-2.8.0.dev20250325cu128-cp310-cp310-manylinux_2_28_x86_64.whl is not a supported wheel on this platform. 可以 pip debug --verbose | grep manylinux | grep cp310 WARNING: This command is only meant for debugging. Do not use this with automation f…...

编程日记 2025/8/25 10:19:20

b站golang后端开发一面

go和其他语言的对比 Golang&#xff08;也称为Go语言&#xff09;是一种静态类型、编译型语言&#xff0c;由Google开发&#xff0c;以其简洁、高效和强大的并发处理能力著称。 Golang的设计哲学强调简洁明了。与Python类似&#xff0c;Go语法简洁&#xff0c;易于学习和编写。…...

编程日记 2025/8/25 3:29:26

Vue3 SSR Serverless架构革命：弹性计算与量子加速

一、全维度Serverless SSR架构 1.1 蜂巢式弹性调度系统 1.2 冷启动时间优化表 优化策略Node.js冷启(ms)Deno冷启(ms)Bun冷启(ms)裸启动1800960420预编译二进制650380210内存快照预热22016090WASM实例池15011075量子状态预载453832 二、边缘渲染协议升级 2.1 流式SSR响应协议…...

编程日记 2025/8/25 9:25:15

深度大脑：AI大模型的设计与运行原理

AI大模型的设计与运行原理涉及多个复杂环节&#xff0c;以下是系统化的总结&#xff0c;结合核心要点与补充细节&#xff1a; 一、AI大模型的设计 1. 深度神经网络架构 Transformer&#xff1a;取代RNN/CNN&#xff0c;解决长程依赖问题。核心组件&#xff1a; 自注意力机制…...

编程日记 2025/8/25 23:32:36

Python网络编程从入门到精通：Socket核心技术+TCP/UDP实战详解

引言 网络编程是构建现代分布式系统的核心能力&#xff0c;而Socket作为通信的基石&#xff0c;其重要性不言而喻。本文将从零开始&#xff0c;通过清晰的代码示例、原理剖析和对比分析&#xff0c;带你彻底掌握Python中的Socket编程技术&#xff0c;涵盖TCP可靠连接、UDP高效…...

编程日记 2025/8/19 20:06:34

使用CMake生成Opencv对应库文件

opencv环境配置&#xff1a;版本3.4/3.2(OpenCV-3.4.3) CMake&#xff1a;3.12.1 D:\OpenCv\opencv\build\x64\vc16\bin路径添加至环境变量中 CMake环境配置&#xff1a; D:\Install_QT\bin路径添加至环境变量中&#xff08;path中即可&#xff09; QT5环境变量配置&#xff1a…...

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

MySQL 数据库备份和恢复全指南

MySQL 是一款常用的开源数据库系统&#xff0c;在日常运维中&#xff0c;数据备份和恢复是系统管理的重要一环。本文将细致介绍 MySQL 两大备份方案—— mysqldump 和 XtraBackup&#xff0c;包括备份方式、恢复步骤、定时脚本、远程备份和常见问题处理方案。 一、mysqldump 备…...

编程日记 2025/8/25 12:18:58

关于我的服务器

最近我买了台腾讯云服务器&#xff0c;然后新手小白只会用宝塔。。。 安装完之后默认的端口是8888&#xff0c;打开面板就会提示我有风险。然后 我改了端口之后&#xff0c;怎么都打不开。 于是 学到了几句命令可以使用&#xff1a; //查看端口是否已经修改成功 cat www/se…...

编程日记 2025/8/22 6:23:44

spring面试题

1&#xff0c;如何理解spring boot中的starter Starter是一种简化依赖管理和自动配置的核心机制&#xff0c;能快速集成特定功能模块&#xff0c;无需手动配置复杂依赖和xml文件。 依赖简化&#xff1a;将某个功能模块所需的所有依赖打包成一个“一站式”依赖&#xff0c;开发…...

编程日记 2025/8/25 23:32:38

python setup.py学习

Python-setup进阶打包命令 Python-setup进阶打包命令_python setup-CSDN博客 packages 需要处理的包目录&#xff08;包含__init__.py的文件夹&#xff09;&#xff0c;这里通常使用 find_packages()&#xff0c;它默认在和setup.py同一目录下搜索各个含有 __init__.py的包。…...

编程日记 2025/8/24 8:26:39

最简单的使用SDL2 播放原始音频数据程序

author: hjjdebug date: 2025年 04月 15日 星期二 14:02:05 CST description: 最简单的使用SDL2 播放原始音频数据程序 文章目录 1.最简单的播放音频的程序是什么样子的?2. 怎样用SDL 来编写音频播放器代码?2.1 SDL播放音频核心代码:混音函数2.2 先看看音频播放的可能的两种框…...

编程日记 2025/8/24 15:06:39

利用IDEA开发Spark-SQL

创建子模块Spark-SQL&#xff0c;并添加依赖 创建Spark-SQL的测试代码&#xff1a; 运行结果&#xff1a; 自定义函数&#xff1a; UDF&#xff1a; UDAF&#xff08;自定义聚合函数&#xff09; 强类型的 Dataset 和弱类型的 DataFrame 都提供了相关的聚合函数&#xff0c; …...

编程日记 2025/8/23 2:05:04

随身Wi-Fi能跑PCDN？

随身WiFi可以用于运行PCDN&#xff08;点对点内容分发网络&#xff09;&#xff0c;但存在技术限制和潜在风险&#xff0c;需谨慎操作。 可行性分析 技术基础 随身WiFi本质是便携式无线路由器&#xff0c;具备网络接入和分发能力&#xff0c;理论上可配置为PCDN节点。 部分用户…...

编程日记 2025/8/22 7:44:24

Google-A2A协议全面解析：一文掌握Agent-to-Agent协议的核心与应用

前言&#xff1a; 在当今人工智能技术飞速发展的时代&#xff0c;智能体&#xff08;Agent&#xff09;已悄然融入我们生活的各个角落。无论是个人智能助手&#xff0c;还是企业的自动化工具&#xff0c;各类AI代理的应用愈发广泛。但目前这些智能体之间大多处于孤立状态&…...

编程日记 2025/8/20 8:39:05

jmeter压测工具出现乱码

然后 prev.setDataEncoding(“utf-8”)...

编程日记 2025/8/17 21:22:46

大模型训练显存压缩实战：ZeRO-3 vs 梯度累积 vs 量化混合策略

一、显存瓶颈的本质与挑战 大模型训练面临的核心矛盾是模型参数量指数级增长与GPU显存容量线性提升之间的鸿沟。以175B参数模型为例&#xff0c;其显存消耗主要来自三个方面&#xff1a; 参数存储‌&#xff1a;FP32精度下需700GB显存‌梯度缓存‌&#xff1a;反向传播产生的…...

编程日记 2025/8/24 7:55:20

WPS JS宏编程教程（从基础到进阶）-- 第七部分：JS对象在WPS中的应用

目录 第7章 JS对象在WPS中的应用7-1 对象创建的几种方法从零理解对象&#xff1a;数据收纳盒两种基础创建方式代码解析表 7-2 对象属性的查、改、增、删像操作Excel单元格一样管理属性1. 点操作符&#xff08;静态键名&#xff09;2. 中括号操作符&#xff08;动态键名&#xf…...

编程日记 2025/8/19 2:48:35

网络编程（UDP）

server:服务器 # import socket # # 传递udp协议参数 # sk socket.socket(typesocket.SOCK_DGRAM) # # # 绑定ip及端口 # sk.bind(("127.0.0.1",8080)) # # print("等待客户端发送消息") # # # 直接发送 # msg,addr sk.recvfrom(1024) # # print(msg.d…...

编程日记 2025/8/22 7:34:18

深入讲解 CSS 选择器权重及实战

1. 权重计算规则详解 CSS 选择器的优先级由 三元组 (x, y, z) 决定&#xff0c;比较规则如下&#xff1a; 选择器类型权重值 (x, y, z)示例ID 选择器x 1#header → (1,0,0)类/伪类/属性y 1.active, :hover元素/伪元素z 1div, ::before 比较规则&#xff1a;从左到右逐级比…...

编程日记 2025/8/23 2:05:21

Mysql的查询

1.Mysql的基本查询 语法&#xff1a;select*from 表名;代表查询所有数据的所有列 SELECT * FROM classinfo; SELECT * FROM studentinfo; select 字段1&#xff0c;字段2.....from 表名;查询数据的指定字段 查询studentinfo表的学生姓名和年龄 SELECT stuname,age FROM stu…...

编程日记 2025/8/22 8:25:49

RaabitMQ 快速入门

&#x1f389;欢迎大家观看AUGENSTERN_dc的文章(o゜▽゜)o☆✨✨ &#x1f389;感谢各位读者在百忙之中抽出时间来垂阅我的文章&#xff0c;我会尽我所能向的大家分享我的知识和经验&#x1f4d6; &#x1f389;希望我们在一篇篇的文章中能够共同进步&#xff01;&#xff01;&…...

编程日记 2025/8/23 8:38:58

LLM: 探索LLM视觉缺陷

文章目录 前言一、Constructing MMVP Benchmarks1、CLIP-blind pair 二、MMVP-VLM bench1、Model size influence2、correlation between CLIP MLLMs 三、Mixture of Features1、Additive MoF Experiment2、Interleaved MoF Experiment 总结 前言 在使用多模态大模型时候是否会…...

编程日记 2025/8/23 13:58:47

常用的 ​​SQL 语句分类整理​​

以下是常用的 ​​SQL 语句分类整理​​&#xff0c;覆盖数据查询、操作、表管理和高级功能&#xff0c;适用于大多数关系型数据库&#xff08;如 MySQL、PostgreSQL、SQL Server&#xff09;&#xff1a; 目录 ​​一、数据查询&#xff08;DQL&#xff09;​​ ​​1. 基础查…...

编程日记 2025/8/19 7:17:39

Go之defer关键字：优雅的资源管理与执行控制

在Go语言中&#xff0c;defer关键字是处理资源释放、错误恢复和代码逻辑清理的利器。它看似简单&#xff0c;却隐藏着许多设计哲学和底层机制。本文将深入剖析defer的执行原理、使用场景和常见陷阱&#xff0c;助你掌握这一关键特性。 一、defer基础&#xff1a;延迟执行的本质…...

编程日记 2025/8/21 2:35:28

T1结构像+RS-fMRI影像处理完整过程记录（数据下载+Matlab工具箱+数据处理）

最近需要仿真研究T1结构像RS-fMRI影像融合处理输出目标坐标的可行性。就此机会记录下来。 为了完成处理&#xff0c;首先需要有数据&#xff0c;然后需要准备对应的处理平台和工具箱。那么正文开始~ &#xff08;1&#xff09;下载满足要求的开源数据 去OpenNEURO https://open…...

编程日记 2025/8/21 18:38:25

Flowable进阶-网关、事件和服务

网关 并行网关 并行网关允许将流程拆分为多个分支&#xff0c;也可以将多个分支汇集到一起。并行网关的功能是基于流入流出的顺序流。fork分支&#xff1a;用于任务的开始。并行后所有外出的顺序流&#xff0c;为每个顺序流都创建一个并发分支。 join汇聚&#xff1a;用于任务…...

编程日记 2025/8/25 9:57:22

【三维重建与生成】GenFusion：SVD统一重建和生成

标题:《GenFusion: Closing the Loop between Reconstruction and Generation via Videos》 来源&#xff1a;西湖大学&#xff1b;慕尼黑工业大学&#xff1b;上海科技大学&#xff1b;香港大学&#xff1b;图宾根大学 项目主页&#xff1a;https://genfusion.sibowu.com 文章…...

编程日记 2025/8/20 18:56:37

常见的爬虫算法

1.base64加密 base64是什么 Base64编码&#xff0c;是由64个字符组成编码集&#xff1a;26个大写字母AZ&#xff0c;26个小写字母az&#xff0c;10个数字0~9&#xff0c;符号“”与符号“/”。Base64编码的基本思路是将原始数据的三个字节拆分转化为四个字节&#xff0c;然后…...

编程日记 2025/8/24 14:55:12

有序二叉树各种操作实现（数据结构C语言多文件编写）

1.先创建tree.h声明文件( Linux 命令&#xff1a;touch tree.h)。编写函数声明如下(打开文件 Linux 操作命令&#xff1a;vim tree.h): //树的头文件位置 #ifndef __TREE_H__ #define __TREE_H__ //节点 typedef struct node{int data;//数据struct node* left;//记录左侧子节…...

编程日记 2025/8/25 1:01:56

Nacos-Controller 2.0：使用 Nacos 高效管理你的 K8s 配置

作者&#xff1a;濯光、翼严 Kubernetes 配置管理的局限 目前&#xff0c;在 Kubernetes 集群中&#xff0c;配置管理主要通过 ConfigMap 和 Secret 来实现。这两种资源允许用户将配置信息通过环境变量或者文件等方式&#xff0c;注入到 Pod 中。尽管 Kubernetes 提供了这些强…...

编程日记 2025/8/25 17:09:04

特殊文件以及日志——特殊文件

一、特殊文件 必要性&#xff1a;可以用于存储多个用户的&#xff1a;用户名、密码。这些有关系的数据都可以用特殊文件来存储&#xff0c;然后作为信息进行传输。 1. 属性文件.properties&#xff08;键值对&#xff09; &#xff08;1&#xff09;特点&#xff1a; 都只能…...

编程日记 2025/8/24 19:47:10

Spark-SQL核心编程语言

利用IDEA开发spark-SQL 创建spark-SQL测试代码 自定义函数UDF 自定义聚合函数UDAF 强类型的 Dataset 和弱类型的 DataFrame 都提供了相关的聚合函数&#xff0c; 如 count()&#xff0c; countDistinct()&#xff0c;avg()&#xff0c;max()&#xff0c;min()。除此之外&…...

编程日记 2025/8/25 1:16:24

jdk 安装

oracle官网 : Java Archive | Oracle 中国 export JAVA_HOME/Users/xxxxx/app/services/x86jdk/jdk1.8.0_431.jdk/Contents/Home export PATH$JAVA_HOME/bin:$PATH 华为镜像网站&#xff1a;Index of java-local/jdk...

编程日记 2025/8/18 19:34:08

Missashe考研日记-day21

Missashe考研日记-day21 1 专业课408 学习时间&#xff1a;4h学习内容&#xff1a; 今天先把昨天学的内容的课后习题做了&#xff0c;整整75道啊&#xff0c;然后学了OS第二章关于CPU调度部分的内容&#xff0c;这第二章太重要了&#xff0c;以至于每一小节的内容都比较多&am…...

编程日记 2025/8/23 1:49:56

双重路由引入的环路,选路次优的产生以及解决方法

描述 在R2,R3上双向引入ospf,以及rip,R5修改静态的优先级为180,在ospf中引入该静态路由 路由分析 选路次优问题 R5引入了静态路由,优先级是150 R2->R5->100.1.1.0,优先级是150 R3->R4->100.1.1.0,优先级是150 R3->R4->R5->100.1.1.0,优先级是150 R2-…...

编程日记 2025/8/24 2:23:20

环境变量概念以及获取环境变量（linux下解析）

目录 1 基本概念 2 常见的环境变量 3 查看环境变量方法 4 和环境变量相关的命令 5 环境变量的组织方式 6 通过代码如何获取环境变量 6.1 命令行参数 6.2 环境变量 7 通过系统调用获取或设置环境变量 1 基本概念 环境变量(environmentvariables)⼀般是指在操作系统中用来指…...

编程日记 2025/8/17 18:45:18