1. 首頁 > 生活百科 > >

為什么我不再用Vue react什么意思

知識百科生活經驗


為什么我不再用Vue react什么意思

文章插圖
作者 | Alexandre Lion
譯者 | 王強
【為什么我不再用Vue react什么意思】策劃 | 李俊辰
轉發鏈接：https://mp.weixin.qq.com/s/OvzPWFMw4NECgPeMVjoRsA
前言當我走進現代前端開發行業的時候，我做了一個每位開發人員都要做的決策：選擇一個合適的框架 。當時正逢 jQuery 被淘汰 ， 前端開發者們不再用它編寫難看的、非結構化的老式 JavaScript 程序了 。前端正在走向一個時髦的，流行的，模塊化的 JavaScript 框架的新時代 。所以我選擇了 VueJS 。
本文最初發布于 Medium 網站，經原作者授權由 InfoQ 中文站翻譯并分享 。
下面就是我熱愛（現在還是愛著）VueJs 的原因所在 。
1. 它將 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>2. Vuex 我開始了解狀態管理系統時是從 Redux 入門的 。它很難學，而且似乎過于復雜 。但有了 Vuex，體驗就太棒了 。
Redux 需要 action、reducer 和 store ， 而 Vuex 只有 action、mutation 和 store 。相比 mutation，reducer 的邏輯實在很難理解，因為在我學習后者時，很少見到優秀的學習資源 。在我看來，Vuex 對于新手來說更容易上手 。
3. NuxtJS老實說，受 React NextJS 啟發的 NuxtJS 是我在 Vue 項目中的默認框架 。我喜歡 Nuxt 項目的約定優于配置的架構 。
頁面位于 page 目錄下 。組件位于 component 目錄 。存儲在 store 目錄中 。中間件則在 middleware 目錄里 ， 依此類推 。
所有注入都是透明的 。所有配置都在 nuxt.config.js 里 。太棒了！它使你可以輕松構建啟用 SSR 的網站和 SPA 。
然而，我又試了一下 React
在學習 Vue 之前我也嘗試過 React，但后者初看上去太難學了 。隨著時間推移，我更深入了解了狀態管理機制和 ES6 語言規范，于是我對 React 的看法也有了變化 。
我看到有很多文章在推薦 React，甚至我周圍的人都在談論 React ， 所以我嘗試了一下 。結果很不錯，于是我開始在項目中使用這個框架 。下面是我眼中 React 一些最明顯的優勢 。
1. 對 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 應用程序，并且它的官方文檔并未包含入門所需的所有信息 。
2. JSXJSX 并非惡魔 。有兩個流派：親 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 更強大，更靈活 。
2. 省事的 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；而其他開發人員則偏愛函數式方法 。你可以在項目中同時使用兩者！
3. 社區偉大的項目背后都有很多偉大的頭腦 。
根據我的經驗，React 的文檔、第三方工具和模塊要比 Vue 多得多 。有時 ， 我會為很多 Nuxt 問題而掙扎許久 ， 搜索解決方案的過程中還會發現很多 Next（React）主題 。
看看 Github 倉庫，數字可以說明一切 。
為什么我不再用Vue react什么意思

文章插圖

為什么我不再用Vue react什么意思

文章插圖
或它們各自的框架：
為什么我不再用Vue react什么意思

文章插圖

為什么我不再用Vue react什么意思

文章插圖
如果社區能 更快 地修復錯誤，那么你的代碼也就會更可靠 。和你遇到相同問題的人越多，你解決問題的速度也會越快 。
Vue 3 即將到來……
Vue 3 中有很多重大更改，其中之一是 Composition API，有了它你就可以無需 Vuex 來管理狀態；還有很多很棒的特性即將到來！
四月份，尤雨溪曾在直播中表示 ， 目前的 Vue 3.0 已經可以投入使用，但是要求開發者自己對穩定性負責 。他建議生產項目暫時不要上，新的、小的項目可以試水 。
《聊聊昨晚尤雨溪現場針對Vue3.0 Beta版本新特性知識點匯總》
那么，我喜歡 VueJS 嗎？是的 。我喜歡 React 嗎？喜歡 。React 比 Vue 更好嗎？那就見仁見智了 。
推薦Vue學習資料文章：《讓Jenkins自動部署你的Vue項目「實踐」》
《20個免費的設計資源 UI套件背景圖標CSS框架》
《Deno將停止使用TypeScript，并公布五項具體理由》
《前端骨架屏都是如何生成的》
《Vue原來可以這樣寫開發效率杠杠的》
《用vue簡單寫一個音樂播放組件「附源碼」》
《為什么Vue3.0不再使用defineProperty實現數據監聽？》
《「干貨」學會這些Vue小技巧，可以早點下班和女神約會》
《探索 Vue-Multiselect》
《細品30張腦圖帶你從零開始學Vue》
《Vue后臺項目中遇到的技術難點以及解決方案》
《手把手教你Electron + Vue實戰教程（五）》
《手把手教你Electron + Vue實戰教程（四）》
《手把手教你Electron + Vue實戰教程（三）》
《手把手教你Electron + Vue實戰教程（二）》
《手把手教你Electron + Vue實戰教程（一）》
《收集22種開源Vue模板和主題框架「干貨」》
《如何寫出優秀后臺管理系統？11個經典模版拿去不謝「干貨」》
《手把手教你實現一個Vue自定義指令懶加載》
《基于 Vue 和高德地圖實現地圖組件「實踐」》
《一個由 Vue 作者尤雨溪開發的 web 開發工具—vite》
《是什么讓我愛上了Vue.js》
《1.1萬字深入細品Vue3.0源碼響應式系統筆記「上」》
《1.1萬字深入細品Vue3.0源碼響應式系統筆記「下」》
《「實踐」Vue 數據更新7 種情況匯總及延伸解決總結》
《尤大大細說Vue3 的誕生之路「譯」》
《提高10倍打包速度工具Snowpack 2.0正式發布，再也不需要打包器》
《大廠Code Review總結Vue開發規范經驗「值得學習」》
《Vue3 插件開發詳解嘗鮮版「值得收藏」》
《帶你五步學會Vue SSR》
《記一次Vue3.0技術干貨分享會》
《Vue 3.x 如何有驚無險地快速入門「進階篇」》
《「干貨」微信支付前后端流程整理(Vue+Node)》
《帶你了解 vue-next（Vue 3.0）之 爐火純青「實踐」》
《「干貨」Vue+高德地圖實現頁面點擊繪制多邊形及多邊形切割拆分》
《「干貨」Vue+Element前端導入導出Excel》
《「實踐」Deno bytes 模塊全解析》
《細品pdf.js實踐解決含水印、電子簽章問題「Vue篇」》
《基于vue + element的后臺管理系統解決方案》
《Vue仿蘑菇街商城項目（vue+koa+mongodb）》
《基于 electron-vue 開發的音樂播放器「實踐」》
《「實踐」Vue項目中標配編輯器插件Vue-Quill-Editor》
《基于 Vue 技術棧的微前端方案實踐》
《消息隊列助你成為高薪 Node.js 工程師》
《Node.js 中的 stream 模塊詳解》
《「干貨」Deno TCP Echo Server 是怎么運行的？》
《「干貨」了不起的 Deno 實戰教程》
《「干貨」通俗易懂的Deno 入門教程》
《Deno 正式發布，徹底弄明白和 node 的區別》
《「實踐」基于Apify+node+react/vue搭建一個有點意思的爬蟲平臺》
《「實踐」深入對比 Vue 3.0 Composition API 和 React Hooks》
《前端網紅框架的插件機制全梳理（axios、koa、redux、vuex）》
《深入Vue 必學高階組件 HOC「進階篇」》
《深入學習Vue的data、computed、watch來實現最精簡響應式系統》
《10個實例小練習，快速入門熟練 Vue3 核心新特性（一）》
《10個實例小練習，快速入門熟練 Vue3 核心新特性（二）》
《教你部署搭建一個Vue-cli4+Webpack移動端框架「實踐」》
《2020前端就業Vue框架篇「實踐」》
《詳解Vue3中 router 帶來了哪些變化？》
《Vue項目部署及性能優化指導篇「實踐」》
《Vue高性能渲染大數據Tree組件「實踐」》
《尤大大細品VuePress搭建技術網站與個人博客「實踐」》
《10個Vue開發技巧「實踐」》
《是什么導致尤大大選擇放棄Webpack？【vite 原理解析】》
《帶你了解 vue-next（Vue 3.0）之 小試牛刀【實踐】》
《帶你了解 vue-next（Vue 3.0）之 初入茅廬【實踐】》
《實踐Vue 3.0做JSX(TSX)風格的組件開發》
《一篇文章教你并列比較React.js和Vue.js的語法【實踐】》
《手拉手帶你開啟Vue3世界的鬼斧神工【實踐】》
《深入淺出通過vue-cli3構建一個SSR應用程序【實踐】》
《怎樣為你的 Vue.js 單頁應用提速》
《聊聊昨晚尤雨溪現場針對Vue3.0 Beta版本新特性知識點匯總》
《【新消息】Vue 3.0 Beta 版本發布，你還學的動么？》
《Vue真是太好了 壹萬多字的Vue知識點 超詳細!》
《Vue + Koa從零打造一個H5頁面可視化編輯器——Quark-h5》
《深入淺出Vue3 跟著尤雨溪學 TypeScript 之 Ref 【實踐】》
《手把手教你深入淺出vue-cli3升級vue-cli4的方法》
《Vue 3.0 Beta 和React 開發者分別杠上了》
《手把手教你用vue drag chart 實現一個可以拖動 / 縮放的圖表組件》
《Vue3 嘗鮮》
《總結Vue組件的通信》
《Vue 開源項目 TOP45》
《2020 年 ， Vue 受歡迎程度是否會超過 React？》
《尤雨溪：Vue 3.0的設計原則》
《使用vue實現HTML頁面生成圖片》
《實現全棧收銀系統（Node+Vue）（上）》
《實現全棧收銀系統（Node+Vue）（下）》
《vue引入原生高德地圖》
《Vue合理配置WebSocket并實現群聊》
《多年vue項目實戰經驗匯總》
《vue之將echart封裝為組件》
《基于 Vue 的兩層吸頂踩坑總結》
《Vue插件總結【前端開發必備】》
《Vue 開發必須知道的 36 個技巧【近1W字】》
《構建大型 Vue.js 項目的10條建議》
《深入理解vue中的slot與slot-scope》
《手把手教你Vue解析pdf(base64)轉圖片【實踐】》
《使用vue+node搭建前端異常監控系統》
《推薦 8 個漂亮的 vue.js 進度條組件》
《基于Vue實現拖拽升級（九宮格拖拽）》
《手摸手 ， 帶你用vue擼后臺 系列二(登錄權限篇)》
《手摸手，帶你用vue擼后臺 系列三(實戰篇)》
《前端框架用vue還是react？清晰對比兩者差異》
《Vue組件間通信幾種方式，你用哪種？【實踐】》
《淺析 React / Vue 跨端渲染原理與實現》
《10個Vue開發技巧助力成為更好的工程師》
《手把手教你Vue之父子組件間通信實踐講解【props、$ref 、$emit】》
《1W字長文+多圖，帶你了解vue的雙向數據綁定源碼實現》
《深入淺出Vue3 的響應式和以前的區別到底在哪里？【實踐】》
《干貨滿滿!如何優雅簡潔地實現時鐘翻牌器(支持JS/Vue/React)》
《基于Vue/VueRouter/Vuex/Axios登錄路由和接口級攔截原理與實現》
《手把手教你D3.js 實現數據可視化極速上手到Vue應用》
《吃透 Vue 項目開發實踐｜16個方面深入前端工程化開發技巧【上】》
《吃透 Vue 項目開發實踐｜16個方面深入前端工程化開發技巧【中】》
《吃透 Vue 項目開發實踐｜16個方面深入前端工程化開發技巧【下】》
《Vue3.0權限管理實現流程【實踐】》
《后臺管理系統，前端Vue根據角色動態設置菜單欄和路由》
作者 | Alexandre Lion
譯者 | 王強
策劃 | 李俊辰
轉發鏈接：https://mp.weixin.qq.com/s/OvzPWFMw4NECgPeMVjoRsA