Vue3 是可以用 JSX 語法直接寫的, 大體可以從 https://sfc.vuejs.org/ 的示例看到,
其中 <div> 會編譯為 h('div'), 具體參考 https://vuejs.org/guide/extras/render-function.html .

完整的組件定義形如:

import { defineComponent, PropType } from 'vue';
import { onMounted, ref, watch } from 'vue';

const App = defineComponent({
  name: "App"
  props: {
    appId: {
      type: String as PropType<string>,
      default: '',
    },
  },
  emits: [],
  setup(props, {emit, expose, slots}) {

    return () => (
      <div>TODO</div>
    );
  },
});

export default App;

其中

• name 調試中組件的名字,
• props 需要用這樣的寫法用 Object 格式傳入, 類型部分用 PropType<T> 做標記,
• emits 可以用字符串格式指定事件, 而 emit 函數從參數中拿到,
• slots 也是從參數當中拿到,
• expose 也是從參數當中得到的,
• 注意最終的 render 函數, 範圍與 setup 函數有區別, 其中 setup 函數只會被執行一次, 而 render 函數可能多次執行. 而需要響應式追蹤的邏輯, 需要寫在 setup 函數裏邊, 否則行為不能達到預期,

有了 JSX, 原有的 v-if 和 v-else 可以和 React 一樣直接寫了,

<div>
  {!!a ? <span>true</span> : null}
</div>

v-model 較為特殊, 轉換後需要手動綁定 modelValue 的行為:

<A modelValue={a.value} onUpdate:modelValue={(v) => a.value = v} />

expose 的用法, 傳入一個對象, 參考 https://www.vuemastery.com/blog/understanding-vue-3-expose/

expose({ reset })

@click 寫法統一變成 on 加上大寫首字符,

<div onClick={() => console.log("TODO")} >

v-slots 用法比較複雜, 參考 https://github.com/vuejs/babel-plugin-jsx/#slot :

const A = (props, { slots }) => (
  <>
    <h1>{ slots.default ? slots.default() : 'foo' }</h1>
    <h2>{ slots.bar?.() }</h2>
  </>
);

有個 slot/template 寫法比較繞, 定製插槽的寫法:

<NSelect>
  <template #optionEmptyRender>
    <div>Demo</div>
  </template>
</NSelect>

寫成:

<NSelect
  v-slots={{
    optionEmptyRender: () => {
      return (
        <div>Demo</div>
      );
    },
  }}
/>

提取組件 props 的類型

對組件進行封裝的時候, 會遇到需要獲取 Component Props 進行復用的場景,
網上有找到用 TypeScript 泛型來獲取組件 props 類型的寫法:
https://stackoverflow.com/q/68602712/883571

import MyComponent from "./mycomponent.vue";

// 得到這個類型
type MyComponentProps = InstanceType<typeof MyComponent>["$props"];

Directive 寫法

https://vuejs.org/guide/extras/render-function.html#custom-di...

TODO