近日突然看到“為什么Vue在國際上越來越?jīng)]影響力”這樣一個問題

---

我來回答一下

如果Vue 單純看 star 數(shù)量的話，確實(shí)比 React 多啊

說實(shí)話，Vue 實(shí)際上策略是緊跟 React，我們組內(nèi)部討論的時候，一般把 Vue 看作是全工具鏈的 React 框架，無論是老版本還是新版本

Vue 和 React 的原理性差異幾乎沒有，這點(diǎn)和 ng 不同，因?yàn)樵陂_發(fā) ng 的時候，編程思維都需要徹底轉(zhuǎn)變才能進(jìn)行

所以，你對 Vue 和 React 的比較，可能完全沒有意義，因?yàn)榻^大多數(shù)有能力的開發(fā)者，Vue React 雙修基本沒有太多額外成本，但是如果加入 ng，那成本就指數(shù)上升了

在響應(yīng)式方面，Vue 和 React 都是數(shù)據(jù)驅(qū)動，簡而言之就是，渲染的發(fā)生總是因?yàn)槲倚薷牧四硞€數(shù)據(jù)，細(xì)節(jié)差異你直接看 mobx 文檔就能知道（數(shù)據(jù)變化應(yīng)該自發(fā)地傳遞），也就是 Vue 加入 defineProperty 或者 proxy 的原因，實(shí)際上是對 React 在詞法邏輯表達(dá)能力的優(yōu)化，增強(qiáng) React 的架構(gòu)能力

這部分差異體現(xiàn)在使用上，也就是你在變量綁定時，是傳 value onChange 兩個參數(shù)，還是 v-model 一個參數(shù)，是定義 getter setter 綁定兩個 state，還是 computed 傳入 getter setter 綁定，在功能上是沒有一點(diǎn)點(diǎn)差異的，也就可讀性和命名負(fù)擔(dān)以及純度（質(zhì)量控制）上有些許差異

這點(diǎn)和 ng 區(qū)別特別大，ng 渲染發(fā)生（或者臟檢發(fā)生），不是因?yàn)槟阈薷牧四硞€數(shù)據(jù)，而是因?yàn)橛挟惒桨l(fā)生，這個根本性不同，會導(dǎo)致編程思維根本性變化，比如，事件不需要你去做 batchUpdate，響應(yīng)式也不需要考慮，反正視圖總會響應(yīng)，但是檢查次數(shù)需要你去做限制，否則檢查次數(shù)太過頻繁，同時hmr將變得非常拉跨，補(bǔ)償是邏輯組織能力非常強(qiáng)，意味著測試比調(diào)試容易

常用的分布式計算模型就兩個，CSP 和 Actor，React 占了 CSP（用過 reducer 沒？），ng 占了 Actor（別再問為啥 ng 沒有狀態(tài)管理了），所以沒有多余的坑位給 Vue

雖然，React 選擇社區(qū)最優(yōu)第三方，其實(shí)是能夠比 Vue 開發(fā)體驗(yàn)更好：

styled-components 比 Vue <style scoped/> + css module 效率更高

react-router 比 vue-router 靈活性更強(qiáng)（路由作為組件更方便掛載上下文，同時不會引入更多概念）

原生集成 csp useReducer 比引入 vuex 效率更高（一般來說我還是不喜歡外掛 csp）

但是，如果從統(tǒng)一語言的角度，React 是失敗的，因?yàn)楦嗟纳鐓^(qū)選擇意味著更多的可能應(yīng)用形態(tài)，語言更加不統(tǒng)一，團(tuán)隊(duì)協(xié)作更加困難

這里也可以順帶解釋 Vue 和 React 難易程度之爭，單純看 Vue 和 React，React 更簡單，React 核心 api 就那么 6 個，useState，useMemo，useRef，useCallback，useEffect，useLayoutEffect，一個網(wǎng)頁翻個 4，5 次就能看完，學(xué)會也就幾個小時的事情。但是如果是問能干活的情況，React 和 一眾層次不齊各種思想的庫，和 Vue 比就難到天上去了，甚至我們使用 React 的時候，原則都是盡量不用庫，用了也要想辦法替代，比如進(jìn)出動畫，React 原生實(shí)現(xiàn)起來不要太簡單，也不知道為何有那么多動畫庫

同時，雖然更細(xì)劃分的 csp 靈活性更強(qiáng)，但是總是需要傳入的依賴數(shù)組也需要進(jìn)行專門的學(xué)習(xí)和練習(xí)，就算現(xiàn)在，很多第三方 hooks 都沒有強(qiáng)制傳入 useCallback 吧？

所以，這就給 Vue 帶來了機(jī)會，可以這么說，如果沒有 Vue，React 生態(tài)也會自發(fā)出現(xiàn)一個類似 Vue 的 React “框架”，而且肯定比 Vue 拉跨

不過，Vue 的上一次跟進(jìn) Vue2 是成功的，原因是 React 16.8 以前的版本，實(shí)在是太屎了（不想回憶，此處省略 1000 字）

但是新版本 Vue3 的跟進(jìn)還有待商榷，原因有以下幾點(diǎn)：

template 表達(dá)能力不夠

這個問題其實(shí)一直存在，甚至很多沒用過 ng 的朋友，還會爭論 template 和 jsx 誰更強(qiáng)，實(shí)際上你用過 ng html+ 就知道，html 里寫 js 和 js 里面寫 html 表達(dá)能力是一樣的，之所以有這個爭論，原因就是 vue template 限制太大

比如 renderProps，實(shí)際上是可以寫在 template 里的，比如 ng 模板引用變量：

<some-compo [someTemplate]="templateRef"></some-compo> <!-- 動態(tài) template 想寫在哪里都可以，不同組件甚至不同module --> <ng-template #templateRef><div>this is render</div> </ng-template>

而 Vue 這部分能力還需要用 jsx，這就很坑人，也會導(dǎo)致很多社區(qū)生態(tài)直接全部采用 jsx 開發(fā)，相當(dāng)于把開發(fā)者往 React 社區(qū)推，因?yàn)槿绻质褂?jsx，Vue 相對于 React 的優(yōu)勢將蕩然無存

還有 Vue 的 template 中無法隨心所欲寫 js/ts ，不過這個也說不清是優(yōu)勢還是劣勢

不過好在現(xiàn)在終于有 ts 支持了

2. 調(diào)度拆分不夠細(xì)

如果同步修改兩個 ref/reactive ，watch 這兩個 ref/reactive，只能獲得一次變更

const a = ref(0) const b = ref(0) setTimeout(()=>{a.value = 1b.value = 1 },0) watch(()=>[a,b], console.log) // 只變化一次

這個問題其實(shí)挺嚴(yán)重的，因?yàn)槿绻阍谥虚g修改了某個非響應(yīng)式數(shù)據(jù)：

a.value = 1 someValue = true b.value = 1

這個 someValue 的變化，你無法在 watch 中捕獲

再更進(jìn)一步，這個 a,b 兩個響應(yīng)式變量的拆分，變的沒有意義了，或許默認(rèn)只有一個響應(yīng)式變量更好一些？還能解決 ref/reactive 心智負(fù)擔(dān)問題？畢竟拆分根本沒有作用，他們并不是兩個獨(dú)立的響應(yīng)式數(shù)據(jù)源

不過 Vue 還在演化階段，不像 React 18 基本定型

3. Vue 沒有 batchUpdate

這個其實(shí)更加讓人疑惑，因?yàn)?batchUpdate 這個問題，出現(xiàn)在 Vue 比 出現(xiàn)在 React 更加讓人恐慌

比如就拿上面的例子：

setTimeout(()=>{a.value = 1b.value = 1 },0) // watch 調(diào)用一次 setTimeout(()=>{a.value = 1 },0) setTimeout(()=>{b.value = 1 },0) // watch 調(diào)用兩次

同一個事件循環(huán)，拆開成兩個任務(wù)，就變化，一個任務(wù)，就不變，可能會造成雙倍困惑，因?yàn)楹芏鄷r候，開發(fā)時考慮事件循環(huán)就夠了，沒必要深入討論到任務(wù)先后順序上去，因?yàn)槿蝿?wù)調(diào)度很多時候是不確定的，而事件循環(huán)是確定的，同時更抽象一層

4. 保留生命周期，兼容老版本

Vue 是框架，與 React 定位不同，這也是 Vue 的市場立足之本，開發(fā)過程是不會輕易更換或升級框架的，React 作為一個庫，提供不同的 api，我只要不用歷史 api，就能和老版本劃清界限（比如，現(xiàn)在的 react 文檔，只看 hooks 和部分 jsx ，你會覺得這是個簡單到爆炸的庫，反而你一看老版本的 屎化 react，你會被卷成卷心菜，比如最近好多人都在討論 memo() , 也不知道在討論寫什么，還在糾結(jié)性能優(yōu)化，直接讓人黑人問號。不過新人沒有負(fù)擔(dān)，實(shí)際上新 React，新人比老人更容易上手）

但是 Vue 作為一個框架，應(yīng)該和老版本徹底劃清界限，生命周期刪除掉，老版本 api 全部刪除，別給老代碼提供機(jī)會，社區(qū)生態(tài)會有更好保障（框架 api 和庫不同，他不會直接做陳列，很多 api 隱藏很深，同時面積也會大得多）

生命周期對于跨組件邏輯來說是炸彈，watch flush 覆蓋生命周期功能，同時只會依賴具體數(shù)據(jù)，而不是依賴外部環(huán)境

這次大版本更新有內(nèi)置 csp，依賴注入（老版本依賴注入無類型推斷支持，無完全編程能力），實(shí)際上架構(gòu)是有翻天覆地變化的，ng 15年的版本更新也是因?yàn)檫@個原因，直接斷代更新

如果 Vue 不這么做，未來生態(tài)狀況會很讓人擔(dān)憂，如果生態(tài)和 React 一樣亂，代碼質(zhì)量甚至比 React 還要難以控制，是否會丟失核心競爭力？

不過好在，有 script setup 作為補(bǔ)償，目前看趨勢是很好的

5. class 支持不全

如果 Vue 的響應(yīng)式變量調(diào)度無法拆分，那么直接給 class 會不會更好？作為對 React 詞法邏輯能力的增強(qiáng)，不上 class 總歸有點(diǎn)奇怪，因?yàn)槊嫦驅(qū)ο缶褪窃~法邏輯發(fā)力的地方，自動生成文檔，自動生成 uml，自動分析，測試友好性，架構(gòu)友好性也更強(qiáng)

比如公共屬性默認(rèn) reactive，getter setter 默認(rèn) computed，帶裝飾器方法作為 watch，我試過很多次對 Vue 進(jìn)行 class 改造，但是無論是實(shí)例化加 reactive，還是裝飾器進(jìn)行處理，后果都是必須跳過 constructor 才能有初始化能力，如果真需要支持，還是得框架本身來進(jìn)行支持

如果本身有響應(yīng)式傳遞，卻把 ref value，watch 響應(yīng)式斷裂 等問題引入進(jìn)來，為什么不直接上 class 呢？

不然為了架構(gòu)能力，人們選 ng ，為了 csp 和靈活性，人們選 react，那么選 Vue 的意義又是什么？

但是 Vue 還是會比 React 更加熱門

哈哈，因?yàn)?Vite

由于 React 和 Vue 的用戶高度重疊，其實(shí)真正的競爭根本不在 RV 內(nèi)部，由于 Vite 直接帶來的純粹的性能提升，我們以及現(xiàn)在越來越多的 React 或者 多個框架使用者，都直接采用了 Vite

事情變得有趣起來

或許 Vue3 并沒有那么令人滿意，但是框架是可以慢慢優(yōu)化的，構(gòu)建工具卻是一旦選擇就會長期霸占市場

所以其實(shí) React 并沒有贏，因?yàn)榍岸丝蚣芷鋵?shí)并非核心競爭力，只是前端程序員內(nèi)卷的平臺，構(gòu)建工具才是關(guān)鍵

一個聰明的開發(fā)者，現(xiàn)在都是寫著 react，然后沒事 create @vitejs/app 看一下，Vue 好用了，呵呵，二話不說就轉(zhuǎn)過來了

都沒啥根本性差異，糾結(jié)那些細(xì)節(jié)有啥意義？相當(dāng)于影院都是 Vue 家的，我們糾結(jié)哪部電影好看，也就只是閑聊罷了？

---

支付寶智慧前端學(xué)習(xí)交流群

總結(jié)

以上是生活随笔為你收集整理的为什么Vue在国际上越来越没影响力？的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。