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

1 天前
 apades

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

280 次点击
所在节点    前端开发
0 条回复

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/1177308

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX