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

創(chuàng)新互聯(lián)公司專業(yè)為企業(yè)提供豐都網(wǎng)站建設(shè)、豐都做網(wǎng)站、豐都網(wǎng)站設(shè)計(jì)、豐都網(wǎng)站制作等企業(yè)網(wǎng)站建設(shè)、網(wǎng)頁(yè)設(shè)計(jì)與制作、豐都企業(yè)網(wǎng)站模板建站服務(wù)，十年豐都做網(wǎng)站經(jīng)驗(yàn)，不只是建網(wǎng)站，更提供有價(jià)值的思路和整體網(wǎng)絡(luò)服務(wù)。

列表元素 | List Elements

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

React

Vue

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

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

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

如下是兩者組件的不同寫法。

React

Vue

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

組件生命周期 | Component Lifecycles

React

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

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

Vue

• created
• beforeMount
• mounted
• beforeUpdate
• updated

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

事件綁定 | Event Handling

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

React

Vue

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

計(jì)算屬性 | Computed Properties

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

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

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

分享文章：我為什么選擇Vue而不是React？
本文URL：http://fisionsoft.com.cn/article/dpsjhip.html