初探 Vue 3.0 Function API

9ae4f3862d4cb0771cfd36e43252f755?s=47 Kuro Hsu
August 06, 2019

初探 Vue 3.0 Function API

v-tw meetup #03 @ LINE TW
2019/08/06

9ae4f3862d4cb0771cfd36e43252f755?s=128

Kuro Hsu

August 06, 2019
Tweet

Transcript

  1. 1.
  2. 2.
  3. 9.
  4. 10.
  5. 11.
  6. 12.
  7. 16.

    • Object.defineProperty -> Proxy API • Virtual DOM 重構 •

    增強編譯時的優化 • 更更多細節請參參閱尤⼤大在 VueConf 2019 的演講:
 https://docs.google.com/presentation/d/ 1giA0aF6b5kljg42NUYVTB5bMxxgAc2iRVPVDo2s TirI/edit
  8. 17.

    Class API • 為了了增強與 TypeScript 的⽀支援 • 與現有 API 的相容性差異異太⼤大

    • 瀏覽器對原⽣生 Class API 的⽀支援還不夠完整 • 標準對 class fields, decorators 等提案還不穩定
  9. 18.

    Class API • 為了了增強與 TypeScript 的⽀支援 • 與現有 API 的相容性差異異太⼤大

    • 瀏覽器對原⽣生 Class API 的⽀支援還不夠完整 • 標準對 class fields, decorators 等提案還不穩定 CANCELED
  10. 20.

    • ⼜又稱 composition functions • 以「組合代替繼承」來來實作元件的複⽤用 • 更更靈活的程式邏輯複⽤用 • 對

    TypeScript 的類型推導⽀支援更更好 • Tree-shaking friendly、編譯後程式碼更更容易易被壓縮 Vue 3.0 Function-based API
  11. 22.
  12. 25.

    HOC: Higher-order Components • ❌ Props 來來源不清晰 • ❌ Props

    namespace 衝突問題 • ❌ 多餘的元件實體造成性能浪費
  13. 29.

    • ✅ 資料來來源清晰 • ✅ 無 namespace 衝突問題 • ✅

    不會產⽣生多餘的元件實體 Vue 3.0 Function-based API
  14. 30.
  15. 32.
  16. 33.

    setup ( ) • 將共⽤用邏輯放在 setup 函式 • 第⼀一個參參數是 props

    • setup( ) 內無法透過 this 存取⽬目前元件, 但可以透過第⼆二個 context 參參數取得對應 的屬性 • 最後透過 return 的物件來來與元件實體溝通
  17. 37.

    watch( ) • 透過 watch 追蹤某個狀狀態的變化, 同時呼叫 callback function •

    第⼀一個參參數是狀狀態來來源,第⼆二個則 是對應的 callback function
  18. 38.
  19. 44.
  20. 48.

    • 已知 2.x -> 3.x 不會有 Breaking Change,完全相容現有 API •

    新版本更更多的是底層的改寫,對多數開發者來來說沒有明顯差距 • 就是需要回饋才設有 RFC,有意⾒見見歡迎⾄至 RFC 反應
  21. 50.