原文链接请戳：Why I Chose React Over Vue（by Steven Poulton)

正文

你们有注意到我过份官方的题目(可能指措辞 chose， 未使用 better than)了么？这是我企图就着个人的 “倾向性”（而不是信仰）来进行讨论，客观上要强于希望将本次讨论转化成框架派系的又一次 “火拼”。我认为后者没有任何作用。

React 和 Vue 表面上非常相似，我有项目中两个均在使用。他们都使用虚拟 DOM，它们都是专注在视图上的 JS 库。

它们作为一种灵活的 HTML 渲染工具，都是对于相同的问题的解决方案。但我相信它们有一个简单的定义（理念）上的差异，会通过你的整个开发流程体现出来：

React 完全拥抱了 Javascript，而 Vue 并没有。

在 React 用户中经常听到的常见口头禅是 “只有 Javascript”，这是非常真实的。Vue 似乎有很多不必要的魔法，这使得组件更难理解。

比如：

• Templates：

一个 React 组件可以简单地被认为是返回元素的函数（或至少有一个具有这样功能的类）。这个功能性方法对于 Javascript 开发人员是非常自然的。数据输入，元素输出。如果你有一组数据，你可以简单地将它们映射到元素列表。如果要排除其中的某些项目，您可以使用 Array 类型的过滤器 filter，并将结果 map 到指定元素。这个功能性工作流程完美地反映了您对应用程序的其他部分的理解。这种方法是对 Javascript 的优势的补充。

Vue 组件更像是可以引用数据结构中的数据的模板。它包含一个 DSL（Domain specific languag），尽管次要, 但是完全不必要的。我不需要 v-for，因为我有原生的 map()。我不需要 v-if，因为我有老生常谈的常规 if。模板至少会引入一定程度的认知负荷，有限或无益。

模板还引入了作用域问题。如果我将一些静态数据导入到我的 React 组件中，我可以在我的渲染函数中使用它，因为所有标准的 JavaScript 范围规则都适用。它只是一个 function，与其他 function 完全一样。 Vue 的模板在一个与 JavaScript 分开的作用域中进行运作，因此你必须先将该静态数据合并到 Vue 组件中并将其作为计算字段返回。这些东西虽然都不是特别痛苦，但都是很不必要的。

• Tooling

因为 React 是 “Just Javascript”，所以在我的经验中，开发体验要好得多。例如，prettier-js（一个代码格式化程序）只适用于 JSX，但是在 Vue 模板中与嵌入式表达式相悖，因为 Vue 模板不是“Just Javascript”。另外，因为模板和 Javascript 在不同的作用域内运行，所以对于一个 linter 来说，去检测模板中缺少或者拼错变量是不可能的（目前至少是这样）。这是另一个轻微的不爽，但这是不必要的。

• 最大的败笔(这么翻译会不会被打 =,=)：可变 state

React and Redux 以不可变为核心。以相同的方式，React 渲染函数是将 props 转换为元素的 reducer，React 状态更改只是将旧状态和操作降级到新状态的函数。

然而，Vue（和 Vuex）具有反应状态，这意味着您可以按照强制方式修改状态。这与 Javascript 中其他地方使用的功能风格不兼容。

我非常习惯于不可变数据结构，他们让我感到十分安全。因为所有 Vuex 为store 中添加的getter/setter的方法，Vuex 几乎在强迫你不要使用它们。

而在 React/Redux 中， state/store “仅仅就是 Javascript 对象而已”。

BTW, 夹带点儿私货

随手翻了原文下面的评论，果然还是开撕了, 哈哈。

Justin Walters:
Unfortunately, it did not work. Mainly because you did not frame any of your arguments as opinion. And, frankly, many of your core points are completely and objectively incorrect. Please understand that with my following comment I do not mean to demean you or your work.
Vue 粉无疑，近乎全盘否定上文观点，并且逐条批判。作者回复平和，比较和谐。

Ed:
Let me tell you the real reason you chose React: you know it better
And that’s a legitimate way of choosing a framework 🙂.
FYI You can do jsx in Vue as well, linting works nicely with vue components and you can use redux with Vue too.
这个就没有就事论事了，纯属臆测。

Daniel S:
What’s „overly diplomatic“ about the title? Would you instead have written “Why React is awesome and Vue sucks“? If you don’t want to be responsible for childish flame wars, should you even tell the world your opinion on what’s better or worse?
这个就有点挑事儿了哈，直接冲着题目动机来的。

Ferenc Sticza:
You use the temr “the getter/setter magic”… Do you know how Object.defineProperty() works?
上来就问Object.defineProperty()的原理？个人觉得有点挑衅的意思，但是也有可能试一试作者深浅。作者直接说我之前玩 C# 的 …

不过总的来说，大多数回复基本上都没有多少酸味儿，也没有讽刺挖苦，当然，更没有人身攻击。

撕撕要健康，撕撕更健康。

The end.

如果觉得文章对你有帮助的话，去 Github Repo 给个 star 也是最好不过的 : )