按照規(guī)劃， Vue.js 框架的主迭代版本將在 2020 年第一季度發(fā)布，在 VueConf 多倫多會議上， Vue.js 的創(chuàng)始人兼項目領(lǐng)導(dǎo)者尤雨溪討論了 Vue 3 背后的設(shè)計理念以及新版本中添加的最新特性。

尤雨溪首先提到，與其他流行的框架不同，Vue 與任何公司都沒有關(guān)聯(lián)關(guān)系，因此 Vue 的開發(fā)是由 Vue 開發(fā)者社區(qū)以及如何更好地滿足他們的需求來驅(qū)動的。隨著 Vue 社區(qū)的發(fā)展，它也變得多樣化起來。尤雨溪將只具有基礎(chǔ) HTML/CSS 知識的初學(xué)者、從 jQuery 轉(zhuǎn)移過來的專業(yè)人士、從其他框架遷移過來的老手、尋找前端解決方案的后端工程師以及處理大規(guī)模軟件的架構(gòu)師進(jìn)行了識別和區(qū)分。

開發(fā)社區(qū)中人群的多樣性其實對應(yīng)了框架使用場景的多樣性。有些開發(fā)人員希望將交互性引入到遺留應(yīng)用中，而有些人則只是想要處理一個一次性的項目，這樣的項目有快速的交付周期，但是在維護(hù)方面無需過多關(guān)注。針對這個話題，架構(gòu)師想要處理的可能是一個要持續(xù)數(shù)年的大規(guī)模項目，而且在項目的生命周期之內(nèi)，必然要面對開發(fā)人員的變動。

因此，Vue 在設(shè)計自身框架時需要面對受眾和使用場景多樣化的挑戰(zhàn)，這必然會導(dǎo)致一定的折衷。Vue 3 背后的一個核心驅(qū)動力在于，盡管開發(fā)人員都很欣賞 Vue 2 API 易于學(xué)習(xí)的特點，但是同樣的 API 在大規(guī)模使用時也出現(xiàn)了可維護(hù)性的問題。另一方面，為了滿足多樣化的需求，持續(xù)向框架添加特性會帶來 bundle 越來越重的風(fēng)險。尤雨溪在四個維度對 Vue 3 發(fā)布版本的折衷和平衡進(jìn)行了分組。

第一個折衷就是易用性（approchability）與可擴(kuò)展性（scalability）。Vue 較低的進(jìn)入壁壘是采用它的重要因素。盡管 Vue 想要保持對開發(fā)人員的易用性，但是在構(gòu)建大型或復(fù)雜組件時，它必須要解決當(dāng)前基于對象的 API（叫做Options API）所暴露的問題。InfoQ之前已經(jīng)介紹過它的新API（叫做* Component API*），該 API 有望更好地為復(fù)雜組件分離關(guān)注點和可重用性。為了保持 Vue 的易用性，Component API 完全是附加和可選的。

與之類似，按照設(shè)計決策，Vue 3 將會使用 TypeScript 編寫。除了增強 Vue 代碼庫的可維護(hù)性以及更易于開發(fā)者為其貢獻(xiàn)之外，該決策還有兩個積極的影響。首先，隨著 TypeScript 的流行程度不斷增加并且已經(jīng)成為大型項目的常見選擇，在 Vue 3 內(nèi)部使用 TypeScript 能夠讓開發(fā)人員從 Vue 的 TypeScript 定義中收益，同時還得到現(xiàn)代 IDE 的常見代碼支持，如 Visual Studio Code 或 WebStorm。其次，即便不用 TypeScript，普通的 JavaScript 用戶也能受益于現(xiàn)代 IDE 的代碼智能特性。另外，尤雨溪認(rèn)為 TypeScript 的 Vue 代碼其實 90% 都是 JavaScript，因為 Vue 類型定義只允許開發(fā)人員在其代碼的很少一部分上添加標(biāo)注。

第二個維度的關(guān)注點是視圖聲明。Vue 2 同時支持模板和基于 JSX 的渲染函數(shù)（render function）。Vue 社區(qū)中熟悉 HTML 和 CSS 的那部分人看重對模板的支持，而沒有接觸過這些技術(shù)的開發(fā)人員則更喜歡渲染函數(shù)（尤雨溪暗示 iOS 開發(fā)人員適合這種方式）。Vue 3 試圖利用這兩種方式的優(yōu)點。

一方面，模板提供了性能優(yōu)化，Vue 3 在將模板編譯為優(yōu)化后的渲染函數(shù)時利用了這一點，渲染函數(shù)本身會使用一個優(yōu)化的數(shù)據(jù)結(jié)構(gòu)來實現(xiàn) diff 的目的。模板會明確分離靜態(tài)節(jié)點（<p> Lorm ipsum </p>）和動態(tài)節(jié)點（<span>{{message}}</span>），Vue 3 的 diff 算法可能會在一個特定的數(shù)據(jù)結(jié)構(gòu)中跟蹤動態(tài)部分及其依賴。

另一方面，JSX 渲染函數(shù)允許開發(fā)人員借助 JavaScript 語言完整的表達(dá)能力來表達(dá)復(fù)雜的特殊（ad-hoc）邏輯。雖然在某些情況下，JSX 渲染函數(shù)非常實用并且是完全必要的，但是以通用的方式優(yōu)化它所面臨的困難是眾所周知的。尤雨溪指出，要實現(xiàn)這一點需要非常聰明的流分析， Prepack Facebook 項目就是為了實現(xiàn)這一目標(biāo)的，但是該項目卻因為困難而停滯不前。因此，Vue 3 維持了其雙重視圖聲明機制，同時尋求優(yōu)化視圖模板的 diff 和渲染。

另外一項折衷就是功能的強大與項目的大小。隨著每個新特性的加入，每位用戶的 bundle 大小都可能會增加。Vue 3 以兩種方式來解決這個問題。尤雨溪首先指出，大多數(shù)的全局 API 和內(nèi)部 Vue 輔助程序都會以 ES 模塊導(dǎo)出的形式提供，因此能夠?qū)崿F(xiàn)搖樹（tree-shakeable）優(yōu)化（一種代碼導(dǎo)入的優(yōu)化技術(shù)，能夠?qū)崿F(xiàn)死代碼消除，避免引入根本不會執(zhí)行的代碼，參見維基百科?！g者注）。另外，Vue 3 編譯器也會為模板生成搖樹優(yōu)化的代碼。尤雨溪給出了如下使用v-model的樣例：

復(fù)制代碼

<input v-model="text" type="checkbox"><keep-alive></keep-alive>

它將會被編譯為：

復(fù)制代碼

import {vModelCheckbox, KeepAlive, ...} from "vue"...

尤雨溪提到，這樣的話，Vue 3 核心的大小將會從 20KB 降低到 10KB。開發(fā)人員只需要以這個核心為基礎(chǔ)，添加他們所需的 Vue 模塊即可。

尤雨溪設(shè)想的最后一個折衷是一致性與低層級的靈活性。Vue 3 將通過更新 Vue Router 、 Vuex 和 test-utils 來提供一致的體驗，使它們與新的愿景保持一致。Vue 3 還將為開發(fā)者提供定義自己的渲染器的能力。 React 中已經(jīng)提供了這種能力，并被廣泛用于為各種托管環(huán)境創(chuàng)建渲染器，如移動設(shè)備或終端設(shè)備。

Vue 3 還將為自定義模板編譯過程輸出提供低層級 API。尤雨溪提到，工具可以利用該 API 來提供更好的 DX 或 UX（例如在 UI 標(biāo)記中強化可訪問性特征）。特別是，開發(fā)人員可以定義自定義轉(zhuǎn)換，將其用于已解析的模板。雖然 Vue 社區(qū)將會推出什么還有待觀察，但是如果 Babel 社區(qū)有這種跡象的話，那么可以推測增強的模板語言（例如，帶有宏功能）有可能會出現(xiàn)。這些低層級工具的第一個應(yīng)用程序是 Vue 3 模板瀏覽器，尤雨溪說新的 API 能夠讓他在一個下午就將其構(gòu)建出來。

Vue 3 計劃在 2020 年第一季度發(fā)布。當(dāng)前的 Vue 2 版本除了服務(wù)器端渲染之外，還有一些性能的改善，包括更小的庫和更快速、更輕量級的虛擬 DOM 實現(xiàn)，后者 fork 自 Snabbdom 。

完整的演講可以通過該 地址訪問，其中包括一些擴(kuò)展信息和樣例。Vue 是一個用于構(gòu)建用戶界面（包括單頁面應(yīng)用程序) 的漸進(jìn)式框架。Vue.js 遵循MIT 開源協(xié)議。歡迎通過Vue.js GitHub 包對其進(jìn)行貢獻(xiàn)并請遵循 Vue.js 貢獻(xiàn)指南。

原文鏈接：

New Features and Design Principles of Vue 3.0 - Evan You at VueConf Toronto