如何在Vue3中使用 JSX或者TSX

官方文档：cn.vuejs.org/guide/extra…

之前写 React 的时候，最喜欢的是 JSX/TSX 语法，把 HTML 组件当做 JavaScript/TypeScript 代码片段处理：

const App: React.FC<AppProps> = ({ title }) => {
  const [count, setCount] = useState<number>(0);
  // 👇👇👇
  return (
    <div>
      <h1>{title}</h1>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

转战 Vue 之后，最痛苦的是没办法利用 TSX 语法灵活创建组件。

最常见的例子是，当我有一个数据表格，需要自定义字段的组件时，得用 h() 函数来创建：

<script lang="ts" setup>
//...
const createColumns = () => {
  return [
    {
      title: 'Action',
      key: 'actions',
      render (row) {
        /* 👇👇👇 */
        return h(
          NButton,
          {
            strong: true,
            tertiary: true,
            size: 'small',
            onClick: () => play(row)
          },
          { default: () => 'Play' }
        )
      }
    }
  ]
}
//...
</script>

h() 麻烦，低频使用情况下，每次都得查一遍文档。

最近发现 Vue3 原来是支持 JSX & TSX 的！在 Vue3 中集成 JSX & TSX 相对简单，安装插件：

npm install @vue/babel-plugin-jsx -D

将 babel 文件中配置：

{
  "plugins": ["@vue/babel-plugin-jsx"]
}

如果项目用 TypeScript，则在 tsconfig.json 中配置：

{
  "compilerOptions": {
    "jsx": "preserve"
  }
}

📝 注意：这里以 babel 举例，如果是其他工具链，比如 Vite、Nuxt 的话，请参考对应文档。

集成之后，上述的 h() 终于可以扔掉，换回熟悉的 JSX & TSX：

<script lang="ts" setup>
//...
const createColumns = () => {
  return [
    {
      title: 'Action',
      key: 'actions',
      render (row) {
        /* 👇👇👇 */
        return (
          <NButton 
            strong={true}
            tertiary={true}
            size="small"
            onClick={() => play(row)}>
            Play
          </NButton>
        )
      }
    }
  ]
}
//...
</script>

Vue3，你是懂框架的，妥妥的真香。