不要在vue中使用jsx

FanetheDivine
3,123 阅读3分钟

配置

新项目

在npm create vue命令中设置jsx即可在项目中使用jsx

已有项目(vite)

在vite.config.js中增加插件

import vueJsx from '@vitejs/plugin-vue-jsx'

export default defineConfig({
  plugins: [
  // ...
    vueJsx(),
  ],
})

jsconfig

增加以下三项

    "jsx": "preserve",
    "jsxFactory": "h",
    "jsxFragmentFactory": "Fragment",

写法

// App.jsx
import { defineComponent, ref } from "vue";

const Comp = defineComponent({
  props: ["onClick"],
  setup(props, { slots }) {
    return () => (
      <button onClick={props.onClick}>{slots.default ?? "a"}</button>
    );
  },
});

const App = defineComponent({
  setup() {
    const num = ref(0);
    return () => <Comp onClick={() => num.value++}>{num.value}</Comp>;
  },
});

export default App;

插槽的写法

slots对象具有如下类型

{
    default?: ()=> VNode
    [otherSlotName]?: ()=>VNode
}

可以直接将slots传入子组件

<Children>{slots}<Children>

也可以做修改

<Children>
  {{
    ...slots,
    default: slots.default ?? "aaa",
  }}
</Children>

如果直接传入一个VNode或者render函数 则视作default插槽

<Children>{slots.default ?? "aaa"}</Children>

说明

  1. setup的返回值是一个render函数 ()=>jsx 而不是普通的jsx 可以理解成react类组件中的render函数
  2. setup函数的签名是setup(props,{ slots, emit, attrs, expose })
    vue会按照提供的props对象构造组件的props 其余的参数被自动归类到attrs
    对于形如@click的参数 会被转化为onClick 并且允许通过emit调用
    attrs和slots不能被解构赋值 是非响应式的 不能作为watch computed的响应式数据源 emit触发事件是没有返回值的 为了await onClick取得attrs的原始函数
    expose等效于defineExpose
  3. 传入的onClick、class等会被自动应用到子组件的最外层 需要设置inheritAttrs:false
  4. 上述的参数会被收集至setup的attrs参数中,需要设置props: ["onClick"]才会识别为props.这种情况下,不需要配置inheritAttrs:false

ts

vue+jsx姑且能用 但是vue+tsx就相当恶心了
ts中 传onClick得这么做

import type { PropType } from 'vue'

defineComponent({
  props: {
    onClick: Function as PropType<()=> void>
  },
  setup(props, { slots }) {
    //...
  },
});

可以设置defineComponent的模板类型 但是还是会导致onClick被自动应用到子组件最外层以及被视作attrs
插槽方面应该也有一些问题 不过劝退的理由不需要太多 原先的一堆问题再加这个已经足够了

总结

本文的标题其实一开始是在vue中使用jsx 我之前对这种写法是抱有很多期待的 心理流程大概是这样的

  • ref非常方便 本体和属性都能直接传给v-model hook限制好少 有点爽
  • v-model不好 至少element ui里使用体验极差 组件不听话
<el-tabs modelValue="0">
    <el-tab-pane name="0"></el-tab-pane>
    <el-tab-pane name="1"></el-tab-pane>
</el-tabs>

我都这么写了 它还是能自由切换 是真不愿意受控啊

  • vue+jsx能把ref和value-onChange模式结合起来 还能不用写那该死的:@# 简直是vue和react的融合超进化 值得一试
  • 一坨

又回过头来看最开始的那个想法 ref其实也没那么好
我需要找一个变量被更新的位置 并没有一个专用的setState 我得查看那个变量被引用的所有位置 无论是取值还是设置
话又说回来 有use-immer react的状态更新还是很方便的
hook方面 有eslint其实还好 而且只要把文档记在心中 其实也很难犯错
至于效率问题 现代浏览器一般不会有这方面的问题 真卡顿再优化也不迟
vue项目一坨一坨盘根错节的组件也不少 不见得比react好到哪里去

avatar
文章
阅读
粉丝