【譯PPT/必讀】尤雨溪：Vue 3.0的設計原則

前言

2019年11月11號在Vue Toronto 2019會議上，@尤雨溪作了關於《Design Principles of Vue 3.0》的分享。

本PPT做者@尤雨溪，翻譯做者：黑叔666。

（注：因爲黑叔英語基礎薄弱，如有任何更好的翻譯，可評論區留言噢！）

譯文：VUE 3.0 的設計原則

譯文：快速狀態更新

譯文：全世界每週有100萬活躍用戶！

譯文：NPM每週下載：超過去年的100%以上

譯文：路易威登使用的是Vue和Nuxt技術

譯文：Vue設計面臨的挑戰

譯文：VUE有很是多樣化的用戶

• 剛剛從HTML和CSS有了進展的初學者
• 從JQuery框架的轉過來的專業人員
• 從另外一個框架轉過來的搬磚老兵
• 後端工程師尋找輕量級的前端解決方案
• 架構師爲整個組織選擇基礎

譯文：VUE有很是多樣化的使用場景

• 將交互性結合到遺留的應用程序上
• 一次性項目須要快速週轉，但不須要長期團隊維護
• 可預測複雜度的中型項目
• 大型項目預計將持續數年，團隊運做

譯文：設計包括解決權衡問題

• 爲簡單性而優化的API會致使大規模的可維護性問題
• 重型工具增長了進入壁壘並限制了用例
• 更多的功能會致使更多的臃腫

譯文：框架必須在多個維度上進行考慮

譯文：可接近性 VS 可擴展性

譯文：CDN構建 VS Vue腳手架

譯文：選項API和合成API

• 爲何要介紹另外一種方式

譯文：選項API

• 直觀易用
• 大規模應用程序中的可擴展性問題

譯文：合成API

• 純添加劑
• 可與選項API一塊兒使用
• 提供更靈活的代碼組織和邏輯重用功能
• 提供出色的typescript支持

譯文：TypeScript vs JavaScript

• TypeScript真的是有必要嗎？

譯文：爲何TypeScript：

• Pro：優秀的IDE支持自動補全和類型信息
• Pro：重構大型項目中舊代碼的信心
• Cons：學習成本
• Cons：初期發展緩慢

譯文：In vue 3

• TS定義對JS用戶也有好處
• 使用TS和JS的組件代碼看起來基本相同

譯文：模板 VS JSX：

• 爲何要提供兩種？

譯文：做爲一個包容的框架意味着去迎合不一樣背景的用戶

譯文：另外，模板容許咱們得到更好的性能

譯文：儘管Vue能夠確保組件樹級別的更新最少，但它仍然是每一個組件實例中的徹底diff。

譯文：傳統虛擬DOM的瓶頸

• 傳統VDOM的性能取決於模板的總大小，而不是模板中動態內容的數量

• 徹底動態渲染邏輯使得很難對用戶意圖進行安全的最大AOT優化假設。

譯文：語法約束促使更好的優化

譯文：讓咱們開始一個最簡單的例子

• 徹底沒有節點結構更改
• 只有一個動態節點

譯文：節點結構改變：v-if

譯文：節點結構改變：v-if

• 外面的v-if:v-if是惟一的動態節點
• 裏面的v-if:{{message}}是惟一的動態節點

譯文：節點結構改變：v-for

• 外面的v-for:v-for是惟一的動態節點（做爲碎片）
• 裏面的每個v-for迭代:{{item.message}}是惟一的動態節點

譯文：這是一棵大樹

• 基於結構指令劃分爲「塊」的模板
• 在每一個塊中，節點結構是徹底靜態的
• 每一個塊只須要一個扁平的數組來跟蹤動態節點

譯文：使用新策略，更新性能是動態內容的數量而不是總模板大小決定

譯文：更新性能基準

• v-for有1000次迭代
• 在每次迭代中,12個DOM元素嵌套3層深,2個動態類綁定,1個動態文本插值,1個動態id屬性綁定
• 更新全部動態綁定，平均運行100次

譯文：Power vs Size

譯文：Vue2的困境：

• 每一個新特性都會增長每一個用戶的包大小

譯文：在Vue 3中

• 大多數全局api和內部幫助程序做爲ES模塊導出被提供（可搖動的樹）
• 編譯器也爲模板生成樹可更改代碼
• 不要爲你從未使用過的功能付費

譯文：框架一致性與低層韌性

譯文：

• 庫 vs 框架
• 原始 vs 抽象
• 集市 vs 大教堂

譯文：小範圍優勢

• 開始使用的概念更少
• 更多的靈活性和更多的用戶機會->活躍生態系統
• 較小的維護面-> 團隊能夠專一於探索新的想法

譯文：小範圍缺點

• 在用簡單的概念解決固有的複雜問題時須要更多的管道工程
• 隨着時間的推移，模式天然會出現，併成爲半必需的知識，但一般沒有正式的文檔記錄
• 生態系統移動過快會致使分裂和持續的變更

譯文：大範圍優勢

• 最多見的問題能夠經過內置的抽象來解決
• 集中的設計過程確保了一致和連貫的生態系統

譯文：大範圍缺點

• 更高的前期學習障礙
• 不靈活的內置解決方案不適合用例
• 更大的維護面使引入基本的新思想更加尖

譯文：進步的地方

• 分層設計，容許以漸進的方式選擇功能
• 低入門學習障礙
• 常見問題的文檔解決方案

譯文：在Vue 3中

• 與vue 2相同的連貫體驗

router，Vuex&test-utils將收到相應的更新以符合此願景

• 甚至更低層次的靈活性

一流的自定義渲染器和定製的編譯器api

關於譯者