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

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

列表元素 | List Elements

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

React

Vue

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

我更傾向于 Vue 的寫法，它看起來更干凈一些。

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

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

React

Vue

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

組件生命周期 | Component Lifecycles

React

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

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

Vue

• created
• beforeMount
• mounted
• beforeUpdate
• updated

簡潔且通俗易懂。

事件綁定 | Event Handling

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

React

Vue

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

計算屬性 | Computed Properties

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

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

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

分享文章：我為什么選擇Vue而不是React？
網(wǎng)站網(wǎng)址：http://www.5511xx.com/article/dpsjhip.html