Skip to content
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 有深入使用经验的小伙伴加群讨论。