初探 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. 初探 Vue 3.0 Function API Kuro Hsu @ LINE TW

    v-tw meetup #003 2019/08/06
  2. Kuro Hsu - Organizers of Vue.js Taiwan - https://kuro.tw -

    kurotanshi@gmail.com - @kurotanshi
  3. 社群現況

  4. Vue.js Taiwan https://vue.tw

  5. 超過九成的報名者在⼗十秒內 完成報名

  6. 下次的活動... 規劃中 敬請期待

  7. 關於 Vue 3.0 的進展

  8. 好消息

  9. None
  10. None
  11. 壞消息

  12. None
  13. 3.0 多了了哪些新特性

  14. Vue 3.0 RFC https://github.com/vuejs/rfcs

  15. • ⽬目標是更更⼩小、更更快 • 加強對 TypeScript 的⽀支援 • 加強 API 設計⼀一致性

    • 提⾼高可維護性 • 開放更更多底層功能
  16. • Object.defineProperty -> Proxy API • Virtual DOM 重構 •

    增強編譯時的優化 • 更更多細節請參參閱尤⼤大在 VueConf 2019 的演講:
 https://docs.google.com/presentation/d/ 1giA0aF6b5kljg42NUYVTB5bMxxgAc2iRVPVDo2s TirI/edit
  17. Class API • 為了了增強與 TypeScript 的⽀支援 • 與現有 API 的相容性差異異太⼤大

    • 瀏覽器對原⽣生 Class API 的⽀支援還不夠完整 • 標準對 class fields, decorators 等提案還不穩定
  18. Class API • 為了了增強與 TypeScript 的⽀支援 • 與現有 API 的相容性差異異太⼤大

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

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

    TypeScript 的類型推導⽀支援更更好 • Tree-shaking friendly、編譯後程式碼更更容易易被壓縮 Vue 3.0 Function-based API
  21. 對比過去其他做法

  22. Mixins

  23. Mixins • ❌ 可能造成 Namespace 的衝突 • ❌ 從 Mixins

    引入的屬性難以追蹤來來源
  24. HOC: Higher-order Components

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

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

  27. Renderless Components • ✅ 資料來來源清晰 • ✅ 無 namespace 衝突問題

    • ❌ 多餘的元件實體造成性能浪費
  28. Vue 3.0 Function- based API

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

    不會產⽣生多餘的元件實體 Vue 3.0 Function-based API
  30. None
  31. https://github.com/vuejs/vue-function-api

  32. Install

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

    • setup( ) 內無法透過 this 存取⽬目前元件, 但可以透過第⼆二個 context 參參數取得對應 的屬性 • 最後透過 return 的物件來來與元件實體溝通
  34. value( ) • value( ) 會為元件⽣生成⼀一個響應式 的屬性 (如同原本的 data) •

    存取時透過 value( ) 的回傳 的 .value 屬性即可
  35. state( ) • 未透過 value( ) 包裝的響應式物 件 • 意義上等同於

    v2.x 的 Vue.observable( )
  36. computed( ) • 與 v2.x computed 屬性的⾏行行爲、 作⽤用完全⼀一樣

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

    第⼀一個參參數是狀狀態來來源,第⼆二個則 是對應的 callback function
  38. Lifecycle hooks • 除了了 beforeCreated 之外的 Lifecycle hook 都可以透過 onXXX

    的形式來來對應 • 另外新增了了 onUnmounted
  39. Provide / Inject • 與 v2.x 的 provide、 inject 作⽤用

    完全⼀一樣。
  40. Let’s Demo: Todo List

  41. https://github.com/kurotanshi/vue-function-api-demo

  42. ⼤大家關⼼心的事...

  43. 轉換成本

  44. None
  45. 在社群 激戰 討論後, 更更新後的 RFC 已取消此策略略 來源: https://github.com/vuejs/rfcs/commit/6fe6f7be06dd5982be3c57e248fcd66cd55748e0

  46. https://suspicious-mclean-0e54c3.netlify.com/

  47. 轉換成本 === 0

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

    新版本更更多的是底層的改寫,對多數開發者來來說沒有明顯差距 • 就是需要回饋才設有 RFC,有意⾒見見歡迎⾄至 RFC 反應
  49. ⚠ 投資⼀一定有風險,開發前應詳閱公開說明書 ⚠

  50. Thanks