Vue3 – 使用tsx编写组件-一一网

往期文章：

前言

vue2 的时候就已经支持jsx写法，只不过不是很友好，随着vue3对typescript的支持度，tsx写法越来越被接受，这里不会全面比较 template与jsx写法的优劣，这里只谈一下个人的感受：

template 比较适合习惯先定义html/css，再写逻辑js的同学
jsx/tsx 比较适合习惯按逻辑顺序编写代码的同学，html/css/js 交叉编写顺序

个人还是比较喜欢react，jsx/tsx可以通过js动态生成组件，个人不太喜欢vue template上通过
:is 来控制的写法，

正文开始…

准备工作

1.安装 vue3 的 typescript 版本

yarn create @vitejs/app

2.安装 @vitejs/plugin-vue-jsx

yarn add -D @vitejs/plugin-vue-jsx

3.配置 vite.coonfig.ts

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import vueJsx from '@vitejs/plugin-vue-jsx';

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue(), vueJsx({})],
});
复制代码

3.配置tsconfig.json

{
  "compilerOptions": {
    "jsx": "preserve",
    "jsxFactory": "h",
    "jsxFragmentFactory": "Fragment",
  }
}
复制代码

vue3 + tsx

// TsxTest.tsx
import { FC, defineComponent, reactive, onMounted } from 'vue';

// 无状态组件
const FcNode: FC<{ data: number }> = ({ data }) => {
  return (
    <>
      <hr />
      <div>子组件：
        {data < 10 ? <span>{data}</span> : <h1>{data}</h1>}
      </div>
    </>
  )
};

// 状态组件需要使用 defineComponent
export default defineComponent({
  name: 'TsxTest',
  setup() {
    const data = reactive({ count: 0 });

    onMounted(() => {
      data.count = 5;
    });

    const clickHandler = () => data.count++

    return () => (
      <>
        <span style={{ marginRight: '10px' }}>{ data.count }</span>
        <button onClick={clickHandler}>+</button>
        <FcNode data={data.count}/>
      </>
    )
  }
})
复制代码