Vue 组件库实战(三):Vue3 TSX

发布网友发布时间：2024-10-06 23:46

共1个回答

热心网友时间：2024-11-20 08:40

这是 Vue 组件库实战的第三篇文章，主要讲述了 JSX/TSX 技术及其在 Vue3 中的特殊写法。

JSX 是由 * 提出的一种用于组件开发的语法扩展，它将 ECMAScript 语法进行扩展，并将其转换为标准的 ECMAScript。虽然 JSX 在 React 中得到了广泛的应用，但 Vue 也对其进行了吸收和改进，使其更易于理解组件代码，但也带来了一些*。

我们可以通过 HTML 到 JSX 的转换工具来快速了解 JSX 的基本概念。

TSX 则是在 JSX 的基础上，提供了 TypeScript 的支持。使用 TSX 时，需要将文件保存为 tsx 后缀，并在配置中启用对 JSX 的支持。TypeScript 的众多功能，如 as 关键字、类型检查、内建元素等，都可以在 TSX 中使用。具体细节可以参考 TypeScript JSX 文档。

对于 Vue3 中的 TSX，建议阅读官网的渲染知识章节来了解背景知识。

在推荐写法中，Composition API 的写法是最为推荐的。

在 Vue3 TSX 中，我们需要理解事件修饰符、传递插槽（slot）、指令、emit 等概念。这些概念在渲染函数案例中有对应的 JSX 写法，可以通过逐个练习来加深理解。

在练习时，需要安装 @vue/babel-plugin-jsx 并在 tsconfig.json 中配置 "jsx": "preserve"。也可以直接在 Playground 在线进行练习。

本文为 8 月 Day20 的学习笔记，内容来源于极客时间《前端进阶特训营》，强烈推荐该课程！