关于vue3:Vue3-JSX-写法笔记

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