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
2.9k
初探 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
570
[.NET Conf 2020 Taiwan] 以輕前端視角進入 Vue 3.0 的世界
kurotanshi
0
630
[MOPCON 2020] vite: Make web dev fast again
kurotanshi
0
2.3k
[ModernWeb'20] Vue.js :The Bad Parts
kurotanshi
1
80
[MOPCON 2019] Vue.js 3.0 與 Composition API 的變革
kurotanshi
1
1.1k
[JSDC2019] 我有一堆選擇 Vue 開發框架的理由
kurotanshi
1
680
[COSCUP 2019] 前端工程師的養成之路與開源工具
kurotanshi
3
380
VueJS Style Guide 導讀
kurotanshi
6
1.7k
[JSDC2017] 從 VueJS 看前端生態圈的發展變化
kurotanshi
9
2.1k
Other Decks in Programming
See All in Programming
#phpcon_odawara オープン・クローズドなテストフィクスチャを求めて / open closed test fixtures
77web
3
230
単体テストを書かない技術 #phpcon_odawara
o0h
PRO
27
8.3k
AWS Application Composerで始める、 サーバーレスなデータ基盤構築 / 20240406-jawsug-hokuriku-shinkansen
kasacchiful
1
260
見た目から始める生産性向上
ikumatadokoro
7
840
はてなにおける CSS Modules、及び CSS Modules に足りないもの / CSS Modules in Hatena, and CSS Modules missing parts
mizdra
7
930
使ってみよう Azure AI Document Intelligence
kosmosebi
2
310
効率化に挑戦してみたらモバイル開発が少し快適になった話
ryunakayama
0
130
二郎系ラーメンのコールで学ぶ AST 解析
memory1994
PRO
7
1.7k
ゆるい個人開発のススメ
kuroppe1819
10
990
Fragment Composition of GraphQL
quramy
7
1k
Hanami and htmx
bkuhlmann
0
210
GraphQLサーバの構成要素を整理する #ハッカー鮨 #tsukijigraphql / graphql server technology selection
izumin5210
4
840
Featured
See All Featured
Web development in the modern age
philhawksworth
202
10k
How to name files
jennybc
65
93k
A designer walks into a library…
pauljervisheath
200
23k
Raft: Consensus for Rubyists
vanstee
132
6.3k
Building a Modern Day E-commerce SEO Strategy
aleyda
17
6.4k
Robots, Beer and Maslow
schacon
PRO
155
7.9k
The Brand Is Dead. Long Live the Brand.
mthomps
49
29k
Documentation Writing (for coders)
carmenintech
60
3.9k
Agile that works and the tools we love
rasmusluckow
325
20k
GraphQLの誤解/rethinking-graphql
sonatard
50
9.2k
Thoughts on Productivity
jonyablonski
58
3.8k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
274
13k
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