Vue3 JSX 写法笔记

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