在前端三大框架的日趨成熟的今天，React 和 Vue 的“用戶(hù)口碑”已經(jīng)遠(yuǎn)遠(yuǎn)超過(guò) Angular。在這篇文章中，我會(huì)解釋?zhuān)涸谶@些框架中，我為什么會(huì)偏愛(ài) Vue？在這過(guò)程中，我會(huì)盡力用客觀的立場(chǎng)表達(dá)這些觀點(diǎn)。

列表元素 | List Elements

在 Web app 中，最常見(jiàn)的元素就是用后端給到的數(shù)組渲染出一個(gè)列表。讓我們看看這在 Vue 和 React 中的不同寫(xiě)法。

React

Vue

現(xiàn)在可以對(duì)比哪一個(gè)更簡(jiǎn)單：React 的 jsx 還是 Vue 的 template？你決定就好。

我更傾向于 Vue 的寫(xiě)法，它看起來(lái)更干凈一些。

組件結(jié)構(gòu) | Component Skeleton Structure

如下是兩者組件的不同寫(xiě)法。

React

Vue

對(duì)于一個(gè)組件來(lái)說(shuō)，把視圖層(html/css)和邏輯層(javascript)分開(kāi)，會(huì)使得整個(gè)組件變得清爽易讀。反觀 React 的語(yǔ)法，乍一看是很混亂的（再次強(qiáng)調(diào)這只是我個(gè)人的看法）。

組件生命周期 | Component Lifecycles

React

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

對(duì)于一個(gè)新手來(lái)說(shuō)，要區(qū)分這些生命周期會(huì)讓人感到些許疑惑（這可不是 React 的鍋），你不能說(shuō)這些命名有問(wèn)題，但是從我的直觀感受來(lái)說(shuō)：確實(shí)不夠簡(jiǎn)練。

Vue

• created
• beforeMount
• mounted
• beforeUpdate
• updated

簡(jiǎn)潔且通俗易懂。

事件綁定 | Event Handling

在任何一個(gè)框架中，事件綁定都是一個(gè)高頻的操作，所以它的寫(xiě)法應(yīng)該盡可能的簡(jiǎn)單和直接?，F(xiàn)在來(lái)看看 React 和 Vue 中事件綁定的不同寫(xiě)法。

React

Vue

對(duì)比之下，Vue 為事件綁定提供了非常簡(jiǎn)便的寫(xiě)法，但在 React 中，開(kāi)發(fā)者需要在定義好函數(shù)之后再在 constructor 中綁定好 this 的指向，這對(duì)于一個(gè)簡(jiǎn)單的 click 事件來(lái)說(shuō)顯得有些不方便（如果用箭頭函數(shù)定義的話，倒是不用這么麻煩）。

計(jì)算屬性 | Computed Properties

值得一提的是，Vue 為開(kāi)發(fā)者提供了一個(gè)很便捷的屬性：computed（是的，React 并沒(méi)有）。

假設(shè)我們有一個(gè)叫作 rmb 的屬性，但是我們需要把它轉(zhuǎn)換成 dollar 之后渲染在頁(yè)面上。利用 computed 屬性可以很方便的解決這個(gè)問(wèn)題：

總之依我看來(lái)，在使用設(shè)計(jì)/開(kāi)發(fā)體驗(yàn)/學(xué)習(xí)成本這三個(gè)角度，Vue 幾乎是以壓倒性的優(yōu)勢(shì)勝過(guò)了現(xiàn)如今的其他各種前端框架。