V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
apades
V2EX  ›  前端开发

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

  •  
  •   apades ·
    apades · 1 天前 · 281 次点击

    因为有点受不了 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

    目前尚无回复
    关于   ·   帮助文档   ·   自助推广系统   ·   博客   ·   API   ·   FAQ   ·   Solana   ·   782 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 22ms · UTC 21:00 · PVG 05:00 · LAX 13:00 · JFK 16:00
    ♥ Do have faith in what you're doing.