Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
初探 Vue 3.0 Function API
Search
Kuro Hsu
August 06, 2019
Programming
4
3k
初探 Vue 3.0 Function API
v-tw meetup #03 @ LINE TW
2019/08/06
Kuro Hsu
August 06, 2019
Tweet
Share
More Decks by Kuro Hsu
See All by Kuro Hsu
Laravel x Vite
kurotanshi
0
630
[.NET Conf 2020 Taiwan] 以輕前端視角進入 Vue 3.0 的世界
kurotanshi
0
730
[MOPCON 2020] vite: Make web dev fast again
kurotanshi
0
2.4k
[ModernWeb'20] Vue.js :The Bad Parts
kurotanshi
1
120
[MOPCON 2019] Vue.js 3.0 與 Composition API 的變革
kurotanshi
1
1.3k
[JSDC2019] 我有一堆選擇 Vue 開發框架的理由
kurotanshi
1
760
[COSCUP 2019] 前端工程師的養成之路與開源工具
kurotanshi
3
410
VueJS Style Guide 導讀
kurotanshi
6
1.8k
[JSDC2017] 從 VueJS 看前端生態圈的發展變化
kurotanshi
9
2.4k
Other Decks in Programming
See All in Programming
Perlで痩せる
yuukis
1
620
Zennの運営完全に理解した #完全に理解したTalk
wadayusuke
1
130
マテリアルって何者?RealityKitで扱うマテリアル入門
nao_randd
0
140
Cloudflare Realtime と Workers でつくるサーバーレス WebRTC
nekoya3
0
200
JVM の仕組みを理解して PHP で実装してみよう
m3m0r7
PRO
1
240
TSConfigからTypeScriptの世界を覗く
planck16
2
1.3k
CRUD から CQRS へ ~ 分離が可能にする柔軟性
tkawae
0
220
OpenTelemetry + LLM = OpenLLMetry!?
yunosukey
2
380
イベントソーシングとAIの親和性ー物語とLLMに理解できるデータ
tomohisa
1
160
MLOps Japan 勉強会 #52 - 特徴量を言語を越えて一貫して管理する, 『特徴量ドリブン』な MLOps の実現への試み
taniiicom
2
510
TSConfig Solution Style & subpath imports to switch types on a per-file basis
maminami373
1
170
複雑なフォームを継続的に開発していくための技術選定・設計・実装 #tskaigi / #tskaigi2025
izumin5210
12
6.2k
Featured
See All Featured
Into the Great Unknown - MozCon
thekraken
38
1.8k
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.5k
Adopting Sorbet at Scale
ufuk
76
9.4k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
32
5.8k
[RailsConf 2023] Rails as a piece of cake
palkan
55
5.6k
Producing Creativity
orderedlist
PRO
346
40k
Build The Right Thing And Hit Your Dates
maggiecrowley
35
2.7k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
5
610
Side Projects
sachag
454
42k
Unsuck your backbone
ammeep
671
58k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
233
17k
Being A Developer After 40
akosma
91
590k
Transcript
初探 Vue 3.0 Function API Kuro Hsu @ LINE TW
v-tw meetup #003 2019/08/06
Kuro Hsu - Organizers of Vue.js Taiwan - https://kuro.tw -
[email protected]
- @kurotanshi
社群現況
Vue.js Taiwan https://vue.tw
超過九成的報名者在⼗十秒內 完成報名
下次的活動... 規劃中 敬請期待
關於 Vue 3.0 的進展
好消息
None
None
壞消息
None
3.0 多了了哪些新特性
Vue 3.0 RFC https://github.com/vuejs/rfcs
• ⽬目標是更更⼩小、更更快 • 加強對 TypeScript 的⽀支援 • 加強 API 設計⼀一致性
• 提⾼高可維護性 • 開放更更多底層功能
• Object.defineProperty -> Proxy API • Virtual DOM 重構 •
增強編譯時的優化 • 更更多細節請參參閱尤⼤大在 VueConf 2019 的演講: https://docs.google.com/presentation/d/ 1giA0aF6b5kljg42NUYVTB5bMxxgAc2iRVPVDo2s TirI/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-order Components
HOC: Higher-order Components • ❌ Props 來來源不清晰 • ❌ Props
namespace 衝突問題 • ❌ 多餘的元件實體造成性能浪費
Renderless Components
Renderless Components • ✅ 資料來來源清晰 • ✅ 無 namespace 衝突問題
• ❌ 多餘的元件實體造成性能浪費
Vue 3.0 Function- based API
• ✅ 資料來來源清晰 • ✅ 無 namespace 衝突問題 • ✅
不會產⽣生多餘的元件實體 Vue 3.0 Function-based API
None
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
⼤大家關⼼心的事...
轉換成本
None
在社群 激戰 討論後, 更更新後的 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