为什么我更喜欢 Vue 而不是 React？

vue

在前端三大框架的日趋成熟的今天，React 和 Vue 的“用户口碑”已经远远超过 Angular。在这篇文章中，我会解释：这些框架中，我为什么会偏爱 Vue？在过程中，我会尽力用客观的立场表达这些观点。

List Elements | 列表元素

在 Web app 中，最常见的元素就是用后端给到的数组渲染出一个列表。让我们看看这在 Vue 和 React 中的不同写法。

React

Vue

现在可以对比哪一个更简单：React 的 jsx 还是 Vue 的 template？你决定就好。

我更倾向于 Vue 的写法，它看起来更干净一些。

Component Skeleton Structure | 组件结构

如下是两者组件的不同写法。

React

Vue

对于一个组件来说，把视图层(html/css)和逻辑层(javascript)分开，会使得整个组件变得清爽易读。反观 React 的语法，乍一看是很混乱的（再次强调这只是我个人的看法）。

Components Lifecycles | 组件生命周期

React

- constructor

- componentWillMount

- componentDidMount

- componentWillUpdate

- componentDidUpdate

对于一个新手来说，要区分这些生命周期会让人感到些许疑惑（这可不是 React 的锅），你不能说这些命名有问题，但是从我的直观感受来说：确实不够简练。

Vue

- created

- beforeMount

- mounted

- beforeUpdate

- updated
简洁且通俗易懂。

Event Handling | 事件处理

在任何一个框架中，事件绑定都是一个高频的操作，所以它的写法应该尽可能的简单和直接。现在来看看 React 和 Vue 中事件绑定的不同写法。

React

Vue

对比之下，Vue 为事件绑定提供了非常简便的写法，但在 React 中，开发者需要在定义好函数之后再在 constructor 中绑定好 this 的指向，这对于一个简单的 click 事件来说显得有些不方便（如果用箭头函数定义的话，倒是不用这么麻烦）。

Computed Properties | 计算属性

值得一提的是，Vue 为开发者提供了一个很便捷的属性：computed（是的，React 并没有）。

假设我们有一个叫作 rmb 的属性，但是我们需要把它转换成 dollar 之后渲染在页面上。利用 computed 属性可以很方便的解决这个问题：

总之依我看来，在使用设计/开发体验/学习成本这三个角度，Vue 几乎是以压倒性的优势胜过了现如今的其他各种前端框架。

杠精退散

在公众号发这篇文之前，我优先在头条发了同样的内容，受益于头条的智能推荐系统，24小时内，我的文章被推荐了4万次，阅读量接近4千，

但随之而来我发现一件事情，评论区泛滥成灾：当自己的喜好和别人不一样时，很多人都会贬低对方喜好企图说服他人“弃暗投明“，我：？？？

喜欢(选择)是一件很 personal 的事情，其理由也可以很简单（就像我上文中提到的，都是一些写法上的区别），不需要讨论框架的源码，也不需要把两者在各种业务场景下的方案搬出来对比争个你死我活鱼死网破，我大可以因为一个 API 的名字就选择这个框架。

就比如，小明喜欢钢铁侠，我喜欢蜘蛛侠，小明说：“不行，蜘蛛侠没有钢铁侠厉害，你也要喜欢钢铁侠。“

那我觉得小明有病。