我使用Vue和React已經(jīng)很長(zhǎng)一段時(shí)間了，兩個(gè)框架上實(shí)踐代碼量都在10萬行以上。不得不說都是都很不錯(cuò)的，幫助開發(fā)者減少很多工作量，某種框架是現(xiàn)代化Vue和React在兩者之間的選擇并不像選擇蘋果或香蕉一樣簡(jiǎn)單，兩者在工程實(shí)踐上的差異讓我們逐漸放棄了Vue。此處以不一樣的角度對(duì)彼此進(jìn)行深度對(duì)比。

常見搖擺問題，觀點(diǎn)

首先，我重新談?wù)劤Ｒ妼?duì)比項(xiàng)目，觀點(diǎn)的看法，這些部分內(nèi)容可以通過一些文章或者Vue官方對(duì)比文檔查到，主要目的是幫助小白解決入門搖擺問題。如果你反對(duì)，歡迎評(píng)論區(qū)留言Battle，反正我不會(huì)回答你這類問題。

Vue或React文檔更豐富？

兩者都有豐富的文檔（包括中文文檔），Vue文檔，React中文，所以不用擔(dān)心你四級(jí)都過不了，看不懂文檔，這都是有眼就行的事?當(dāng)然，如果你提前懂點(diǎn)javascript相關(guān)知識(shí)也是大大滴好，ES6語法更佳，可以在這里跟阮老師學(xué)習(xí)，免費(fèi)的電子書。文檔和持續(xù)進(jìn)階不是你在兩個(gè)框架間做選擇的原因。

Vue的話需要記住各種指令，還有屬性細(xì)節(jié)，免不了經(jīng)常查文檔。React相對(duì)簡(jiǎn)單，記住：“函數(shù)入口是props，出口是html”就行了。

React學(xué)習(xí)門檻高？

這個(gè)也不是你選擇框架的原因，如果這個(gè)也可以作為原因的話，我覺得是因?yàn)槟銘?#xff0c;給自己找了借口。據(jù)我自己學(xué)習(xí)，實(shí)踐總結(jié)，兩個(gè)框架都很簡(jiǎn)單，有手就行，有腦就會(huì)，不見得會(huì)React就比Vue牛逼很多。其中都提供了相應(yīng)腳手架，方便用戶使用：

Vue

npm install -g @vue/cli vue create my-project

反應(yīng)

npx create-react-app my-app cd my-app npm start

傻瓜式使用，無限div就完事了。

大項(xiàng)目用React，小項(xiàng)目用Vue

這是我以前在華為的時(shí)候，內(nèi)部討論兩個(gè)框架對(duì)比時(shí)下的一個(gè)標(biāo)記。所謂呢？這個(gè)就是萬精油標(biāo)注，沒有參考意義。你如何定義一個(gè)項(xiàng)目是大項(xiàng)目？超過xx萬行代碼？后端API超過xxx個(gè)？無論什么項(xiàng)目，都有做“大”的可能，只要正常運(yùn)營(yíng)，你就得持續(xù)維護(hù)，補(bǔ)充補(bǔ)充的需求。框架的可以替代更為重要。當(dāng)然我可以這么跟你說，反應(yīng)適度不適合“小”項(xiàng)目我不知道，但是Vue不適合“大”項(xiàng)目，業(yè)務(wù)代碼超過5萬行之后問題明顯，后面會(huì)詳細(xì)說這點(diǎn)。

XX大公司也在用Vue，我們跟隨就行了

很多新手在入門一些框架，或者選型組件，方案時(shí)會(huì)看看什么大公司已經(jīng)用了，避免自己踩坑。當(dāng)然啦，我也可以滴。但是大公司可能只是“嘗鮮”，“實(shí)驗(yàn)性” ”使用，這些項(xiàng)目對(duì)他們彼此無關(guān)緊要，選型失敗了，壓力給到開發(fā)工程師，996糾正就行了，而你，╮（╯▽╰）╭項(xiàng)目和屎一樣也得維護(hù)下去。

舉個(gè)選型錯(cuò)誤的例子，看看大公司怎么拯救的。

以前在華為做硬件項(xiàng)目的時(shí)候，用的原理圖軟件，那叫一個(gè)辣雞，用著用著總想砸掉電腦。歷史問題，選型錯(cuò)誤，但無奈很多項(xiàng)目，基礎(chǔ)庫(kù)都在上面，只能硬著頭皮搞，遷移的成本太高，軟件廠商水平太差，但是華為牛逼啊，把那個(gè)軟件大改特改，各種內(nèi)部數(shù)據(jù)庫(kù)都集成在上面，各種自開發(fā)的輔助工具，還是可以開發(fā)出很牛逼的產(chǎn)品，部門做的單板連續(xù)11年全球第一。

（PS：以前還用tcl寫腳本呢，你也可以試試蛋不蛋疼）- 如果你覺得你能搞定選型錯(cuò)誤帶來的問題，或者你在華為，那當(dāng)我們說。

Vue模板簡(jiǎn)單，React jsx有學(xué)習(xí)成本

同上。兩個(gè)都很簡(jiǎn)單，一學(xué)就會(huì)。連這點(diǎn)東東都叫學(xué)習(xí)成本，我只能說：“我不是針對(duì)你，我是說在座的各位都是…”（Vue的模板有很多工程實(shí)踐問題，后面詳說。）

性能對(duì)比

可以看看這個(gè)第三方基準(zhǔn)測(cè)試，其中都都挺快的。不過我們實(shí)踐過程中發(fā)現(xiàn)有差異，大列表渲染，大量數(shù)據(jù)加載，不做進(jìn)一步優(yōu)化的話Vue明顯比React慢。TaskHub這個(gè)網(wǎng)站我們以前就是用Vue寫的，后來直接遷移到React前端性能大大提高，用戶體驗(yàn)有明顯的差異（數(shù)據(jù)結(jié)構(gòu)，后臺(tái)不變）。

深度對(duì)比

本來想簡(jiǎn)單寫寫，沒想到前面寫了那么多了，╮（╯▽╰）╭，下面是重頭戲，寫寫實(shí)踐過程中發(fā)現(xiàn)的問題，兩個(gè)框架的解決思路。如果你還是小白，下面的一些東西可能沒接觸過，可以看下這篇文章：【譯】通過創(chuàng)建相同的APP，對(duì)比React和Vue，切實(shí)實(shí)現(xiàn)一下，了解基礎(chǔ)知識(shí)。

市場(chǎng)占比

相關(guān)npm下載量見上圖，市場(chǎng)已經(jīng)用腳投票了。看到這里，如果你只想知道選型代表，你可以走了。如果你還說xx大公司在用Vue，跟著就行。可以這么說吧，大公司更多用的是React，用Vue更多的目的是保留相關(guān)技術(shù)棧能力，多一個(gè)選擇，避免React許可事件再次發(fā)生。

• React的許可協(xié)議到底發(fā)生了什么問題？
• Facebook認(rèn)慫React專利，但問題依舊沒有解決？

當(dāng)然，尤大也在這里說過，看npm下載量沒用，實(shí)際使用應(yīng)該參考devTool的下載量。但是...為啥我打開的很多網(wǎng)站下面這個(gè)標(biāo)都是亮的？

開發(fā)生態(tài)

客觀地說，作為核心團(tuán)隊(duì)成員，意識(shí)到我們會(huì)更偏愛Vue，認(rèn)為關(guān)于某些問題指向用Vue解決會(huì)更好。如果沒有這點(diǎn)信念，我們也就不會(huì)整天如此忙活了。但是在此后，我們想調(diào)整地公平和準(zhǔn)確地來描述一切。其他的框架也有顯著的優(yōu)點(diǎn)，例如React龐大的生態(tài)系統(tǒng)

由Vue官方

生態(tài)上的差異是明顯的，這點(diǎn)Vue官方也承認(rèn)的，很多人因?yàn)樯鷳B(tài)這點(diǎn)遷移到React，不過我本人不是很在意，Vue生態(tài)也不差，如果說你用了React生態(tài)的東西就覺得很牛逼，你的核心也會(huì)用，這點(diǎn)并不能給你產(chǎn)品帶來多大增值，競(jìng)爭(zhēng)力還是要靠自己手碼出來的好。下面簡(jiǎn)單帶過：

UI組件

兩者的周邊UI庫(kù)都挺豐富的，反應(yīng)稍微多一點(diǎn)，不過這不是選型的關(guān)鍵，自己手寫的UI庫(kù)也不是什么難事，偶爾封裝一下原生標(biāo)簽也是很簡(jiǎn)單的。以前用Vue的時(shí)候還沒有UI庫(kù)，手動(dòng)寫了一個(gè)功能比較全的UI庫(kù)，用匯總打包，也就2萬行代碼左右，有手就行。

dom相關(guān)的第三方庫(kù)

Vue和React都有ref可以操作dom，自己封裝一下不是什么難事。可以找找有沒別人封裝好的，拿來主義。

• Vue：訪問子組件實(shí)例或子元素
• React：Refs和DOM

小程序（劃重點(diǎn)）

有小程序開發(fā)經(jīng)驗(yàn)的同學(xué)都知道，小程序原生開發(fā)是很蛋疼的，通常需要串行框架封裝，代碼轉(zhuǎn)換。常見的有幾個(gè)框架：

• 芋頭（React技術(shù)棧，推薦使用）
• wepy（Vue技術(shù)棧，強(qiáng)烈不推薦使用）
• uni-app（Vue技術(shù)棧，可以使用）

這些小程序開發(fā)框架都是基于Vue或React的二次封裝，簡(jiǎn)化小程序開發(fā)。

vue的一些周邊庫(kù)和Vue強(qiáng)綁定，而不是一個(gè)獨(dú)立的js庫(kù)的形式存在。導(dǎo)致代碼難以理解，相關(guān)的Bug，問題也帶到了二次開發(fā)的框架中。

這種強(qiáng)依賴導(dǎo)致的問題會(huì)給以后項(xiàng)目升級(jí)，遷移帶來很多問題。比如vuex作為Vue的官方推薦的狀態(tài)管理方案，只能在Vue的上面使用，不能在陣營(yíng)上面使用。Redux的狀態(tài)管理在陣營(yíng)上用的多，這個(gè)卻能用在Vue之上。類似的問題很多，你會(huì)發(fā)現(xiàn)React周圍的東西可以用于Vue，Vue的東西不能用在React上。

如果你覺得這個(gè)問題不嚴(yán)重，當(dāng)你把Vue代碼遷移到小程序wepy框架時(shí)發(fā)現(xiàn)，wepy不支持Vuex（bug異常多），狀態(tài)管理只能用redux，欲哭無淚。同樣的問題，如果你用的是React相關(guān)技術(shù)棧，反應(yīng)遷移到Taro小程序框架異常簡(jiǎn)??單，而且可以一次性生成微信小程序，支付寶小程序，字節(jié)跳動(dòng)小程序等，代碼占用率高。

APP生態(tài)

weex，rn這塊我沒有比較好的實(shí)踐經(jīng)驗(yàn)，其中一些生產(chǎn)方案必須慎重考慮。rn比weex成熟這點(diǎn)是明確的。

邏輯代碼組織

Vue三種組件寫法對(duì)比（Js部分）

對(duì)象API 29行

import Vue, { PropOptions } from 'vue'interface User {firstName: stringlastName: number }export default Vue.extend({name: 'YourComponent',props: {user: {type: Object,required: true} as PropOptions<User>},data () {return {message: 'This is a message'}},computed: {fullName (): string {return `${this.user.firstName} ${this.user.lastName}`}} })

API類17行

import { Vue, Component, Prop } from 'vue-property-decorator'interface User {firstName: stringlastName: number }@Component export default class YourComponent extends Vue {@Prop({ type: Object, required: true }) readonly user!: Usermessage: string = 'This is a message'get fullName (): string {return `${this.user.firstName} ${this.user.lastName}`} }

功能API 25行

import Vue from 'vue' import { computed, value } from 'vue-function-api'interface User {firstName: stringlastName: number }interface YourProps {user?: User }export default Vue.extend({name: 'YourComponent',setup ({ user }: YourProps) {const fullName = computed(() => `${user.firstName} ${user.lastName}`)const message = value('This is a message')return {fullName,message}} })

React兩種組件寫法對(duì)比（Js部分）

class組件34行

import React, { Component } from 'react';interface P {}interface S {}class Index extends Component<P, S> {constructor(props: Readonly<P>) {super(props);this.state = {};}static defaultProps = {};componentDidMount() {}componentDidUpdate(prevProps: Readonly<P>) {}componentWillUnmount() {}render() {return (<div></div>);} }export default Index;

函數(shù)組件15行

import React, { FC } from "react";interface Props {}const Index: FC<Props> = (props) => {// js 代碼return (<div></div>); };Index.defaultProps = {};export default Index;

在js邏輯部分其中寫法沒毛病，都需要用到框架特定的生命周期鉤子，Vue的類寫法最簡(jiǎn)潔（3種對(duì)比），反應(yīng)的功能寫法最清晰（全部寫法對(duì)比）。這部分不是選擇關(guān)鍵，怎么寫是個(gè)人喜好。

組件內(nèi)狀態(tài)管理

Vue使用的是數(shù)據(jù)對(duì)象（數(shù)據(jù)），反應(yīng)使用的是狀態(tài)對(duì)象（不可變狀態(tài)），這點(diǎn)兩個(gè)框架的設(shè)計(jì)不同，如下的問題解決思路也不同。

我如何修改數(shù)據(jù)？Vue直接將此引用數(shù)據(jù)對(duì)象，直接修改。React使用setState方法修改

框架如何發(fā)現(xiàn)數(shù)據(jù)被修改？Vue使用es5新方法Object.defineProperty，劫持setter，getter實(shí)現(xiàn)數(shù)據(jù)監(jiān)聽。React，你用了setState，它通過這個(gè)函數(shù)就知道一些數(shù)據(jù)變化了。

我如何發(fā)現(xiàn)數(shù)據(jù)被修改？Vue：使用觀察者，或者計(jì)算屬性發(fā)現(xiàn)反應(yīng)：componentWillUpdate，componentDidUpdate中可以監(jiān)聽變化，或者函數(shù)組件的依賴部分插入

框架何時(shí)渲染修改的數(shù)據(jù)，我如何知道已經(jīng)渲染好了？Vue：在適當(dāng)?shù)臅r(shí)候渲染，你通過使用watcher，或者計(jì)算屬性發(fā)現(xiàn)反應(yīng)：setState調(diào)用后在適當(dāng)?shù)臅r(shí)候重新渲染，并調(diào)用相關(guān)生命周期鉤子

在組件狀態(tài)管理功能上兩者都沒有太多槽點(diǎn)，如果要說的話就是Vue watcher寫多了代碼一堆縮進(jìn)，比較嚴(yán)重，反應(yīng)也沒好多少。

Vue的寫法更加簡(jiǎn)單，但組件狀態(tài)很多，需要明確的數(shù)據(jù)更新邏輯時(shí)，反應(yīng)簡(jiǎn)單的setState（{} ，callback），就搞定了，Vue有點(diǎn)讓人摸不到頭腦。

Vue項(xiàng)目解決bug和疑難雜癥三大定理

沒有什么是deep watch解決不了的，有就加立即事件相關(guān)，dom相關(guān)記得nextTick實(shí)在不行，就用setTimeout

（來自某師兄）

React的不可變（immutable）狀態(tài)在應(yīng)用復(fù)雜時(shí)表現(xiàn)出的透明，可測(cè)試性更佳。

以上內(nèi)容對(duì)比下降，感覺兩者都OKOK的，功能也健全，Vue生態(tài)差一點(diǎn)，但是可以自己動(dòng)手豐衣足食。以下是我們真正棄用Vue的原因。

沃蘇艾德布耀布耀德說過：同樣的問題，在語言層面上的解決方案才是最佳解決方案。語言生命周期長(zhǎng)于框架生命周期

模板語法VS JSX

一部分丟失

Vue的單文件組件，使用<template>，<script>對(duì)代碼進(jìn)行分割，直接導(dǎo)致的問題就是丟失。舉個(gè)例子，你封裝了一些常用的函數(shù)，在Vue文件中import進(jìn)來。你這個(gè)函數(shù)能在template中直接使用嗎？

// filter.js 文件 export function isNickname(value) {return /^[\s\S]{1,50}$/.test(value); } <template><div>{{ a }}<button @click="a = isNickname('abc')">Test</button>{{ b }}</div> </template><script> // eslint-disable-next-line no-unused-vars import {isNickname} from '../fn/filter';export default {name: 'HelloWorld',props: { msg: String },data: () => {return {a: false,b: 1,c: 1,}},methods: {isNickname1() {return isNickname('abc');}} } </script><style scoped></style>

上述代碼會(huì)報(bào)錯(cuò)：

[Vue warn]: Property or method "isNickname" is not defined on the instance but referenced during render

所以你只能將方法定義在methods中，再引用進(jìn)來。模板語法并不知道你有isNickname這個(gè)函數(shù)，簡(jiǎn)單的操作多了3行代碼。

模板語法不是圖靈完備的，必須轉(zhuǎn)換為js代碼（渲染函數(shù)），放在組件語境下才行。類似的例子還有很多，你會(huì)發(fā)現(xiàn)，你寫的代碼與Vue強(qiáng)綁定了，哪天Vue核心庫(kù)升級(jí)了，你代碼也崩潰了。Vue核心庫(kù)升級(jí)了，周邊依賴庫(kù)也得跟著升級(jí)。

模板分割

好的代碼組織能將常變與不變的部分進(jìn)行分割解變量

Vue的模板嚴(yán)重限制了這一點(diǎn)。舉個(gè)例子，前端有個(gè)拖放菜單，功能不斷增加，而且對(duì)于不同的人要顯示不同菜單（權(quán)限管理）。在Vue中，為了實(shí)現(xiàn)html代碼（綁定在template）中）的分割，你只能再搞一個(gè)組件。在React中，可以直接這樣寫：

const menu = <div>abc<div>;

可單獨(dú)做一個(gè)組件（低開銷函數(shù)組件），也可當(dāng)做變量，放在當(dāng)前代碼中。相對(duì)靈活很多。

JSX手寫渲染渲染函數(shù)自帶下面的優(yōu)勢(shì)

• 完整的js功能來構(gòu)建視圖頁面，可以使用臨時(shí)變量，js自帶的控制流，以及直接引用當(dāng)前js作用域中的值
• 開發(fā)工具對(duì)jsx的支持比現(xiàn)有vue模板高級(jí)（linting，typescript，編譯器自動(dòng)補(bǔ)全）

JSX可以用于Vue可以用于React，就像Redux一樣。這種語言是與框架解壓縮的。

“雖然模板語法有那么多問題，但是Vue也支持JSX呀。”

我猜到你會(huì)這么說，但就像上面所說的，既然我一定要用JSX / TSX，Redux了，那我為什么不用React？

“基于HTML的模板可以將現(xiàn)有的應(yīng)用逐步遷移到Vue更加容易”

不會(huì)更容易，只會(huì)更麻煩。首先，下面會(huì)說到的模板中無法很好linting，type指示，代碼遷移過去很多bug無法及時(shí)發(fā)現(xiàn)。其次代碼遷移很大一部分都是js邏輯的遷移（這個(gè)更重要），遷移到vue中，你需要填鴨式細(xì)分原始代碼，放到計(jì)算，心態(tài)中，工作量不小且代碼和Vue強(qiáng)綁定。最后，原代碼類，@ click這些東西，有現(xiàn)代化的編輯器，批量替換成className，onClick不是很簡(jiǎn)單的事情嗎？

打字稿，棉絨支持

這點(diǎn)更是致命，Typescript已成為我們前端開發(fā)的必需品。前就能發(fā)現(xiàn)大量錯(cuò)誤。

而Vue的模板不支持typescript（官方還在增強(qiáng)），在模板上支持要很多“ hack”操作，原始框架更為復(fù)雜。Vue.extend對(duì)象中編寫代碼很難有比較好的ts，從而更好的支持Typescript，我們以前都是使用Vue的類寫法（參考上文）。前端配合后臺(tái)放置接口，而很多未提前檢查出的錯(cuò)誤都出現(xiàn)在模板代碼中。

可測(cè)試性，重構(gòu)

Vue需要新建一個(gè).vue文件

<template><div>{{hello}}</div> </template><script> export default {name: 'Test',props: {hello: String},created() {console.log(this.hello);} } </script><style scoped></style>

React操作都在jsx環(huán)境下執(zhí)行，放的位置隨意，寫法比模板更容易測(cè)試，繼承：

function Test(props: { hello: string }) {console.log(props);return <div>{props.hello}</div> }

Vue與React測(cè)試成本的差異明顯。React手起刀落，一個(gè)函數(shù)就搞定了，要測(cè)試什么內(nèi)容清晰可見。類型，屬性修正就行了，編輯器自動(dòng)化。

復(fù)雜狀態(tài)，動(dòng)作管理

總體狀態(tài)管理方案選型是很重要的，畢竟95％以上的API對(duì)接代碼都在這里，這部分代碼占位代碼很大一部分，可以互換，替代，測(cè)試成為選擇的關(guān)鍵。

Vue推薦的方案只有將轉(zhuǎn)換的Vuex（Redux遷移到Vue等不算內(nèi)部）React周邊方案有Redux，Mobx等。這些庫(kù)不會(huì)與React有太強(qiáng)的替換（可以獨(dú)立存在）。兩個(gè)框架的狀態(tài)管理思想差不多，都是單向數(shù)據(jù)流，單例模式（Vuex＆Redux）。

威克斯

Vuex的源碼不多，可以看這里。可以看到代碼中有很多和Vue強(qiáng)綁定的東東，脫離了Vue，這東西就沒法用了。你可能會(huì)說我就用Vue，什么React不去用不就完了？考慮以下場(chǎng)景：

• 項(xiàng)目經(jīng)理要把Vue的代碼遷移支持小程序，突然！有的框架不支持Vuex，腦袋嗡嗡嗡叫
• 項(xiàng)目經(jīng)理說要設(shè)配APP端，突然！一堆臭蟲！腦袋嗡嗡叫
• 項(xiàng)目經(jīng)理腦抽，要把React項(xiàng)目遷移到Vue，突然！redux！用的還是saga！腦袋嗡嗡叫
• 狀態(tài)管理出現(xiàn)靜態(tài)問題！要寫一堆爛碼去解決。新人看了腦袋嗡嗡叫

這部分的代碼比Vuex源碼都多？這些問題都是狀態(tài)管理庫(kù)和框架強(qiáng)綁定導(dǎo)致的，框架上的問題也會(huì)影響到周邊庫(kù)。

if (version >= 2) {Vue.mixin({ beforeCreate: vuexInit })} else {// override init and inject vuex init procedure// for 1.x backwards compatibility.const _init = Vue.prototype._initVue.prototype._init = function (options = {}) {options.init = options.init? [vuexInit].concat(options.init): vuexInit_init.call(this, options)}}

可以看到，Vue核心升級(jí)，這些伴隨的庫(kù)也得升級(jí)，測(cè)試。在非瀏覽器環(huán)境下運(yùn)行時(shí)，由于Vue（或類Vue框架）的初始化等機(jī)制需要體積，會(huì)導(dǎo)致相關(guān)庫(kù)，如Vuex不可用，多了一個(gè)代碼分支，相關(guān)代碼無法替換，測(cè)試，重構(gòu)負(fù)擔(dān)重。

Redux

Redux是React上比較常用的狀態(tài)管理方案，其設(shè)計(jì)思想非常簡(jiǎn)單（見上圖），可以獨(dú)立使用，相關(guān)代碼容易遷移到不同平臺(tái)。衍生出周邊替代方案也很多：

• 重?fù)羰?/li>
• redux-promise
• Redux-Saga
• 可觀察到的

選型可以參考這里＆這里，我們用saga比較多，處理靜態(tài)問題等比較簡(jiǎn)單，起步多看看文檔就可以，也不難。下面這張圖可以幫助你理解幾個(gè)方案之間的關(guān)系，利弊權(quán)衡。

相關(guān)插件也很豐富，參考：Redux Middleware。你會(huì)發(fā)現(xiàn)很多你想要的東西Vuex都木有！

“既然這樣，我在Vue上用Redux就行了”

也行，畢竟這樣以后遷移到React會(huì)簡(jiǎn)單點(diǎn)。

萬惡之源this指針

寫過React函數(shù)組件的同學(xué)都知道，引用類組件，函數(shù)組件少了this指針，代碼簡(jiǎn)化，清晰多余。而這個(gè)問題在Vue上更為嚴(yán)重。

有人覺得這是優(yōu)點(diǎn)，方便使用。等你代碼量上去了再來說話。

當(dāng)項(xiàng)目多人協(xié)作的時(shí)候，或者承接某人某祖?zhèn)鞔a，你不分段搜索，你都不知道這個(gè)上面掛了羊頭還是狗肉。

• 這個(gè).ajax
• 這個(gè).http
• 這條信息
• this.wtf…

正如一位網(wǎng)友評(píng)論：

那東西就是總體作用域。拿“允許在分成作用域上隨便放東西很方便”作為優(yōu)點(diǎn)的話，和“允許隨地大小便會(huì)很方便”有什么區(qū)別……

寫C語言的新手都知道類別變量不要隨意用，這滿天飛的this，張三讀不懂，李四看不懂，IDE也不懂。而且這是官方推薦寫法，╮（╯▽╰）╭（說大規(guī)模不太準(zhǔn)確，應(yīng)該說是組件作用域）

想起我以前寫的Vue UI庫(kù)，叫SUE-UI，sue?很快的樣子。為了避免以后和其他插件沖突，插件使用都是：

• this。$ su_message
• this。$ su_modal
• 這個(gè)。$ su_toast

往事不堪回首啊！

最后

框架功能上，暫時(shí)沒有發(fā)現(xiàn)Vue做的來React做不來的事情，反過來也一樣，兩個(gè)框架都能滿足功能需求。工程實(shí)踐上，由于轉(zhuǎn)換性，代碼組織，粗略升級(jí)，測(cè)試，開拓讓我們最終放棄了Vue。

在Vue中你操作的是定義好的對(duì)象，React中你操作的是一個(gè)函數(shù)。所謂前端開發(fā)，本質(zhì)就是在編寫下面幾個(gè)函數(shù)。

S = async(A1) S = sync(A2) UI = f(S)

顯然，陣營(yíng)對(duì)此的抽象更為徹底。

????資源獲取：

大家點(diǎn)贊、收藏、關(guān)注、評(píng)論啦 、查看👇🏻👇🏻👇🏻微信公眾號(hào)獲取聯(lián)系方式👇🏻👇🏻👇🏻

?精彩專欄推薦訂閱：在下方專欄👇🏻👇🏻👇🏻👇🏻

每天學(xué)四小時(shí)：Java+Spring+JVM+分布式高并發(fā)，架構(gòu)師指日可待

總結(jié)

以上是生活随笔為你收集整理的为什么我们放弃了Vue？Vue和React深度比较的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

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