攜手創作，共同成長！這是我參與「掘金日新計劃 · 8 月更文挑戰」的第 18 天，點選檢視活動詳情

前端框架經歷了十多年的爭奇鬥豔百花齊放，經歷了 JSP、jQuery、Ember、Angular、React、Vue、Solid、Svelte 等等。如今所有人都要承認的一個事實是：在上百個前端框架中，最具影響力的只剩下了兩個，Vue 與 React。
Vue 進入 3.x 時代已經將近 2 年了，React 也在今年 3 月 29 日釋出了 React 18 版本。
今天就來聊聊在當今 2022 年，兩者還有哪些區別。
下面我們從頭開始對比它們，看看到底誰更勝一籌。

安裝與啟動

從兩個框架的安裝開始。

Vue

Vue 提供了 Vue CLI 建立 Vue 專案，安裝命令如下： bash npm install -g @vue/cli 安裝成功後可以通過檢視版本來確定安裝成功。 bash vue --version 建立新的專案執行以下命令： bash vue create project cd project npm run serve

React

建立 React 專案的工具是 create-react-app，簡稱 CRA。 bash npm install -g create-react-app 建立新的專案執行以下命令： bash npx create-react-app project cd project npm run start

結論

兩者在安裝和啟動專案上幾乎一致，平手。

Props

兩個框架都是使用元件作為基礎開發的，那麼父子元件傳值就成了一個問題。props 是將資料從父元件傳遞給子元件的關鍵技術。

Vue

在 Vue 中，props 使用普通的字串傳遞。也可以通過 v-bind 指令傳遞變數，縮寫是冒號（:）。
父元件傳值： vue <template> <Modal :isOpen="open" title="建立專案" /> </template> 子元件訪問 props 需要使用 defineProps 函式： ```vue

```

React

在 React 中，props 是通過花括號傳遞變數的。
父元件傳值： jsx <Modal isOpen={open} title="建立專案" /> 子元件通過引數的方式獲取 props： jsx function Modal({ isOpen, title }) { return ( {isOpen && <form> <p>{ title }</p> </form> ); }

結論

在傳遞 props 時，Vue 需要在屬性前面額外新增指令，如果忘記新增指令會導致傳遞字串。React 則不會有這種情況。
在子元件取值時，Vue 需要呼叫 defineProps 函式，React 通過函式的引數獲取，更加自然。
綜合對比，Vue 心智負擔更大，React 則更加自然。這一輪 React 勝。

Event

Vue 使用了模板語法，React 使用了 JSX 語法。所以在編寫 HTML 上發生了變化。但我們仍然需要為元素新增滑鼠事件、鍵盤事件等。事件的處理也是一個必須事情。

Vue

Vue 處理事件通過 v-on 指令完成的，簡寫是 AT 符號（@）。 ```vue