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