详解在vue3中使用jsx的配置以及一些小问题

// vite.config.ts
import vueJsx from "@vitejs/plugin-vue-jsx";

export default {
  plugins: [vueJsx()]
}

// tsconfig.ts
{
  "jsx": "preserve",
}

<script lang="tsx">
import { defineComponent, ref } from "vue";

export default defineComponent({
  setup() {
    const msg = ref("tsx component");
    return () => {
      return <div>{msg.value}</div>;
    };
  },
});
</script>

export default defineComponent({
  setup() {
    const msg = ref("tsx component");
    const isShow = ref(false);

    function onClick() {
      isShow.value = !isShow.value;
    }

    return () => {
      return (
        <div>
          <div>{msg.value}</div>
          {isShow.value && <div>{isShow.value ? "show" : "hide"}</div>}
          <el-button onClick={onClick}>onClick</el-button>
        </div>
      );
    };
  },
});

<div>
  <div>{msg.value}</div>
  {isShow.value && <div>{isShow.value ? "show" : "hide"}</div>}
  <div v-show={isShow.value}>{isShow.value ? "show" : "hide"}</div>
  <el-button onClick={onClick}>onClick</el-button>
</div>

export default defineComponent({
  setup() {
    const msg = ref("tsx component");
    return () => {
      return (
        <div>
          <div>{msg.value}</div>
          <el-input v-model={msg.value} />
        </div>
      );
    };
  },
});