两者之间的区别很有意思, 但不仅仅局限于 JSX 与 Templates 或者丰富的 API 与少量的 API 的区别. React 和 vue 两者之间的选择可能导致截然不同的结果, 这一点在你一开始选择的时候可能并没有意识到. 当选择一个框架的时候, 一个重要的问题是我希望项目的复杂性在哪个部分.
React 和 Vue 可以完成很多相同的东西, 但它们的实现方式截然不同. 从一些反馈来看, 我很好奇是否有人真的同时使用这两个框架来做一些东西, 而不是写一些简单的组件, 只有那样才能透过表面肤浅的差异, 真正了解两者之间的内在区别.
不知你是否知道, Vue 深化了单文件组件的思想. 一个文件由模版, 脚本, 样式, 这些相互独立的模块组成. 有人发现这种方式开发起来很舒服, 因为每个模块的开发和传统的前端开发流程相似. 我个人很喜欢这种模块, 不是因为它长得像 html, 而是它就像页面上的地标一样, 层次分明, 容易识别, 通过地标就能很快地寻找到文件本身. React 中 JS 和 JSX 的组合运行得很好, 但还是有点混乱 (特别是当你添加样式组件到组合中去的时候). 而你无视这些, 并习惯它了. 有必要指出的是: React 使用 SFC(无状态组件) 时需要一个编译步骤, 但 Vue 不需要. 正因为 JSX 需要一个编译步骤, 所以当你考虑用 React 时你要多加考虑. 如果你想要在不需要编译的前提下把几个 script 文件合并到一个项目中, 那么 React 真的不是一个很好地选择, 除非你打算放弃 JSX 改用
React.createElement()
. 这种情况下, Vue 是显而易见更好的选择.
关于 Vue 的其他评论是: 它使用了 DSL(领域专用语言) 并且有大量的 API. 两者都是真的, 至少它的 API 比 React 要多, 但相对于其他的库来说, 它还是算少的. 这两个情况是分离但相关的. Vue 使用的 DSL 只是另一个抽象概念, 就像 SFC 一样. 它们被设计出来是为了你能更加高产, 并使你的代码保持整洁, 表述清晰. JXS 的存在是同样的原因, 它也是非标准化抽象, 但是允许你发挥 JavaScript 全部的能量. JSX 不是 JavaScript, 并且永远不会是, 比如说 airbnb 的代码风格指南禁止在 .js 文件中包含 JSX, 因为它们是非标准化的. 它们必须在自己的 .jsx 文件中运行.
一旦你知道 Vue 的 DSL 包含了一系列辅助方法和简写来让你更高效, 那要不要选择它就看你个人喜好了. 换句话说 (译者注: 如果选择 Vue) 你有更多的特殊语法要学. 有的人讨论学习新的 API 会带来认知上的负担, 这个质疑是有必要的(虽然我存有异议), 但是我会和他们争论: 正因如此, 反过来说, 简单的 API 意味着我们需要使用相对复杂的模式去完成特定的内容, React 因此也给我们带来大量认知负担. 我会解释这个.~ 我们不要忘记 React 的 API 数量在不断增加, 并以合理的速度持续增加. 我们最近获得了 context API, 在将来的某个时间点, 我们还将获得 Time Slicing 和 Suspense.~ 另外要注意到, React 同样被驱动着更新. React 团队很在意用户的需要, 并且在他们觉得有意义的地方做出改变. Context,Time Slicing,Suspense 这些特性已经或者即将被添加. 尽管这样, React API 仍然可能保持简洁而且只有当有意义的时候, 特性才会被添加.
值得一提的是, Vue 的文档是 API 文档的典范, 它极其简洁. React 文档在平均水平, 也还可以, 它的 API 更简单所以按道理说你不需要过多地查阅文档. 这一评论已经被批评了, 但我坚持这一点, 因为其他文档太糟糕了, 也没让 React 文档看上去很好, 相对于 Vue, 它们确实很一般. 我不是说 React 的文档特别糟糕, 只是相对于你所期待的优秀的库而言, 它很一般.
下面让我们来讨论抽象. 所有的前端框架都在做抽象, 有的抽象到更高的层级, 有的更低. 使用纯 JS 以声明式的风格来写 UI 组件是极其困难的, 所以 React 和 Vue 提供了很多方法来做到这一点, 并带上许多有用的插件, 允许我们绑定状态到 DOM, 而无需存储状态到 DOM, 以及在内容变化时可以高效地渲染.
所有的这些意味着, 如果你不想, 你不必使用 Vue 的模板和 DSL. 你可以只使用 React 中的 JSX 或者 createElement() 函数. 你也可以自己选择模板语言, 比如 Pug. 不知你有没发现, Vue 在这方面非常灵活. 它能够使用 SFC 来写真正的 UI 组件, 只用 JS 来写非渲染组件(只输出 script 代码块, 不包括 template 和 style), 然后根据你的需要切换到 JSX 或者渲染函数. 这种方法会给予你对工作方式难以置信的控制力, 并让你的代码保持整洁.
当你开始写更加高级的组件或者想要写真正的可复用组件(特别是那种包装其他组件为它赋能的组件), 你会开始发现一些明显的区别. 使用 React, 你需要使用一个或多个高阶组件, render props 或者函数作为子组件的开发模式. 这些模式没有任何问题, 对于现实问题它们是很好地解决方式, 但它们增加了明显的认知困难(比学习新的语法更加多), 因为它们真的是很复杂的模式. 使用 Vue, 这些模式没有必要, 因为它有更多的 API, 暴露了一系列传递数据的方法(如果你有兴趣的话了解一下嵌套插槽). 这意味着在 Vue 中, 你可以使用上面那些模式, 也可以使用其他形式的模式(嵌套插槽类似于 render props).
这不是说 Vue 比 React 简单, 也不是说 React 特别让人疑惑(嵌套插槽至少和 render props/ FaCC 一样复杂). 很多人忽略的关键点是使用 React 你需要尽快学会这些模式(很多流行的库使用它们), 但是 Vue 中的嵌套插槽使用得不是很频繁. 这一点有很多理由, 再次说明, 重要的区别不在于这些框架各自能做些什么, 而是解决普通问题使用到复杂模式的频率.
它们都是拥有各自优点的强大框架, 任何你可以使用一个做到的事, 另一个也可以 (真的很多).React 拥有更大的生态系统以及更好的工具, 拥有更多的工作机会. Vue 更容易上手, 拥有出色的灵活性, 它的 API 能让你避免使用 React 中的一些复杂模式, 它以一种更符合语言习惯的'Vue' 的方式运行. 比如向父组件传递消息, 而不是将回调函数作为属性向下传递. 它能让你的代码更整洁, 但这也是额外的抽象. Vue 还有更多核心库, 和 Vue 紧密结合在一起, 它们运行的方式和其他框架的类似方法基本相同. React 拥有的核心库少一些(Vue 的一些标准函数到了 React 就需要引一个库, 比如检查 prop 类型), 但总体上拥有的库却更多(由社区提供). 值得牢记的是, 随着生态圈的发展, 你最终能得到大量做相同事情的库, 我在 React 或者 Vue 中使用的大多数库抛开样式写法基本上和你选用的框架(React 还是 Vue) 无关(React 会让你重新思考样式布局, 这不是一件坏事), 所以你达成目标需要做的事可能会发生变化. 在我看来, 一个强大的生态系统的最终影响是, 你面临的问题很可能别人已经解决了, 这是 React 的流行带来的巨大红利,, 也是重要的考虑因素.
我两个都使用, 也都很喜欢. 它们用不同的方式让我困惑. 它们都有各自的特性你需要去习惯. 如果我不得不选择一个? 我会选择 Vue. 但这并不意味着你应该选. 亲自去试试, 看看你感觉怎么样. 对于任何严厉的批评或者过高的赞许都要保持怀疑态度, 因为它们都是由真正聪明的人开发的优秀框架, 你选择任何一个都不会太差. 我已经试着保持中立, 给出重要的区别. 我可能已经失败了, 因为有些东西在一个框架让人很恼火, 而另一个框架不会.
作者按: 我忘了提到 vue-cli, 它类似于 create-react-app+. 这真的是一个非常棒的工具, 能够快速建立可视化 UI, 这一点很有趣. 所以从某种意义上来说, Vue 中的工具真的很棒. 我同样忘了提 Typescript 在 Vue 中的整合目前还不是很好, 可能在 React 中会有更好的 TS 体验. 值得继续深究.
来源: https://juejin.im/post/5b25b3a16fb9a00e70686180