vue3 setup函数与setup语法糖之间的区别

普通setup函数构建的组件

import {ref} from 'vue'export default {setup(){const count=ref(0)const handleUpdate=()=>{count.value++}return{count,handleUpdate}}}
</script>

使用setup语法糖构建的组件

<script setup>import {ref} from 'vue'const count=ref(0)const handleUpdate=()=>{count.value++}
</script>

从代码简洁度上来说setup语法糖显然更有优势一些

我们构建一个base页面将这两个组件引入之后再看
在这里插入图片描述
1.我们在Base页面分别引入了两个组件,并定义了他们各自的ref
2.控制台输出我们获取的ref对象来比较一下
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
组件1 是我们获取的setup函数构建的界面,我们看到他与我们基础的vue2的实例获取没有什么差别,可以直观的看到组件内部的方法,以及定义的数据
在这里插入图片描述
组件2是使用了setup语法糖构建的,我们发现返回的时候一个空对象,我们无法直接获取或者查看到组件内的信息
为了更进一步看的编译过程中两个组件的内容变化我们使用一个插件vite-plugin-inspect
在这里插入图片描述
这个插件可以帮助我们在业务编写过程中实时查看我们的编译源码
在这里插入图片描述
打开后找到我们的测试组件
在这里插入图片描述
使用了setup函数编写后的文件发现模板已经不在存在而是变成了一个render函数的形式导出,而我们使用setup函数的部分没有任何变化还是原样输出的
在这里插入图片描述
我们再看使用了setup语法糖的组件我们发现模板还是一样变成了render函数导出,但是我们的setup语法糖先转成了一个setup函数,并被额外加上了一个expose()函数
官方对这个函数有很明确的说明
在这里插入图片描述
当我们使用setup语法糖开发时常常也会使用到一个跟他相关的宏,defineExpose
例如我们需要在业务子组件中暴露子组件的一些数据,方法

   const restInfo=()=>{tableData.value=[];selectMod.value=[];tools.value=[{name:"**",code:1,select:true,},{name:"**",code:2,select:false,}]}defineExpose({tableData,selectMod,restInfo});

我们改变setup语法糖组件并给他添加这个宏命令后

<template><div style="width:6.25rem;height:3.125rem;background: #e3c528">这是组件2</div>
</template><script setup>import {ref} from 'vue'const count=ref(0)const handleUpdate=()=>{count.value++}defineExpose({count})
</script><style scoped></style>

在这里插入图片描述
编译完的结果也加上了这个指定暴露的内容
在这里插入图片描述
重新刷新后我们发现此时组件2中的count也已经可以直接查看到。通过上述一系列的演示体现出了无论时从代码面上,还是底层编译上亦或者是内部使用过程中都存在一定的差异性。所谓的互相转换也并不是A==B的逻辑

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/724242.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

devc++小游戏3.8.5

导航&#xff1a; Dev-c跑酷小游戏 1.0.0 devc跑酷小游戏1.2.5 devc跑酷游戏1.2.6 devc跑酷游戏2.0.0 devc跑酷游戏2.0.1 devc跑酷游戏2.4.0 devc跑酷小游戏3.5.0 更新内容 重磅回归&#xff0c;存档搞定&#xff01;&#xff01;&#xff01; 每一关需要前一关已…

C#日志记录:实现应用程序的监控与调试

日志记录是软件开发中不可或缺的功能&#xff0c;它能帮助开发者在应用程序运行时记录重要信息&#xff0c;便于调试和监控。本文将详细介绍C#中的常用日志记录功能以及常用的日志库&#xff0c;包括日志级别控制、日志输出格式、自定义日志目标、结构化日志和异步日志记录。同…

【Linux】常见指令1(ls指令、pwd指令、cd指令、touch指令、mkdir指令、rmdir指令、man指令、cp指令、mv指令、cat指令)

目录 01.ls指令与ll指令 02.pwd指令 03.cd指令 04.touch指令 05.mkdir指令 06.rmdir指令&&rm指令 07.man指令 08.cp指令 09.mv指令 10.cat指令 01.ls指令与ll指令 ls指令&#xff1a; 原型&#xff1a;list directory contents 语法&#xff1a;ls[选项][目录…

nodejs安装教程(及过程中的易错)

nodejs&#xff1a;Nodejs 是基于 Chrome 的 V8 引擎开发的一个 C 程序&#xff0c;目的是提供一个 JS 的运行环境。 npm&#xff1a;npm 是 Node Package Manager 的缩写&#xff0c;意思是 Node 的包管理系统&#xff0c;是最大的软件包仓库 下载nodejs 首先我们需要在node…

数学算法笔记

1、平方差 [蓝桥杯 2023 省 A] 平方差 - 洛谷 考虑将公式化简&#xff0c;然后看x是由什么性质的数组成&#xff0c;该题中&#xff0c;从x奇偶性质入手&#xff0c;判断x可能的组成情况。 题解&#xff1a;Welcome - Luogu Spilopelia

抖店无货源怎么做?最新玩法分享,看这篇就懂了!

我是电商珠珠 抖店一直热度很高&#xff0c;都在讲的无货源玩法&#xff0c;对于新手来说很陌生。 今天呢&#xff0c;我就来详细的讲一下抖店无货源玩法。 第一步&#xff0c;入驻 入驻的时候需要准备一张个体的营业执照&#xff0c;以及个人的身份证、银行卡。 资金的话…

C# SwinV2 Stable Diffusion 提示词反推 Onnx Demo

目录 介绍 效果 模型信息 项目 代码 下载 C# SwinV2 Stable Diffusion 提示词反推 Onnx Demo 介绍 模型出处github地址&#xff1a;https://github.com/SmilingWolf/SW-CV-ModelZoo 模型下载地址&#xff1a;https://huggingface.co/SmilingWolf/wd-v1-4-swinv2-tagg…

python-数组元素积的符号-LEETCODE

方法一&#xff1a;笨蛋方法&#xff0c;直接相乘 def arraySign(nums): sum1 for i in range(len(nums)): sumnums[i]*sum if sum>0: return 1 if sum<0: return -1 if sum0: return 0 方法二&#xff1a;判断是…

FPGA- RGB_TFT显示屏原理及驱动逻辑

下图是TFT显示屏的显示效果 该显示屏共分为 2 个版本&#xff0c;4.3 寸版本的 TFT4.3’’_V3.0 和 5.0 寸版本的 TFT5.0’’_V3.0。 两者 PCB 背板电路完全相同&#xff0c;接口脚位定义完全相同&#xff0c;接口时序完全相同&#xff0c;仅使用的显示屏 模组尺寸不同。设计两…

⭐每天一道leetcode:28.找出字符串中第一个匹配项的下标(简单;暴力解;KMP算法,有难度)

⭐今日份题目 给你两个字符串 haystack 和 needle &#xff0c;请你在 haystack 字符串中找出 needle 字符串的第一个匹配项的下标&#xff08;下标从 0 开始&#xff09;。如果 needle 不是 haystack 的一部分&#xff0c;则返回 -1 。 示例1 输入&#xff1a;haystack &q…

Java多线程——信号量Semaphore是啥

目录 引出信号量Semaphore &#xff1f;Redis冲冲冲——缓存三兄弟&#xff1a;缓存击穿、穿透、雪崩缓存击穿缓存穿透缓存雪崩 总结 引出 Java多线程——信号量Semaphore是啥 信号量Semaphore &#xff1f; Semaphore 通常我们叫它信号量&#xff0c; 可以用来控制同时访问特…

代码随想录算法训练营第三十二天|LeetCode122 买卖股票的最佳时机II 、LeetCode55 跳跃游戏、LeetCode45 跳跃游戏II

122.买卖股票的最佳时机II 思路&#xff1a;计算每天股票的盈利&#xff08;后一天于前一天的差值&#xff09;&#xff0c;将所有盈利的和加在一起&#xff0c;就是最大值。 class Solution { public:int maxProfit(vector<int>& prices) {int win 0;int diff 0…

喜讯!南大通用顺利通过全球软件领域最高级别认证

近日&#xff0c;在擎标顾问团的咨询辅导下&#xff0c;天津南大通用数据技术股份有限公司&#xff08;以下简称&#xff1a;南大通用&#xff09;顺利通过了全球软件领域最高级别CMMI-DEV V2.0成熟度5级评估认证&#xff0c;并荣获证书&#xff0c;标志着GBASE南大通用在软件技…

【Linux】文件传输工具lrzsz的安装与使用

目录 一、关于lrzsz 二、安装lrzsz 三、lrzsz的说明及使用 1、上传命令rz 2、下载命令sz 一、关于lrzsz 在开发的过程中&#xff0c;经常遇到 需要在 Linux 和 Windows 之间上传下载文件的情况 这时&#xff0c;一般都是使用 FTP 或者 WinSCP 工具进行上传下载, 虽然也能…

C++基础入门 --- 【学习指南】

文章目录 C基础入门1.初识C1.1 第一个C程序1.2 注释1.3 变量1.4 常量1.5 关键字1.6 标识符命名规则 2.数据类型2.1 整型2.2 sizeof关键字2.3 浮点型(实型)2.4 字符型2.5 转义字符2.6 字符串型2.7 布尔类型 bool2.8 数据的输入 3.运算符3.1 算术运算符3.2 赋值运算符3.3 比较运算…

QT:颜色选择器

普通 Qt提供了一个现成的QColorDialog类。 用法: #include <QColorDialog>QColor color QColorDialog::getColor(Qt::white, this); if(!color.isValid()){//点击 关闭 或 cancel 颜色无效 }else {ui->text->setText(color.name());//类似##ffffQRgb rgb colo…

“人工智能+”写入政府工作报告,哪吒汽车与主旋律同频共振

撰稿|行星 来源|贝多财经 在3月5日召开的第十四届全国人大二次会议上&#xff0c;“人工智能”被首次写入政府工作报告&#xff0c;明确深入推进数字经济创新发展&#xff0c;打造具有国际竞争力的数字产业集群的发展前景。 与此同时&#xff0c;以智能网联新能源汽车为代表…

Jmeter 对http接口压测

Jmeter相对于Loadrunner来说&#xff0c;更轻&#xff0c;易于安装&#xff0c;如果对过程数据收集不多、测试场景不复杂的情况下&#xff0c;可以优先考虑。 Jemeter进行HTTP接口压力测试的具体使用步骤&#xff1a; 1、首先添加一线程组&#xff08;即用户组&#xff1a;一…

HarmonyOS学习——HarmonyOS习题

harmonyOS开发学习课程 HarmonyOS第一课 1.【习题】运行Hello World工程 判断题 1. DevEco Studio是开发HarmonyOS应用的一站式集成开发环境。&#xff08;√&#xff09; 2. main_pages.json存放页面page路径配置信息。&#xff08;√&#xff09; 单选题 1. 在stage模…

慢SQL调优-索引详解

Mysql 慢SQL调优-索引详解 前言一、慢查询日志设置二、explain查看执行计划三、索引失效四、索引操作五、profile 分析执行耗时 前言 最新的 Java 面试题&#xff0c;技术栈涉及 Java 基础、集合、多线程、Mysql、分布式、Spring全家桶、MyBatis、Dubbo、缓存、消息队列、Linu…