前言
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:
- 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中
router,Vuex&test-utils將收到相應的更新以符合此願景前端
一流的自定義渲染器和定製的編譯器apivue
關於譯者