「譯」 Vue 最黑暗的一天

往常積極友好的 VueJS 社區(qū)陷入了一場(chǎng)激烈的戰(zhàn)爭(zhēng)。 兩周前，Vue 的創(chuàng)建者尤雨溪發(fā)布了一個(gè)請(qǐng)求意見稿（RFC），用于在即將發(fā)布的 Vue 3.0 中使用基于函數(shù)的方式編寫 Vue 組件。今天，一個(gè) Reddit 上批評(píng)性的帖子和 Hacker News 上一些類似的批評(píng)性的評(píng)論，引起大批開發(fā)者涌向原本的 RFC 來表達(dá)他們的憤怒，其中一些有點(diǎn)侮辱性。 在很多地方都有人聲稱：

• 所有 Vue 代碼都必須以全新的方式重寫，因?yàn)楝F(xiàn)有的語(yǔ)法正在被移除，并且被其他東西取代；

• 人們花在學(xué)習(xí) Vue 上的所有時(shí)間都被浪費(fèi)了，因?yàn)橐磺卸紩?huì)改變；

• 新語(yǔ)法比舊的更糟糕，因?yàn)樗鼪]有強(qiáng)制的結(jié)構(gòu)，并且會(huì)導(dǎo)致意大利面條式代碼；

• Vue 核心團(tuán)隊(duì)在沒有任何咨詢的情況下突然施行一個(gè)巨大的破壞性的變化；

• Vue 要變成 React 了！

• 不，Vue 要變成 AngularJS/Angular 了！

• 所有 HTML 都要寫在一個(gè)超長(zhǎng)的字符串里！

看過 Reddit 上成堆的負(fù)面評(píng)論，你可能會(huì)在 RFC 頁(yè)面上驚訝的發(fā)現(xiàn)尤雨溪的 RFC 收到的正面的表情回應(yīng)的比例比負(fù)面的高得多，而且許多早期評(píng)論都是相當(dāng)正面的。 實(shí)際上，第一條評(píng)論就充滿了溢美之詞。

我就是第一個(gè)寫評(píng)論的人。 我碰巧收到新 RFC 的通知，馬上讀了一下，發(fā)現(xiàn)這正是我想從 Vue 3.0 得到的，而且它會(huì)給我極大的幫助，于是我在 RFC 發(fā)布 15 分鐘后留下了第一條評(píng)論來表達(dá)我的謝意。 我希望在這里進(jìn)一步說明為什么我覺得新提案是一個(gè)如此好的主意，但首先，要回應(yīng)一些批評(píng)。

我懷疑很多人在閱讀了 Hacker News 或 Reddit 上有著很多誤導(dǎo)性評(píng)論的帖子之后有點(diǎn)激動(dòng)，他們?cè)跊]有閱讀原始提案的情況下就表達(dá)了自己的憤怒。 尤雨溪已經(jīng)更新了這個(gè)提案，通過問答的方式回應(yīng)了人們的很多問題，總的來說：

• 如果你不想重寫任何代碼，那么你就不需要重寫——新語(yǔ)法是附加的，而且只要舊語(yǔ)法仍然被廣泛使用，它在 Vue 3.0 中依然有效。就算它最終被從核心代碼中移除了，也可以很容易地通過插件來使舊語(yǔ)法 100% 有效。

• 學(xué)習(xí) Vue 的時(shí)間并沒有浪費(fèi)——新組件語(yǔ)法使用的概念與你之前花時(shí)間學(xué)習(xí)的一樣，其他概念，例如單文件組件、模板、scoped style 的功用完全一樣。

• 沒有經(jīng)過咨詢，就不會(huì)改變——?RFC?就是在?咨詢。新語(yǔ)法離發(fā)布還有很長(zhǎng)一段路要走。

• 不，HTML 代碼不需要被寫進(jìn)一個(gè)超長(zhǎng)字符串。

一個(gè)更主觀的觀點(diǎn)是：新語(yǔ)法不如舊語(yǔ)法，并且會(huì)導(dǎo)致結(jié)構(gòu)化程度較低的代碼。 我希望通過一個(gè)簡(jiǎn)單的例子來說明為什么我在看到 RFC 時(shí)如此興奮，以及為什么我覺得它更優(yōu)秀，將會(huì)導(dǎo)致結(jié)構(gòu)化?更好?的代碼。

考慮一下下面的有趣組件，用戶可以輸入寵物的詳細(xì)信息。請(qǐng)注意：

• 當(dāng)他們輸入完寵物的名字時(shí)會(huì)顯示一條信息；

• 另一條信息會(huì)在他們選擇寵物的大小后顯示。

你可以在這里嘗試組件的demo，也可以在這里查看使用 Vue 2.x 編寫的代碼（在 components/Vue2.vue）

考慮一下這個(gè)組件的 JavaScript：

export?default?{
?data()?{?return?{?petName:?"",?petNameTouched:?false,?petSize:?"",?petSizeTouched:?false
?};
?},?computed:?{?petNameComment:?function()?{?if?(this.petNameTouched)?{?return?"Hello?"?+?this.petName;
?}?return?null;
?},?petSizeComment:?function()?{?if?(this.petSizeTouched)?{?switch?(this.petSize)?{?case?"Small":?return?"I?can?barely?see?your?pet!";?case?"Medium":?return?"Your?pet?is?pretty?average.";?case?"Large":?return?"Wow,?your?pet?is?huge!";?default:?return?null;
?}
?}?return?null;
?}
?},?methods:?{?onPetNameBlur:?function()?{?this.petNameTouched?=?true;
?},?onPetSizeChange:?function()?{?this.petSizeTouched?=?true;
?}
?}
};
復(fù)制代碼

實(shí)質(zhì)上，我們有一些數(shù)據(jù)、從這些數(shù)據(jù)計(jì)算出的屬性、以及 操作這些數(shù)據(jù)的方法。 注意，在 Vue 2.x 中我們?沒有辦法把相關(guān)的東西放在一起。 我們不能把 petName 數(shù)據(jù)聲明放在 petNameComment 計(jì)算屬性或者 onPetNameBlur 方法旁邊，因?yàn)樵?Vue 2.x 中，這些選項(xiàng)是按照類型組織的。

當(dāng)然，對(duì)于像這樣的小例子來說，這不太重要。但是想象一個(gè)更大的例子，它有很多功能，需要 data、computed、methods、甚至是一兩個(gè)watcher。 目前還?沒有好方法?來把相關(guān)的東西放一起！有人可能會(huì)使用諸如 Mixin 或高階組件之類的辦法，但是它們都有問題——很難辨別一個(gè)屬性來自哪里，還有命名空間的沖突。 （是的，在這種情況下，拆分為多個(gè)組件是可能的，但是這個(gè)類似的例子就不行）

新提案不是按照選項(xiàng)的類型來組織組件，而是允許我們按照實(shí)際功能來組織組件。 這類似于你在電腦上整理個(gè)人文件的方式——你通常沒有“表格”文件夾和“Word 文檔”文件夾，相反，你可能有一個(gè)”工作“文件夾和一個(gè)”假期計(jì)劃“文件夾。想象一下使用提案里的語(yǔ)法來編寫組件（盡我所能，如果你看到了什么 bug 請(qǐng)告訴我）：

import?{?state,?computed?}?from?"vue";export?default?{
?setup()?{?//?Pet?name
?const?petNameState?=?state({?name:?"",?touched:?false?});?const?petNameComment?=?computed(()?=>?{?if?(petNameState.touched)?{?return?"Hello?"?+?petNameState.name;
?}?return?null;
?});?const?onPetNameBlur?=?()?=>?{
?petNameState.touched?=?true;
?};?//?Pet?size
?const?petSizeState?=?state({?size:?"",?touched:?false?});?const?petSizeComment?=?computed(()?=>?{?if?(petSizeState.touched)?{?switch?(this.petSize)?{?case?"Small":?return?"I?can?barely?see?your?pet!";?case?"Medium":?return?"Your?pet?is?pretty?average.";?case?"Large":?return?"Wow,?your?pet?is?huge!";?default:?return?null;
?}
?}?return?null;
?});?const?onPetSizeChange?=?()?=>?{
?petSizeState.touched?=?true;
?};?//?All?properties?we?can?bind?to?in?our?template
?return?{?petName:?petNameState.name,
?petNameComment,
?onPetNameBlur,?petSize:?petSizeState.size,
?petSizeComment,
?onPetSizeChange
?};
?}
};
復(fù)制代碼

注意：

• 很容易把相關(guān)的東西放到一起；

• 通過查看 setup 函數(shù)的返回值，我們可以很容易地知道模板中可以獲取什么變量；

• 我們甚至可以避免暴露模板不需要獲取的內(nèi)部狀態(tài)（touched）。

除此之外，新語(yǔ)法可以有完整的 Typescript 支持，這在 Vue 2.x 基于對(duì)象的語(yǔ)法中很難實(shí)現(xiàn)。 而且我們可以很輕易地把可重用的邏輯提取為可重用的函數(shù)。例如：

import?{?state,?computed?}?from?"vue";function?usePetName()?{?const?petNameState?=?state({?name:?"",?touched:?false?});?const?petNameComment?=?computed(()?=>?{?if?(petNameState.touched)?{?return?"Hello?"?+?petNameState.name;
?}?return?null;
?});?const?onPetNameBlur?=?()?=>?{
?petNameState.touched?=?true;
?};?return?{?petName:?petNameState.name,
?petNameComment,
?onPetNameBlur
?};
}function?usePetSize()?{?const?petSizeState?=?state({?size:?"",?touched:?false?});?const?petSizeComment?=?computed(()?=>?{?if?(petSizeState.touched)?{?switch?(this.petSize)?{?case?"Small":?return?"I?can?barely?see?your?pet!";?case?"Medium":?return?"Your?pet?is?pretty?average.";?case?"Large":?return?"Wow,?your?pet?is?huge!";?default:?return?null;
?}
?}?return?null;
?});?const?onPetSizeChange?=?()?=>?{
?petSizeState.touched?=?true;
?};?return?{?petSize:?petSizeState.size,
?petSizeComment,
?onPetSizeChange
?};
}export?default?{
?setup()?{?const?{?petName,?petNameComment,?onPetNameBlur?}?=?usePetName();?const?{?petSize,?petSizeComment,?onPetSizeChange?}?=?usePetSize();?return?{
?petName,
?petNameComment,
?onPetNameBlur,
?petSize,
?petSizeComment,
?onPetSizeChange
?};
?}
};
復(fù)制代碼

在 Vue 2.x 中，我經(jīng)常發(fā)現(xiàn)自己寫了個(gè)“怪獸組件”，它很難分解成更小的部分——它不能分解成其他的組件，因?yàn)楹芏嗍聞?wù)基于少量狀態(tài)。 然而，使用提案中的語(yǔ)法，很容易看出大型組件的邏輯可以被分解為更小的可重用部分，在必要時(shí)移動(dòng)到獨(dú)立的文件里，留給你小的、易于理解的函數(shù)和組件。

這是目前為止 Vue 最黑暗的一天嗎？看起來是的。一直團(tuán)結(jié)追隨這個(gè)項(xiàng)目方向的社區(qū)已經(jīng)分裂了。 但我希望人們能夠重新審視這個(gè)提案，它沒有破壞任何東西，只要他們想，仍然可以按照選項(xiàng)的類型來組織它們，但是可以做到更多——更清晰的代碼、更簡(jiǎn)潔的代碼、更有意思的庫(kù)、還有完善的 Typescript 支持。

最后，在使用開源軟件時(shí)，最好記住，全靠維護(hù)者投入的大量精力，你才可以免費(fèi)使用它。 今天的一些過分批評(píng)是他們不應(yīng)該承受的。好在這些無(wú)禮的批評(píng)只是少數(shù)（盡管數(shù)量相當(dāng)多），大多數(shù)人能以更禮貌的方式表達(dá)自己。

還有更多資料視頻分享，加小可樂丫