當我走進現代前端開發行業的時候，我做了一個每位開發人員都要做的決策：選擇正確的框架。那時jQuery正在被淘汰，人們不再用它編寫難看的、非結構化的老式JavaScript程序了。我們正在走進一個時髦的，流行的，模塊化的JavaScript框架的新時代。所以我選擇了VueJS。
本文最初發佈於Medium網站，經原作者授權由InfoQ中文站翻譯並分享。
下面就是我熱愛（現在還是愛着）VueJs的原因所在。
它將 HTML/CSS/JS 結構結合到了一起
目前來看，這是VueJS最吸引人的優勢。
Vue文件對初學者非常有吸引力。它易於理解，而且我們很容易將整個HTML模板分解爲許多Vue文件。我一眼就能看出來結構（模板）、行爲（腳本）和外觀（樣式）。
<template>
<div id="myComponent">
<Counter />
<span v-if="reading">Hello reader !</span>
</div>
</template>
<script>
import Counter from "@/components/Counter";
export default {
name: "myComponent",
components: {
Counter
}
}
</script>
<style>
#myDiv {
display: block;
}
</style>
Vuex
我開始瞭解狀態管理系統時是從Redux入門的。它很難學，而且似乎過於複雜。但有了Vuex，體驗就太棒了。
Redux需要action、reducer和store，而Vuex只有action、mutation和store。相比mutation，reducer的邏輯實在很難理解，因爲我學習後者時相關的優秀學習資源很少見。在我看來，Vuex對於新手來說更容易上手。
NuxtJS
老實說，受React NextJS啓發的NuxtJS是我在Vue項目中的默認框架。我喜歡Nuxt項目的約定優於配置的架構。
頁面位於page目錄下。組件位於component目錄。存儲在store目錄中。中間件則在middleware目錄裏，依此類推。
所有注入都是透明的。所有配置都在nuxt.config.js裏。太棒了！它使你可以輕鬆構建啓用SSR的網站和SPA。
然而，我又試了一下React
在學習Vue之前我也嘗試過React，但後者初看上去太難學了。隨着時間推移，我更深入瞭解了狀態管理機制和ES6語言規範，於是我對React的看法也有了變化。
我看到有很多文章在推薦React，甚至我周圍的人都在談論React，所以我嘗試了一下。結果很不錯，於是我開始在項目中使用這個框架。下面是我眼中React一些最明顯的優勢。
對ES6和TypeScript友好
開發人員掌控類、接口和枚舉。所以我很容易就能理解React組件的工作機制，並知道該如何將其集成到應用程序中。
你也可以在Vue中使用ES6語法，但是React比Vue設計得更好。看一下如何在React中註冊組件：
class MyComponent extends React.Component {
render() {
return(<div />)
}
}
對於VueJS，你將一個對象傳遞給Vue Component函數：
Vue.component({
template: `<div></div>`
})
也就是說，現代React（2020年）不再用到class，而是使用函數式組件（和hooks）。
VueJs現在提供了TypeScript支持。但這種支持不像React那樣自然，後者只需一條命令就能使用CRA（Create React App）獲得TS支持。
在Vue這邊，我們仍然需要一些帶有自定義裝飾器和特性的第三方包來創建一個真正完善的TypeScript應用程序，並且它的官方文檔並未包含入門所需的所有信息。
JSX
JSX並非惡魔。有兩個流派：親JSX和反JSX。我不想捲進他們的戰爭。JSX可以是天使也可以是惡魔，具體取決於你要如何使用模板。
從我的角度來看，對於開發人員來說，編寫像下面這樣的JSX更加合乎邏輯：
return (
<div>
{students.map(student => <p>{student}</p>)}
</div>
)
比Vue的方式更像HTML：
<div>
<p v-for="student in students">{{ student }}</p>
</div>
蘿蔔青菜各有所愛；我是覺得JSX更強大，更靈活。
省事的Hooks
我開始學習使用React組件做開發。問題在於，要創建單個組件作爲一個React組件類是很費事的。
class MyComponent extends React.Component {
constructor(props) {
super(props)
this.state = {
counter: 0
}
}
render() {
return(<div/>)
}
}
函數式組件讓你可以使用帶有hooks的局部狀態。它移除了很多樣板和無用的構造器。
function MyComponent() {
const [counter, setCounter] = useState(0)
return(<div />)
}
React Hooks簡化了狀態和其他React部件（如useEffect）的應用，現在我們用不着componentDidMount和componentDidUpdate了。
一些開發人員喜歡OOP方法，所以繼續使用class；而其他開發人員則偏愛函數式方法。你可以在項目中同時使用兩者！
社區
偉大的項目背後都有很多偉大的頭腦。
根據我的經驗，React的文檔、第三方工具和模塊要比Vue多得多。有時，我會爲很多Nuxt問題而掙扎許久，搜索解決方案的過程中還會發現很多Next（React）主題。
看看Github倉庫，數字可以說明一切。
或它們各自的框架：
如果社區能更快地修復錯誤，那麼你的代碼也就會更可靠。和你遇到相同問題的人越多，你解決問題的速度也會越快。
Vue 3即將到來……
Vue 3 中有很多重大更改，其中之一是 Composition API，有了它你就可以無需 Vuex 來管理狀態；還有很多很棒的特性即將到來！
四月份，尤雨溪曾在直播中表示，目前的 Vue 3.0 已經可以投入使用，但是要求開發者自己對穩定性負責。他建議生產項目暫時不要上，新的、小的項目可以試水。
《尤雨溪B站直播，Vue 3.0 Beta是一個值得體驗的全新版本》
那麼，我喜歡 VueJS 嗎？是的。我喜歡 React 嗎？喜歡。React 比 Vue 更好嗎？那就見仁見智了。
原文鏈接：
https://medium.com/better-programming/why-did-i-quit-vue-for-react-65315285fd90