【譯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將收到相應的更新以符合此願景前端

  • 甚至更低層次的靈活性

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

關於譯者

相關文章
相關標籤/搜索