每个人心中都有一款自己的前端框架

大家好，我是 anuoua，一直以来很少写东西，趁着2021年末，想和大家聊聊前端框架、我的一些想法以及在做的东西。

对现有框架的吐槽

我个人是 Vue 和 React 的忠实用户，这么多年一直在用这两框架，它们支撑起了我几乎所有的工作。前端框架发展了这么多年已经非常成熟，但是成熟并不代表已经完美，我用了这么久总归还是有些槽点想要不吐不快。

Vue 3

1-1-vue-logo.402955e1.png Vue 2 是过去式了，不谈了。

Vue 3 的响应式作为变更检测的方式之一，从数据源动手，这既是它的优点也是槽点。优点是从数据源动手可以精确的进行变更检测，缺点是需要窜改数据，而且 Vue 3 的 Composition API 仍然有值的包装和解包的心智负担，但是也算能够接受。

我觉得 Vue 3 最大的问题就是要向下兼容 Vue 2，导致没法做很激进的改动，我这里主要讲组件的形态，现在 Vue 3 的组件写法很多，可以纯函数，可以 setup，可以 setup 代码块，可以 options，可以 JSX，可以模版，有时候选择太多并不是什么好事，Vue 3 的现状和向下兼容的策略是分不开的，说实话挺无奈（完全不向下兼容的 Vue 3，大家能接受吗？可能会被大家骂死）。

我一直觉得 Vue 的组件定义方式没有 React 简单直白，虽然 React 有 class 组件这种技术债。

React

曾经 React 团队发布 hooks 的时候，我一度以为它就是我最后的框架了，React 团队在框架上的设计、概念总是能让我无比赞同，但是实际使用却让我无比蛋疼。

首先 hooks 的心智负担很重，我用到现在都很少抽离复杂的 hooks，因为我摸不着 hooks 的最佳实践，怎么写都感觉不完美，很难受。其他方面比如 useCallback 包装下的函数，嵌套深且噪音多，看起来很丑，deps的处理令人烦躁。同时 hooks 调试比较困难，嵌套 hooks 封装起来如履薄冰，生怕出问题。我对 hooks 评价是它确实解决了很多问题，但同时它又诞生了很多问题。

React 的另外一个槽点，那就是合成事件，很鸡肋，我完全没有感受到它带给我的便利。

总结

没有完美的框架！

每个人心中都有一款自己的前端框架

虽然没有完美的框架，但是我心中总是有那么一款改进型框架，它美妙绝伦的融合了主流框架的优点，又避免了很多的槽点，做梦都想使用。

你有吗？

我来说说我心目中的这个框架是什么样子。

改造 Vue 3

假设让我基于 Vue 3 做改造，那么我心目中的 Vue 3 是这样的：

默认使用setup，不再兼容 Vue 2。
不再向下兼容意味着 options api 可以去掉了。
options api 去掉，那么只剩一个 setup 方法作为组件的唯一定义方式，defineComponent 不再有任何意义。
setup 方法作为组件的唯一定义方式，那么我们完全可以通过定义一个函数代替setup选项来定义组件。
去掉指令、过滤器等特性，保持简单

改造 React

假设让我基于 React 做改造，那么我心目中的 React 是这样的：

去掉 class 组件
只运行一次，不使用 hooks
使用 Composition API
去掉合成事件

融合起来

同时参考上文描述的几点，我还希望我的框架能够融合 Vue 和 React，框架的目标形态：

函数作为组件唯一形态，组件定义更靠近 React
使用 JSX （Vue 和 React 版的 JSX 用法不一致，我以 React 为准）
使用 Composition API，精确更新组件，同时可以复用一些 Vue 的 API 生态

所以它看起来就是个 Composition API 版的 React，或者是 setup 单函数版的精简 Vue 3！

最终形态

框架的组件形态最终结果为 Vue & React 的结合体！

function App(props) {
  const title = toRefs(props)
  const hello = ref('')

  onMounted(() => { hello.value = 'hello' })

  return () => (
    <div>
      <h1>{title.value}</h1>
      {hello.value}
    </div>
  )
}

App.propTypes = { hello: propTypes.string }
App.defaultProps = { hello: '' }

这不就是 React 吗？不对，返回的是一个函数，用的是 Composition API。

这不就是 Vue 3 setup 函数吗？是，但是它被提取出来了，直接作为组件，props 的定义是 React 形式。

这就是我心目中的框架的样子，它并不是什么开创了全新使用体验的全新前端框架，而是一个倾注了我个人观点的改进型前端框架。

寻找

心目中的前端框架形态已经有了着落，那么它在哪儿呢？

前段时间我一直在找类似目标的项目，Github 上有个 reactivue 项目，它支持使用 Composition API 来写 React，但是使用体验没有达到我的预期，同时可以预见，在 React 社区下要推广这种是不可能被接受的，简直就是异端。

另一方面，Vue 3 也根本不可能放弃 Vue 2 的向下兼容做一个精简版，之前尤大写了个petite-vue，但是还是使用的模版，任然支持指令等额外的特性，并不是我心目中的形态。

没有办法，只能自己写了！

动手吧

经过一段时间的实践，我终于把自己心目中的框架实现出来了，目前已经可以跑前端顶级工业项目《TODO》了。

哈哈哈哈，够顶级！

框架的常规特性已经大部分支持，还有一些特性正在开发中，一些重要生态比如 Router、Transition、状态管理、UI 库等可以日后慢慢补，这里说一下关于 UI 库，得益于兼容 Vue 3 的 Composition API（尤大的 @vue/reactivity 太棒了），支持 Vue 3 的 UI 库迁移成本不是很高，比如Ant Design Vue、Arco Design Vue等等。

这个框架我会一直维护下去，因为我需要它帮我完成一些自己的项目，使用自己的框架写项目是我一直以来的梦想，现在第一步迈出去了，每迈一步就离梦想近一步，这感觉，真的，很棒！

发布

有人可能已经迫不及待了，不要急，等我这几天稍微整理一下项目代码，我就在 github/anuoua 发布，敬请期待！

提示：可以先 follow 一下啦，发布了可以第一时间收到提示哦。