Vue3使用JSX/TSX

文章目录

  • 1. 什么是 JSX & TSX?
    • JSX(JavaScript XML)
    • TSX(TypeScript XML)
  • 2.Vue3 中使用 TSX
    • 基本渲染 & 响应式 & 事件
  • 3.JSX 和 template 哪个好呢?
    • 总结


请添加图片描述

1. 什么是 JSX & TSX?

提示:JSX & TSX

  • JSX是Facebook专门为react发明的一种新的类似于XML格式的语言,它 是JavaScipt的语法拓展。
  • 它使用XML标记的方式去直接声明界面,然后再利用编译器转换成JS语言。但是Vue 早就能使用 JSX 去编写页面了~
  • 并且现在大部分都是使用 Typescript 来写项目,所以 TSX 会用的更多

JSX(JavaScript XML)

  • JSX是一种JavaScript的语法扩展,它允许在JavaScript代码中编写类似于XML或HTML的结构。
  • JSX使得在React中编写UI组件更加直观和易于理解,它可以帮助开发人员将UI的结构和逻辑更清晰地表达出来。
  • 在JSX中,可以直接在JavaScript代码中使用类似HTML的标签来描述UI组件的结构,并且可以在标签中嵌入JavaScript表达式,以动态地生成UI内容。

TSX(TypeScript XML)

  • TSX是JSX的TypeScript版本,它提供了与JSX相同的功能,并添加了对类型的支持。
  • TypeScript是JavaScript的一个超集,它引入了静态类型检查,使得代码更具可维护性和安全性。
  • 在TSX中,可以像在JSX中一样编写UI组件,并且可以利用TypeScript的类型系统来提供更好的代码提示、错误检查和重构支持。

2.Vue3 中使用 TSX

我是使用了 Vue3 + Vite + TS 的项目,想要在项目中使用 TSX ,需要安装一个 Vite 插件

pnpm i @vitejs/plugin-vue-jsx -D

安装完毕后,需要在 vite.config.ts 中去进行插件配置

// vite.config.ts
import vueJsx from@vitejs/plugin-vue-jsx';
// vite.config.ts
return defineconfig({
base: './',
plugins:[VitePluginGitInfo()vue({script:{propsDestructure: true,defineModel: true},})vueJsx()//加上插件

配置完就可以写 TSX 啦!!!

基本渲染 & 响应式 & 事件

我们可以新建一个 TsxComp.tsx 文件,来写 TSX 。写 TSX 可以不在 Vue文件 中去写

// TSXComp.tsx
import { definecomponent, ref }from 'vue';
import {Button }from 'ant-design-vue';
export default definecomponent({
setup(){// setup 中负责管理数据const count = ref(1);const onclick=()=>{count.value++;};return {count,onclick,};render(){//在 render 函数中去写 TSXreturn (<div><div>{this.count}</div><Button onclick={this.onclick}>点击</Button></div>);},
});

接着我们可以去渲染这个组件

<!-- Parent.vue -->
<TSXComp />

可以看到基本的 渲染 & 响应式 & 事件 已经实现

请添加图片描述

3.JSX 和 template 哪个好呢?

  • JSX 性能好是指的编译快,编译快其实是构建时,但是真正的性能好是运行时 Vue
  • 在进行template模板编译的时候,会做各种优化,这些优化虽然会耗费构建时间,也就是构建时会比较慢,但是这些优化运用到最后产物的运行时的时候会大大提升性能

总结

  • JSX构建更快,但是性能较差
  • template构建更慢,但是性能较好

原文连接

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

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

相关文章

【K8s】初识PV和PVC

​ 目录 收起 O、致谢 一、前言 二、Volume 2.1 什么是Volume 2.2 为什么要引入Volume 2.3 Volume类型有哪些 2.4 Volume如何使用 2.4.1 通过emptyDir共享数据 2.4.2 使用HostPath挂载宿主机文件 2.4.3 挂载NFS至容器 三、PV和PVC 3.1 什么是PV和PVC 3.2 为什么要引入PV和PVC 3…

【QT+QGIS跨平台编译】之五十九:【QGIS_CORE跨平台编译】—【错误处理:字符串错误】

文章目录 一、字符串错误二、处理方法三、涉及到的文件四、宽字节与多字节问题五、字符转换处理一、字符串错误 常量中有换行符错误: 也有const char * 到 LPCWSTR 转换的错误 二、处理方法 需要把对应的文档用记事本打开,另存为 “带有BOM的UTF-8” 三、涉及到的文件 src…

学习JAVA的第九天(基础)

目录 接口 定义 使用 特点 注意事项 内部类 分类 内部类的访问特点 成员内部类 格式 获取成员内部类对象方式 静态内部类 格式 局部内部类 特点 匿名内部类 格式 格式解释 作用 接口 接口可以说是一种规则&#xff0c;是对行为的抽象 定义 publi…

数据结构界的幻神(First)----链表

一.链表的概念 链表是一种常见的数据结构&#xff0c;它由一系列节点组成&#xff0c;每个节点包含数据和指向下一个节点的指针。链表的结构类似于一条链子&#xff0c;因此得名。 相比于传统的数组&#xff0c;链表具有以下特点&#xff1a; 1. 动态增长&#xff1a; 链表的…

J17资本合伙人SKY LAI确认出席Hack .Summit() 2024区块链开发者盛会

J17资本合伙人SKY LAI确认出席由 Hack VC 主办&#xff0c;并由 AltLayer 和 Berachain 联合主办&#xff0c;与 SNZ 和数码港合作&#xff0c;由 Techub News 承办的Hack.Summit() 2024区块链开发者盛会。 J17资本合伙人SKY LAI负责管理公司的Web3基金&#xff0c;投资领域涵盖…

vivo 在离线混部探索与实践

作者&#xff1a;来自 vivo 互联网服务器团队 本文根据甘青、黄荣杰老师在“2023 vivo开发者大会"现场演讲内容整理而成。 伴随 vivo 互联网业务的高速发展&#xff0c;数据中心的规模不断扩大&#xff0c;成本问题日益突出。在离线混部技术可以在保证服务质量的同时&…

第104讲:数据库分库分表的意义与实现策略(MyCat)

文章目录 1.分库分表的目的2.分库分表的拆分策略2.1.垂直拆分2.2.水平拆分 3.Mycat水平拆分的分片规则 1.分库分表的目的 互联网中的应用程序&#xff0c;随着公司的发展&#xff0c;应用系统的使用人数、数据量都再持续增长&#xff0c;数据库层面就会产生一定的瓶颈。 如果…

Transformer之Residuals Decoder

The Residuals 我们需要提到的编码器架构中的一个细节是&#xff0c;每个编码器中的每个子层(self-attention,&#xff0c;ffnn)周围都有一个残余连接&#xff0c;然后是 layer-normalization 步骤。 如果我们要可视化向量和与 self attention 相关的 layer-norm 运算&#x…

基于视觉识别的自动采摘机器人设计与实现

一、前言 1.1 项目介绍 【1】项目功能介绍 随着科技的进步和农业现代化的发展&#xff0c;农业生产效率与质量的提升成为重要的研究对象。其中&#xff0c;果蔬采摘环节在很大程度上影响着整个产业链的效益。传统的手工采摘方式不仅劳动强度大、效率低下&#xff0c;而且在劳…

图像处理基础——频域、时域

傅里叶分析不仅仅是一个数学工具&#xff0c;更是一种可以彻底颠覆一个人以前世界观的思维模式。 一、什么是频域 时域 时域是信号在时间轴随时间变化的总体概括&#xff1b;频域是把时域波形的表达式做傅立叶等变化得到复频域的表达式&#xff0c;所画出的波形就是频谱图&a…

golang 函数式编程库samber/mo使用: IO

golang 函数式编程库samber/mo使用&#xff1a; IO 如果您不了解samber/mo库&#xff0c; 请先阅读第一篇 Option 在函数式编程中&#xff0c;副作用和纯函数是最常见的概念。 IO用来封装IO这类副作用。 什么是副作用 副作用是在计算结果的过程中&#xff0c;改变了系统状态…

Docker技术概论(8):Docker Desktop原生图形化管理

Docker技术概论&#xff08;8&#xff09; Docker 原生图形化管理 - 文章信息 - Author: 李俊才 (jcLee95) Visit me at CSDN: https://jclee95.blog.csdn.netMy WebSite&#xff1a;http://thispage.tech/Email: 291148484163.com. Shenzhen ChinaAddress of this article:…

字节序转换函数

目录 为什么要字节序转换&#xff1f;网络协议指定通讯字节序为大端字节序转换函数主机字节序转换为网络字节序hton1 (host to network l是length指长整型)htons (host to network s是short指短整型)两个函数的代码案例 网络字节序转主机字节序ntoh1ntohs 为什么要字节序转换&a…

【报名指南】2024年第九届数维杯数学建模挑战赛报名全流程图解

1.官方报名链接&#xff1a; 2024年第九届数维杯大学生数学建模挑战赛http://www.nmmcm.org.cn/match_detail/32 2.报名流程&#xff08;电脑与手机报名操作流程一致&#xff09; 参赛对象为在校专科生、本科生、研究生&#xff0c;每组参赛人数为1-3人&#xff08;指导老师不…

【MySQL】数据查询——DQL基本数据库查询

目录 查询语法1. 查询表中所有的数据行和列&#xff0c;采用“*”符号2. 查询表中指定列的数据。3. 在查询中使用别名&#xff0c;使用“AS”关键字。4. 在查询中使用常量列&#xff1a;如果需要将一些常量的默认信息添加到输出结果中&#xff0c;以方便统计或计算。可以使用常…

解密Spring Cloud LoadBalancer:实现高效负载均衡的魔法密卷(一)

本系列文章简介&#xff1a; 本系列文章将深入探究Spring Cloud LoadBalancer的工作原理和应用场景&#xff0c;并揭示其背后的神奇之处。通过解密这个魔法密卷&#xff0c;我们将能够了解如何构建具有高效、可靠性的负载均衡系统&#xff0c;以及如何在微服务架构中实现优化的…

Unity 预制体与变体

预制体作用&#xff1a; 更改预制体&#xff0c;则更改全部的以预制体复制出的模型。 生成预制体&#xff1a; 当你建立好了一个模型&#xff0c;从层级拖动到项目中即可生成预制体。 预制体复制模型&#xff1a; 将项目中的预制体拖动到层级中即可复制。或者选择物体复制粘贴。…

Shell之字符处理

一、字符处理 1.1 cut命令 命令格式&#xff1a; cut [选项] 文件名 选项&#xff1a; -f 列号&#xff1a; 提取第几列-d 分隔符&#xff1a; 按照指定分割符进行分割&#xff0c;默认的分割符是制表符&#xff0c;注意分割符不能使用空格。示例&#xff1a; # 每个字段已…

如何选择垃圾收集器安全点安全区

如何选择垃圾收集器&安全点&安全区 如何选择垃圾收集器 优先调整堆的大小让服务器自己来选择如果内存小于100M&#xff0c;使用串行收集器如果是单核&#xff0c;并且没有停顿时间的要求&#xff0c;串行或JVM自己选择如果允许停顿时间超过1秒&#xff0c;选择并行或…

AWS ECS Fargate禁止公网访问

当在AWS ECS(Elastic Container Service)上运行任务时,默认情况下,ECS会自动为每个任务分配一个公有IP地址。然而,并不是所有的情况下都需要或希望任务具有公有IP地址(NAT或公网拉取镜像需要)。在某些情况下,你可能希望ECS任务只能通过私有IP地址访问,并且不暴露到公共网…