# 前言 JSX语法让程序员体验到前所未有的舒爽，在vue3中使用jsx，既能够让我们体会到javascript的灵活，又能使用vue响应式所带来的便捷。而在Vue3中，快速过渡到TSX也是轻而易举的。 # 工程搭建通过执行`npm init vue`来创建一个Vue工程。 ![图片.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/224d31417cb94c80baf48783d063d66c~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=647&h=258&s=36337&e=png&b=0d0d0d) ## 工程地址你可以在以下地址找到本文使用的工程示例：https://gitee.com/z-shichao/vue_tsx ## 组件定义：defineComponent 在Vue3中，`defineComponent`是一个用于定义组件的函数API。它的作用主要有三个方面： 1. 创建组件选项对象：`defineComponent`允许你定义一个包含组件配置信息的选项对象，如组件的属性、方法、生命周期钩子等。 2. 类型推断支持：使用`defineComponent`可以帮助TypeScript更好地推断组件的类型，从而提高开发效率和代码的健壮性。 3. 提供组件定义上下文：`defineComponent`内部对组件选项对象进行一些处理，包括生命周期钩子的转换、模板的编译等，从而提供了一个统一的组件定义上下文，使得组件的定义更加清晰和一致。这里有个专门讲解defineComponent的文章：https://juejin.cn/post/6994617648596123679 # tsx语法 tsx有种书写模式：函数语法，选项语法 ```jsx //选项式 import { defineComponent } from "vue" export default defineComponent({ setup() { return () => (

vue3+tsx

) } }) ``` ```js //函数式 export default defineComponent(() => { return () => (

vue3+tsx

) }) ``` 使用选项语法还是函数语法主要取决于个人习惯。下文示例将使用选项式进行讲解。 **注意**：返回的是一个函数，在函数中返回的是一个JSX元素。JSX元素中必须有一个根标签。如果不想使用根标签，可以使用`<>`代替，该标签不会在页面中渲染。 ### 插值语法 ![图片.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/5c34ad1266a2409295fd7d8404e12668~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=313&h=139&s=2459&e=png&b=ffffff) ```js export default defineComponent({ setup() { let text = ref('我是文本内容') return () => (

{text.value}

) } }) ``` **注意**：使用`ref`定义响应式数据时，在模板中需要使用`.value`来访问。 ### 事件绑定 ![图片.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/15e86d6158ae43bd9d33e31b6c5e84ae~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=586&h=207&s=8831&e=png&b=fefefe) ```js export default defineComponent({ setup() { let text = '我是文本内容' return () => (<>

{text}

) } }) ``` ### 事件修饰符后边加驼峰事件修饰符 ```js export default defineComponent({ setup() { let text = '我是文本内容' return () => (<>

{text}

) } }) ``` **注意**：使用大括号`{}`进行插值，使用`on+事件名`（小驼峰命名法）进行事件绑定，自定义事件也是一样的。 ### jsx中移除了部分指令：v-bin、v-for、v-if `v-bind`：使用大括号`{}`进行包裹 ![图片.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/4d8ed6b73d774668befb97f9815da6c5~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=723&h=122&s=3849&e=png&b=ffffff) ```js export default defineComponent({ setup() { let text = '我是文本内容' let style = { background: 'red' } return () => (<>

{text}

) } }) ``` - `v-for`：使用数组方法`map` ```js export default defineComponent({ setup() { let items = ['张三', '李四', '王五'] return () => (<> {items.map((item) =>

{item}

)} ) } }) ``` `v-if`：使用三元表达式 ![图片.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/ebffc48fb798485e862e5b65f8acdebf~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=288&h=142&s=2723&e=png&b=fefefe) ```js export default defineComponent({ setup() { let isShow = ref(true) return () => (<>

{isShow.value ?

我出来饿了

: ''}

) } }) ``` 注意：js要写在`{}`里面，返回值是是一个可渲染的元素或元素组成的数组。 ### 插槽 #### 默认插槽 ![图片.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/d316f4521cc846d4b491bc1f16827a7d~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=356&h=76&s=2126&e=png&b=ffffff) ```js import { defineComponent, ref } from "vue" export default defineComponent({ setup(props, { slots }) { let text = ref('我是默认插槽') return () => ({text.value}) } }) let Child = (props: any, { slots }: any) => { return

{slots.default()}

} ``` #### 具名插槽 ![图片.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/435379fd7c504388b3fdbb1484be5a72~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=425&h=148&s=4669&e=png&b=ffffff) ```js import { defineComponent, ref } from "vue" export default defineComponent({ setup(props, { slots }) { let text = ref('我是默认插槽') return () => ( {{ default: () => text.value, name1: () => '我是插槽1', name2: () => '我是插槽2' }} ) } }) let Child = (props: any, { slots }: any) => { return

{slots.default()}

{slots.name1()}

{slots.name2()}

} ``` #### 作用域插槽 ![图片.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/34ebe3cb8ca44135a10e5ad7c4bcb4e6~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=275&h=112&s=3386&e=png&b=ffffff) ```js export default defineComponent({ setup(props, { slots }) { let text = ref('我是默认插槽') return () => ( {{ default: () => text.value, name1: () => '我是插槽1', name2: (parms: string) =>

{parms}

}} ) } }) let Child = (props: any, { slots }: any) => { let parms: string = '我是参数' return

{slots.default()}

{slots.name1()}

{slots.name2(parms)}

} ``` 还可以通过props传参向子组件传递元素 ```js import { defineComponent, ref } from "vue" export default defineComponent({ setup(props, { slots }) { let text = ref('我是默认插槽') return () => (我是一,

我是二

]}>) } }) let Child = (props: any, { slots }: any) => { return

{props?.childs[0]}

{props?.childs[1]}

} ``` ## 使用css scoped 在Vue 3 中，如果想要在 TSX 文件中使用 CSS scoped 样式，通常不能直接在 TSX 文件中实现 scoped 样式。你可以在 `.vue` 单文件组件中的 ` ``` ## vue3+tsx中定义props： ![图片.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/7d62d385115c46af99afceee65f01942~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=435&h=170&s=4036&e=png&b=ffffff) ```js import { defineComponent, PropType } from "vue" export default defineComponent({ setup() { return () => (<>

我是父组件

) } }) //子组件 const Text = defineComponent({ props:{ name:{ type:String as PropType, required:true } }, setup(props) { return () => (<>

{props.name}

) } }) import { defineComponent ,PropType} from "vue" export default defineComponent({ setup() { return () => (<> ) } }) ``` 注意：在tsx中定义类型时，只能定义比较笼统的Object、String等，这种类型为什么比较笼统呢，因为在js语言中Object在任何变量的原型上都存在，当你定义一个Object时他就会和any类型时类似的，其他类型同理，当我们想要定义某个类型时，我们只能使用as+ PropType的形式。 ## 简化props的使用：首先要了解定义string会报错呢，因为我们使用了defineComponent帮我们进行了类型推断定义。那我们可不可以不使用，自己使用ts来规范我们的类型呢。当然可以！！！ ### 方案一：不适用defineComponent 自己使用ts来进行类型定义。 ![图片.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/72bc64d44f6f4d898615111293259a55~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=451&h=395&s=20570&e=png&b=1e1e1e) 可以看到使用ts也可以进行类型定义，并且更为简便。当然参数在子组件里也是可以定义接收的。缺点就是jsx中是不能使用这种方式的。 ![图片.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/e0498181754040a5abd3eae70e4b7118~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=229&h=82&s=1791&e=png&b=ffffff) ```js import { defineComponent } from "vue" export default defineComponent({ setup() { return () => (<>

我是父组件

) } }) interface Props { name: string, age?: number } const Text = (props: Props, ctx: any) => { return

{props.name}

} ``` ### 方案二：混编 https://juejin.cn/post/7143053446365577253?searchId=202404031524149C416A3419D9B87C6B19 ### 方案三：使用# Vue Macros构建项目 https://vue-macros.dev/zh-CN/guide/getting-started.html ![图片.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/953f96886db14123a9f8027e64df6a39~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=813&h=485&s=29432&e=png&b=ffffff) ![图片.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/7458af5c5f6b45a6965506e7f5510ef0~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=802&h=449&s=20827&e=png&b=f6f6f7) ## vue中jsx语法和模板语法的优缺点： **JSX语法：** 优点： 1. **更灵活的语法：** JSX允许在模板中使用JavaScript表达式，使得模板更加灵活和表达能力更强，更容易阅读和理解JSX的代码。 2. **组件逻辑更直观，易维护：** JSX让组件的结构和逻辑更加紧密，因为你可以在组件中直接编写JavaScript逻辑，并且在同一个文件中可以写多个组件，将相关性较强的组件放在一起更易维护。 3. **性能较好：** 使用JSX编写Vue 3组件会比使用模板语法的组件具有更好的性能。因为JSX可以直接将组件转换为纯JavaScript 代码，而模板语法需要在运行时进行解析和编译。缺点： 1. **学习曲线较陡：** 对于新手来说，学习JSX语法可能需要一定的时间，特别是对于那些不熟悉React或其他使用JSX的框架的人来说。 2. **与HTML混合：** 有些开发者可能觉得在JavaScript中嵌入HTML的方式不够直观，因为它打破了HTML和JavaScript的分离原则。 3. **与模板的差异**：TSX（或 JSX）语法与 Vue 的模板语法有一定的差异，可能需要一定的适应时间，并且不支持一些模板特有的语法和指令。 **模板语法：** 优点： 1. **易于学习和上手：** 模板语法更接近传统的HTML，因此对于初学者来说更容易理解和上手。 2. **HTML代码直观：** 模板语法使得HTML代码更加直观，可以更清晰地看到组件的结构。 3. **编辑器支持良好：** 大多数编辑器对Vue模板语法有良好的支持，提供语法高亮、自动补全等功能。缺点： 1. **表达能力受限：** 模板语法相比于JSX在表达能力上受到一定的限制，因为因为它不能像JSX那样直接在模板中使用JavaScript表达式。 2. **组件与逻辑分离：** 使用模板语法时，组件的结构和逻辑可能会分离得较为明显，因为一些逻辑需要放在JavaScript中，而不是直接嵌入模板中。总的来说，选择JSX还是模板语法取决于个人的偏好、团队的技术栈以及项目的需求。在Vue 3中，JSX语法的支持更加完善，因此如果你对JavaScript更为熟悉，或者项目需要更高的灵活性和表达能力，那么可以考虑使用JSX语法。而对于简单的项目或团队中大多数成员都熟悉HTML的情况下，模板语法可能更为适合。 ## **支持我：2024 稀土掘金人气创作者投票** 如果你觉得这篇文章对你有帮助，或者你认为我的分享对前端开发者有价值，欢迎支持我在 **2024 年稀土掘金人气创作者榜单** 上投上一票！感谢你的关注和支持，让我们一起在前端开发的道路上不断前行！掘金2024年度人气创作者打榜中，快来帮我打榜吧～ [为我投票入口](https://activity.juejin.cn/rank/2024/writer/937224062645917?utm_campaign=annual_2024&utm_medium=self_web_share&utm_source=%E8%B6%85%E7%BA%A7%E6%97%A0%E6%95%8C%E6%9A%B4%E9%BE%99%E5%85%BD)