在前端三大框架的日趋成熟的本日，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 的语法，乍一看是很紊乱的（再次夸大这只是我小我私人的观点）。

组件生命周期 | Component Lifecycles

React

• constructor
• componentWillMount
• componentDidMount
• componentWillUpdate
• componentDidUpdate
• render

对付一个新手来说，要区分这些生命周期会让人感想些许迷惑（这可不是 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 险些是以压倒性的上风赛过了现现在的其他各类前端框架。

【编辑保举】

1. 终于有人把Elasticsearch道理讲透了_技能栈微信半月刊第39期
2. 热门 | 高通与苹果不测息争 放弃全部诉讼
3. 在阿里做了五年技能主管，我有话想说
4. 绎维软件F-One完成B轮融资 进级企业绩效打点与说明处事
5. Linux 绝对霸主，Linux 开拓者将来可期

（编辑：河北网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!