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>
  },
})
// 在 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 有深入使用经验的小伙伴加群讨论。