Link
Embed
Share
Beginning
This slide
Copy link URL
Copy link URL
Copy iframe embed code
Copy iframe embed code
Copy javascript embed code
Copy javascript embed code
Share
Tweet
Share
Tweet
Slide 1
Slide 1 text
初探 Vue 3.0 Function API Kuro Hsu @ LINE TW v-tw meetup #003 2019/08/06
Slide 2
Slide 2 text
Kuro Hsu - Organizers of Vue.js Taiwan - https://kuro.tw - kurotanshi@gmail.com - @kurotanshi
Slide 3
Slide 3 text
社群現況
Slide 4
Slide 4 text
Vue.js Taiwan https://vue.tw
Slide 5
Slide 5 text
超過九成的報名者在⼗十秒內 完成報名
Slide 6
Slide 6 text
下次的活動... 規劃中 敬請期待
Slide 7
Slide 7 text
關於 Vue 3.0 的進展
Slide 8
Slide 8 text
好消息
Slide 9
Slide 9 text
No content
Slide 10
Slide 10 text
No content
Slide 11
Slide 11 text
壞消息
Slide 12
Slide 12 text
No content
Slide 13
Slide 13 text
3.0 多了了哪些新特性
Slide 14
Slide 14 text
Vue 3.0 RFC https://github.com/vuejs/rfcs
Slide 15
Slide 15 text
• ⽬目標是更更⼩小、更更快 • 加強對 TypeScript 的⽀支援 • 加強 API 設計⼀一致性 • 提⾼高可維護性 • 開放更更多底層功能
Slide 16
Slide 16 text
• Object.defineProperty -> Proxy API • Virtual DOM 重構 • 增強編譯時的優化 • 更更多細節請參參閱尤⼤大在 VueConf 2019 的演講： https://docs.google.com/presentation/d/ 1giA0aF6b5kljg42NUYVTB5bMxxgAc2iRVPVDo2s TirI/edit
Slide 17
Slide 17 text
Class API • 為了了增強與 TypeScript 的⽀支援 • 與現有 API 的相容性差異異太⼤大 • 瀏覽器對原⽣生 Class API 的⽀支援還不夠完整 • 標準對 class fields, decorators 等提案還不穩定
Slide 18
Slide 18 text
Class API • 為了了增強與 TypeScript 的⽀支援 • 與現有 API 的相容性差異異太⼤大 • 瀏覽器對原⽣生 Class API 的⽀支援還不夠完整 • 標準對 class fields, decorators 等提案還不穩定 CANCELED
Slide 19
Slide 19 text
Vue 3.0 Function-based API
Slide 20
Slide 20 text
• ⼜又稱 composition functions • 以「組合代替繼承」來來實作元件的複⽤用 • 更更靈活的程式邏輯複⽤用 • 對 TypeScript 的類型推導⽀支援更更好 • Tree-shaking friendly、編譯後程式碼更更容易易被壓縮 Vue 3.0 Function-based API
Slide 21
Slide 21 text
對比過去其他做法
Slide 22
Slide 22 text
Mixins
Slide 23
Slide 23 text
Mixins • ❌ 可能造成 Namespace 的衝突 • ❌ 從 Mixins 引入的屬性難以追蹤來來源
Slide 24
Slide 24 text
HOC: Higher-order Components
Slide 25
Slide 25 text
HOC: Higher-order Components • ❌ Props 來來源不清晰 • ❌ Props namespace 衝突問題 • ❌ 多餘的元件實體造成性能浪費
Slide 26
Slide 26 text
Renderless Components
Slide 27
Slide 27 text
Renderless Components • ✅ 資料來來源清晰 • ✅ 無 namespace 衝突問題 • ❌ 多餘的元件實體造成性能浪費
Slide 28
Slide 28 text
Vue 3.0 Function- based API
Slide 29
Slide 29 text
• ✅ 資料來來源清晰 • ✅ 無 namespace 衝突問題 • ✅ 不會產⽣生多餘的元件實體 Vue 3.0 Function-based API
Slide 30
Slide 30 text
No content
Slide 31
Slide 31 text
https://github.com/vuejs/vue-function-api
Slide 32
Slide 32 text
Install
Slide 33
Slide 33 text
setup ( ) • 將共⽤用邏輯放在 setup 函式 • 第⼀一個參參數是 props • setup( ) 內無法透過 this 存取⽬目前元件， 但可以透過第⼆二個 context 參參數取得對應 的屬性 • 最後透過 return 的物件來來與元件實體溝通
Slide 34
Slide 34 text
value( ) • value( ) 會為元件⽣生成⼀一個響應式 的屬性 (如同原本的 data) • 存取時透過 value( ) 的回傳 的 .value 屬性即可
Slide 35
Slide 35 text
state( ) • 未透過 value( ) 包裝的響應式物 件 • 意義上等同於 v2.x 的 Vue.observable( )
Slide 36
Slide 36 text
computed( ) • 與 v2.x computed 屬性的⾏行行爲、 作⽤用完全⼀一樣
Slide 37
Slide 37 text
watch( ) • 透過 watch 追蹤某個狀狀態的變化， 同時呼叫 callback function • 第⼀一個參參數是狀狀態來來源，第⼆二個則 是對應的 callback function
Slide 38
Slide 38 text
Lifecycle hooks • 除了了 beforeCreated 之外的 Lifecycle hook 都可以透過 onXXX 的形式來來對應 • 另外新增了了 onUnmounted
Slide 39
Slide 39 text
Provide / Inject • 與 v2.x 的 provide、 inject 作⽤用 完全⼀一樣。
Slide 40
Slide 40 text
Let’s Demo: Todo List
Slide 41
Slide 41 text
https://github.com/kurotanshi/vue-function-api-demo
Slide 42
Slide 42 text
⼤大家關⼼心的事...
Slide 43
Slide 43 text
轉換成本
Slide 44
Slide 44 text
No content
Slide 45
Slide 45 text
在社群 激戰 討論後， 更更新後的 RFC 已取消此策略略 來源: https://github.com/vuejs/rfcs/commit/6fe6f7be06dd5982be3c57e248fcd66cd55748e0
Slide 46
Slide 46 text
https://suspicious-mclean-0e54c3.netlify.com/
Slide 47
Slide 47 text
轉換成本 === 0
Slide 48
Slide 48 text
• 已知 2.x -> 3.x 不會有 Breaking Change，完全相容現有 API • 新版本更更多的是底層的改寫，對多數開發者來來說沒有明顯差距 • 就是需要回饋才設有 RFC，有意⾒見見歡迎⾄至 RFC 反應
Slide 49
Slide 49 text
⚠ 投資⼀一定有風險，開發前應詳閱公開說明書 ⚠
Slide 50
Slide 50 text
Thanks