JSX

如果你不了解 JSX ，甚至没有听说过，可以访问最后推荐的几篇文章，先快速了解熟悉下。

首先说明一点，JSX 并不是 Vue 官方推崇的开发方式，这点从 Vue 官方文档上就可以看来出来。Vue 官方推荐大家使用 SFC(Single File Component) 的方式去编写 Vue 组件，也就是我们熟悉的 .vue 文件。

开发模式

在 tsx 文件中开发

tsx

// 在 render 中返回
export default defineComponent({
  name: 'Tsx',
  render() {
    return <div>我是一个div</div>
  },
})

// 在 setup 中返回
export default defineComponent({
  name: 'Tsx',
  setup() {
    return () => <div>我是一个div</div>
  },
})

以上两种方式均可以，具体看个人开发习惯。其中 setup 中访问不到 this ，而在 render 中可以通过 this 访问当前 Vue 实例。

在 vue 文件中开发

是的，你依旧可以在 .vue 文件中以 SFC 的方式去编写开发我们的业务代码，只需要给 <script> 标签增加 lang="tsx" 的设置即可，同样也支持上面所提到的两种开发方式。

此外，在 .vue 文件中开发可直接使用 <style scoped> 特性，而在 .tsx 文件中开发，则需要使用 CSS Modules 来实现样式隔离。

阅读参考

由于作者对 JSX 的了解也仅是浅尝辄止，更多的使用技巧可参考下面相关链接，同时也欢迎对 JSX 有深入使用经验的小伙伴加群讨论。

JSX ​

开发模式 ​

在 tsx 文件中开发 ​

在 vue 文件中开发 ​

阅读参考 ​

JSX

开发模式

在 tsx 文件中开发

在 vue 文件中开发

阅读参考