Categories
程式開發

尤雨溪VueConf的演講:Vue 3.0的新特性和設計理念


按照規劃,Vue.js框架的主迭代版本將在2020年第一季度發布,在VueConf多倫多會議上,Vue.js的創始人兼項目領導者尤雨溪討論了Vue 3背後的設計理念以及新版本中添加的最新特性。

尤雨溪首先提到,與其他流行的框架不同,Vue與任何公司都沒有關聯關係,因此Vue的開發是由Vue開發者社區以及如何更好地滿足他們的需求來驅動的。隨著Vue社區的發展,它也變得多樣化起來。尤雨溪將只具有基礎HTML/CSS知識的初學者、從jQuery轉移過來的專業人士、從其他框架遷移過來的老手、尋找前端解決方案的後端工程師以及處理大規模軟件的架構師進行了識別和區分。

開發社區中人群的多樣性其實對應了框架使用場景的多樣性。有些開發人員希望將交互性引入到遺留應用中,而有些人則只是想要處理一個一次性的項目,這樣的項目有快速的交付週期,但是在維護方面無需過多關注。針對這個話題,架構師想要處理的可能是一個要持續數年的大規模項目,而且在項目的生命週期之內,必然要面對開發人員的變動。

因此,Vue在設計自身框架時需要面對受眾和使用場景多樣化的挑戰,這必然會導致一定的折衷。 Vue 3背後的一個核心驅動力在於,儘管開發人員都很欣賞Vue 2 API易於學習的特點,但是同樣的API在大規模使用時也出現了可維護性的問題。另一方面,為了滿足多樣化的需求,持續向框架添加特性會帶來bundle越來越重的風險。尤雨溪在四個維度對Vue 3發布版本的折衷和平衡進行了分組。

第一個折衷就是易用性(approchability)與可擴展性(scalability)。 Vue較低的進入壁壘是採用它的重要因素。儘管Vue想要保持對開發人員的易用性,但是在構建大型或複雜組件時,它必須要解決當前基於對象的API(叫做Options API)所暴露的問題。 InfoQ之前已經介紹過它的新API(叫做Component API),該API有望更好地為複雜組件分離關注點和可重用性。為了保持Vue的易用性,Component API完全是附加和可選的。

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

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

一方面,模板提供了性能優化,Vue 3在將模板編譯為優化後的渲染函數時利用了這一點,渲染函數本身會使用一個優化的數據結構來實現diff的目的。模板會明確分離靜態節點(

Lorm ipsum

)和動態節點({{message}}),Vue 3的diff算法可能會在一個特定的數據結構中跟踪動態部分及其依賴。

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

另外一項折衷就是功能的強大與項目的大小。隨著每個新特性的加入,每位用戶的bundle大小都可能會增加。 Vue 3以兩種方式來解決這個問題。尤雨溪首先指出,大多數的全局API和內部Vue輔助程序都會以ES模塊導出的形式提供,因此能夠實現搖樹(tree-shakeable)優化(一種代碼導入的優化技術,能夠實現死代碼消除,避免引入根本不會執行的代碼,參見維基百科。 ——譯者註)。另外,Vue 3編譯器也會為模板生成搖樹優化的代碼。尤雨溪給出瞭如下使用v-model的樣例:


它將會被編譯為:

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

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

尤雨溪設想的最後一個折衷是一致性與低層級的靈活性。 Vue 3將通過更新Vue RouterVuextest-utils來提供一致的體驗,使它們與新的願景保持一致。 Vue 3還將為開發者提供定義自己的渲染器的能力。React中已經提供了這種能力,並被廣泛用於為各種託管環境創建渲染器,如移動設備或終端設備。

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

Vue 3計劃在2020年第一季度發布。當前的Vue 2版本除了服務器端渲染之外,還有一些性能的改善,包括更小的庫和更快速、更輕量級的虛擬DOM實現,後者fork自Snabbdom

完整的演講可以通過該 地址訪問,其中包括一些擴展信息和样例。 Vue是一個用於構建用戶界面(包括單頁面應用程序]的漸進式框架。 Vue.js遵循MIT開源協議。歡迎通過Vue.js GitHub包對其進行貢獻並請遵循Vue.js貢獻指南

原文鏈接:

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