「譯」 Vue 最黑暗的一天

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

• 所有 Vue 代碼都必須以全新的方式重寫，因為現有的語法正在被移除，并且被其他東西取代；

• 人們花在學習 Vue 上的所有時間都被浪費了，因為一切都會改變；

• 新語法比舊的更糟糕，因為它沒有強制的結構，并且會導致意大利面條式代碼；

• Vue 核心團隊在沒有任何咨詢的情況下突然施行一個巨大的破壞性的變化；

• Vue 要變成 React 了！

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

• 所有 HTML 都要寫在一個超長的字符串里！

看過 Reddit 上成堆的負面評論，你可能會在 RFC 頁面上驚訝的發現尤雨溪的 RFC 收到的正面的表情回應的比例比負面的高得多，而且許多早期評論都是相當正面的。 實際上，第一條評論就充滿了溢美之詞。

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

我懷疑很多人在閱讀了 Hacker News 或 Reddit 上有著很多誤導性評論的帖子之后有點激動，他們在沒有閱讀原始提案的情況下就表達了自己的憤怒。 尤雨溪已經更新了這個提案，通過問答的方式回應了人們的很多問題，總的來說：

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

• 學習 Vue 的時間并沒有浪費——新組件語法使用的概念與你之前花時間學習的一樣，其他概念，例如單文件組件、模板、scoped style 的功用完全一樣。

• 沒有經過咨詢，就不會改變——?RFC?就是在?咨詢。新語法離發布還有很長一段路要走。

• 不，HTML 代碼不需要被寫進一個超長字符串。

一個更主觀的觀點是：新語法不如舊語法，并且會導致結構化程度較低的代碼。 我希望通過一個簡單的例子來說明為什么我在看到 RFC 時如此興奮，以及為什么我覺得它更優秀，將會導致結構化?更好?的代碼。

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

• 當他們輸入完寵物的名字時會顯示一條信息；

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

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

考慮一下這個組件的 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;
?}
?}
};
復制代碼

實質上，我們有一些數據、從這些數據計算出的屬性、以及 操作這些數據的方法。 注意，在 Vue 2.x 中我們?沒有辦法把相關的東西放在一起。 我們不能把 petName 數據聲明放在 petNameComment 計算屬性或者 onPetNameBlur 方法旁邊，因為在 Vue 2.x 中，這些選項是按照類型組織的。

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

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

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
?};
?}
};
復制代碼

注意：

• 很容易把相關的東西放到一起；

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

• 我們甚至可以避免暴露模板不需要獲取的內部狀態（touched）。

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

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
?};
?}
};
復制代碼

在 Vue 2.x 中，我經常發現自己寫了個“怪獸組件”，它很難分解成更小的部分——它不能分解成其他的組件，因為很多事務基于少量狀態。 然而，使用提案中的語法，很容易看出大型組件的邏輯可以被分解為更小的可重用部分，在必要時移動到獨立的文件里，留給你小的、易于理解的函數和組件。

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

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

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