V2EX = way to explore
V2EX 是一个关于分享和探索的地方
Sign Up Now
For Existing Member  Sign In
爱意满满的作品展示区。
apades

闲来无事搞了个 Vue 的 babel 插件,可以让 Vue 的 jsx 语法更加接近 React

  •  
  •   apades ·
    apades · Dec 7, 2025 · 2054 views
    This topic created in 143 days ago, the information mentioned may be changed or developed.

    因为有点受不了 React 的细分组件优化,想试试 Vue 的 jsx ,结果要自己定义 props + defineComponent 写法好麻烦,所以自己花了 2 个星期的时间去把 @vitejs/plugin-vue-jsx 魔改了下,使语法更接近 React 了👈🤣

    举个🌰

    import { effect, ref, type VNode } from 'vue'
    type Props = {
      name: string
      header: (count: number) => VNode
      children?: VNode
    }
    type Handler = {
      addCount: () => void
    }
    function ChildComp(props: Props) {
      const innerCount = ref(0)
      defineExpose<Handler>({
        addCount() {
          innerCount.value++
        },
      })
      if(!props.children) return <div>no children</div>
    
      return (
        <>
          <div>{props.header(innerCount.value)}</div>
          <div onClick={() => innerCount.value++}>
            {props.name} count: {innerCount.value}
          </div>
          {props.children}
        </>
      )
    }
    

    项目目前就 preview 版本,还不算稳定

    https://github.com/apades/make-vue-coding-more-like-react

    2 replies    2025-12-07 17:34:06 +08:00
    shintendo
        1
    shintendo  
       Dec 7, 2025
    className 也有好好还原吗
    apades
        2
    apades  
    OP
       Dec 7, 2025
    @shintendo 没,className 和 class 我感觉也没差
    About   ·   Help   ·   Advertise   ·   Blog   ·   API   ·   FAQ   ·   Solana   ·   3462 Online   Highest 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 36ms · UTC 04:26 · PVG 12:26 · LAX 21:26 · JFK 00:26
    ♥ Do have faith in what you're doing.