Vue3 是能够用 JSX 语法间接写的, 大体能够从 https://sfc.vuejs.org/ 的示例看到,
其中 <div> 会编译为 h('div'), 具体参考 https://vuejs.org/guide/extra... .
残缺的组件定义形如:

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 格局传入,
  • 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} />

v-slots 用法比较复杂, 参考 https://github.com/vuejs/babe... :

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

expose 的用法, 传入一个对象, 参考 https://www.vuemastery.com/bl...

expose({ reset })

TODO