> Photo by Paul Gilmore on Unsplash
Vue是一個前端框架，最近幾年在React中逐漸流行起來。
由於這兩種框架各有利弊，因此很難在這兩種框架之間進行選擇。 選擇一個後，我們必須堅持幾年。
在本文中，我們將比較這兩個框架的最基本功能，即建立應用程式和顯示資料。
建立應用React具有Create React App命令列程式，可讓我們使用JavaScript或TypeScript建立該應用程式的支架。
它具有用於構建漸進式Web應用程式的內建支援。
Create React App可以執行__tests__資料夾中的測試。
Vue具有Vue CLI，可使用JavaScript或TypeScript建立應用程式，此外，我們還可以合併CSS，SASS，Less等樣式。 我們還可以通過更改Vue CLI中顯示的選項，將測試基礎架構直接新增到我們的支架中。
我們還可以從Vue CLI新增Vue路由器和Vuex。
它還支援構建漸進式Web應用程式。
Vue CLI具有用於建立快速專案原型應用程式的GUI。
除了使用CLI程式之外，我們還可以使用script標籤將React和Vue新增到我們的應用程式中。
但是，大多數React庫僅作為NPM軟體包提供。 可以通過指令碼標籤新增許多Vue庫。
這意味著Vue更適合增強舊版應用程式，因為它們通常沒有使用現代框架和構建工具構建的前端。
這也使Vue成為快速製作原型的更好選擇，因為我們可以通過指令碼標籤新增庫並使用它們而無需考慮構建工具和腳手架。
模板語法大多數React應用程式使用JSX在螢幕上顯示資料。 這是呼叫React.createElement方法的快捷方式。
Vue模板具有自己的語法。 例如，我們使用雙花括號在螢幕上顯示變數。
例如，我們可以編寫以下程式碼在React應用中顯示變數的值：
import React, { useState } from "react";export default function App() { const [foo] = useState("foo"); return <div className="App">{foo}</div>;}而我們編寫以下程式碼以在Vue應用中顯示變數的值：
index.html：
<!DOCTYPE html><html lang="en"> <head> <title>App</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id="app"> {{foo}} </div> <script src="index.js"></script> </body></html>index.js：
const app = new Vue({ el: "#app", data: { foo: "foo" }});在上面的程式碼中，我們通過編寫以下程式碼來顯示模板中資料中foo屬性的值：
{{foo}}React方法稍微簡單一點，因為我們將所有內容都放在了相同的元件函式中。
另一方面，我們在單獨的模板中添加了要與Vue一起顯示的內容。
在這兩種情況下，我們都需要學習一些新的語法。
有條件地顯示資料在React應用程式中，我們使用類元件的render方法中的常規if或switch語句有條件地顯示專案，或者在函式元件中返回JSX。
啟用和禁用它們的邏輯全部在元件檔案本身中。
例如，我們可以編寫以下程式碼在React應用程式中開啟和關閉某些內容：
import React, { useState } from "react";export default function App() { const [show, setShow] = useState(); const toggleShow = () => { setShow(!show); }; return ( <div className="App"> <button onClick={toggleShow}>Toggle</button> {show && <div>foo</div>} </div> );}在上面的程式碼中，我們添加了一個Toggle按鈕，然後使用setShow函式的顯示狀態在true和false之間切換顯示狀態。
然後我們有條件地顯示div：
{show && <div>foo</div>}使用Vue，我們可以在模板上顯示專案，並使用v-if對其進行控制。
例如，我們可以編寫以下程式碼來做到這一點：
index.html：
<!DOCTYPE html><html lang="en"> <head> <title>App</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id="app"> <button @click="toggle">Toggle</button> <div v-if="show">foo</div> </div> <script src="index.js"></script> </body></html>index.js：
const app = new Vue({ el: "#app", data: { show: false }, methods: { toggle() { this.show = !this.show; } }});在上面的程式碼中，我們使用了toggle方法來開啟和關閉this.show。
如我們所見，React實現比Vue實現更簡單。
我們還必須了解Vue元件的各個部分，例如何時呼叫元件方法以及將狀態儲存在何處。
使用useState React鉤子，這一點更加明顯。 我們也不必在模板和元件中新增內容即可新增內容。
我們可以使用React元件將所有內容新增到一個檔案中。 這對於簡單的元件更方便。
但是，Vue的方法更方便於將邏輯與顯示程式碼分離。
當事情比較複雜時，這是一種組織元件的更乾淨的方法。
> Photo by Emre Gencer on Unsplash
判決Vue更像是一個成熟的框架，而React更像是一個庫。
Vue CLI還有許多用於建立應用程式的選項，以及用於建立應用程式所需的選項。
Create React App僅具有用於建立沒有路由或任何狀態管理解決方案的基本應用程式的選項。
這不是理想的選擇，因為大多數人都希望使用單頁應用程式而不是增強舊版應用程式。
另外，Vue庫可用作指令碼標籤，而大多數React庫僅可用作Node包。
Vue是帶有Vue CLI及其選項的明確贏家。
顯示資料與React和Vue相似。 它們都需要一些邏輯並在螢幕上顯示專案並有條件地顯示專案。
他們都有自己的工作流程，但是Vue的設計在邏輯和模板之間有更清晰的分隔，而React將所有東西都放在一個地方。
Vue適用於複雜的顯示邏輯，而React適用於簡單的邏輯。
(本文翻譯自John Au-Yeung的文章《React vs Vue — App Creation and Display》，參考：https://medium.com/swlh/react-vs-vue-app-creation-and-display-3762cf9baddf)