Vue3中使用jsx/tsx的教程詳解

更新時間：2024年02月13日 09:04:27 作者：吳楷鵬

這篇文章主要為大家詳細介紹了如何在Vue3中使用jsx/tsx的相關知識,文中的示例代碼講解詳細,具有一定的借鑒價值,需要的小伙伴可以了解下

首先，恭喜一下 React，再過 4 個月，就達成了兩年無更新記錄

反觀隔壁的 Vue，穩(wěn)定迭代更新

之前寫 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>
  );
}

轉(zhuǎn)戰(zhàn) Vue 之后，最痛苦的是沒辦法利用 TSX 語法靈活創(chuàng)建組件。

最常見的例子是，當我有一個數(shù)據(jù)表格，需要自定義字段的組件時，得用 h() 函數(shù)來創(chuàng)建：

<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() 麻煩，低頻使用情況下，每次都得查一遍文檔。

最近發(fā)現(xiàn) Vue3 原來是支持 JSX & TSX 的！

官方文檔： vuejs.org/guide/extras/render-function.html#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，你是懂框架的，妥妥的真香。

Vue 的誕生，已經(jīng)十個年頭，這么些年來，Vue 始終穩(wěn)步前進。

從降低開發(fā)成本和心智負擔方面來說，Vue 算得上優(yōu)秀。

先后推出的 Composition API、Setup、支持 TSX 語法等，真正的理解、賦能開發(fā)者。

值得一提的是，國內(nèi)的開發(fā)者確實偏愛 Vue，不論是 Star 人數(shù)、Issue 數(shù)量和 Pull Request 數(shù)量，都是遙遙領先: