不要在vue中使用jsx

配置

新项目

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

已有项目(vite)

在vite.config.js中增加插件

js 复制代码

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

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

写法

javascript 复制代码

// 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;

说明

setup的返回值是一个render函数 ()=>jsx 而不是普通的jsx 可以理解成react类组件中的render函数
setup函数的签名是setup(props,{ slots, emit, attrs }) 但仅推荐使用props和slots
传入的onClick、class等会被自动应用到子组件的最外层需要设置inheritAttrs:false
上述的参数会被收集至setup的attrs参数中,需要设置props: ["onClick"]才会识别为props.这种情况下,不需要配置inheritAttrs:false
插槽位于slots对象中,类型是函数,用法是

arduino 复制代码

{slots.default?.() ?? default-view}

default是默认插槽的名字如果有其他的具名插槽使用slots.插槽名即可

插槽函数可以传递参数和template中插槽功能一样

jsx方式中只能传输不带参数的默认插槽类似于react中的children参数
jsx方式中这种写法依旧是不行的

css 复制代码

Modal.info({ content: <span></span> })

必须使用h('span')

ts

vue+jsx姑且能用但是vue+tsx就相当恶心了

ts中传onClick得这么做

typescript 复制代码

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里使用体验极差组件不听话

js 复制代码

<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好到哪里去