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
[ModernWeb'20] Vue.js :The Bad Parts
Search
Kuro Hsu
September 20, 2020
Technology
1
110
[ModernWeb'20] Vue.js : The Bad Parts
Vue.js 發展至今也有數年的歷史,而今年最熱門的議題莫過於新釋出的 Vue 3.0。 在本場演講中,我將以社群傳教士的角度向大家分享 Vue.js 這些年來的發展,以及那些不太受歡迎的特性。
Kuro Hsu
September 20, 2020
Tweet
Share
More Decks by Kuro Hsu
See All by Kuro Hsu
Laravel x Vite
kurotanshi
0
620
[.NET Conf 2020 Taiwan] 以輕前端視角進入 Vue 3.0 的世界
kurotanshi
0
720
[MOPCON 2020] vite: Make web dev fast again
kurotanshi
0
2.3k
[MOPCON 2019] Vue.js 3.0 與 Composition API 的變革
kurotanshi
1
1.2k
[JSDC2019] 我有一堆選擇 Vue 開發框架的理由
kurotanshi
1
750
[COSCUP 2019] 前端工程師的養成之路與開源工具
kurotanshi
3
400
初探 Vue 3.0 Function API
kurotanshi
4
3k
VueJS Style Guide 導讀
kurotanshi
6
1.8k
[JSDC2017] 從 VueJS 看前端生態圈的發展變化
kurotanshi
9
2.3k
Other Decks in Technology
See All in Technology
LINE Notify互換のボットを作った話
kenichirokimura
0
180
バクラクでのSystem Risk Records導入による変化と改善の取り組み/Changes and Improvement Initiatives Resulting from the Implementation of System Risk Records
taddy_919
0
220
Restarting_SRE_Road_to_SRENext_.pdf
_awache
0
170
銀行でDevOpsを進める理由と実践例 / 20250317 Masaki Iwama
shift_evolve
1
110
大規模プロジェクトにおける 品質管理の要点と実践 / 20250327 Suguru Ishii
shift_evolve
0
290
頻繁リリース × 高品質 = 無理ゲー? いや、できます!/20250306 Shoki Hyo
shift_evolve
0
160
チームの性質によって変わる ADR との向き合い方と、生成 AI 時代のこれから / How to deal with ADR depends on the characteristics of the team
mh4gf
4
340
Multitenant 23ai の全貌 - 機能・設計・実装・運用からマイクロサービスまで
oracle4engineer
PRO
2
120
AI・LLM事業部のSREとタスクの自動運転
shinyorke
PRO
0
300
アプリケーション固有の「ロジックの脆弱性」を防ぐ開発者のためのセキュリティ観点
flatt_security
32
12k
20250328_RubyKaigiで出会い鯛_____RubyKaigiから始まったはじめてのOSSコントリビュート.pdf
mterada1228
0
130
日本MySQLユーザ会ができるまで / making MyNA
tmtms
1
360
Featured
See All Featured
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
233
17k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
49k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
12
610
Building Applications with DynamoDB
mza
94
6.3k
A designer walks into a library…
pauljervisheath
205
24k
The Art of Programming - Codeland 2020
erikaheidi
53
13k
What's in a price? How to price your products and services
michaelherold
245
12k
Git: the NoSQL Database
bkeepers
PRO
429
65k
How GitHub (no longer) Works
holman
314
140k
The Straight Up "How To Draw Better" Workshop
denniskardys
232
140k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.4k
Transcript
按一下以編輯母片標題樣式 按一下以編輯母片子標題樣式 Vue.js : The Bad Parts Kuro Hsu
按一下以編輯母片標題樣式 按一下以編輯母片子標題樣式 我是 Kuro Hsu Frontend Developer Vue.js Taiwan 社群主辦人
Find me at
[email protected]
@kurotanshi
工商宣傳 – book.vue.tw
社群宣傳 – vue.tw
今天不 PK 。
Vue,我⼀定判你有罪!
Vue.js: The Bad Parts ? - 狀態管理與畫面的「不」同步 - 糟糕的效能 -
混亂的模板與語法 - 邏輯與程式碼難以管理、複用
混亂的模板與語法? • 實體的全域污染
混亂的模板與語法? • 到處都是 this • 我能用 arrow function 嗎? •
是不是使用 Vue.js 就不能享 受最新的 ES6 語法?
混亂的模板與語法? • 組件必須是單一根節點
混亂的模板與語法? • 組件必須是單一根節點
混亂的模板與語法? • Component 的事件管理 • v-on:事件名稱 • $on(事件名稱) • 事件來源難以掌控
混亂的模板與語法? • Async Hooks ? 不好意思,你得自己包 Promise。
狀態與畫面的「不」同步: Reactivity • Vue.js 最著名的大坑
狀態與畫面的「不」同步: Reactivity • 狀態更新時,無需跑迴圈逐 一檢查,先前複寫的 set 會 主動通知 • 物件狀態越複雜,成本越高
• 最大的問題是…
狀態與畫面的「不」同步: Reactivity Vue.js 2.x 透過 Object.defineProperty() 複寫 get 與 set
⽅法
狀態與畫面的「不」同步: Reactivity Name “Kuro” age “34” country “Taiwan” get set
get set get set
狀態與畫面的「不」同步: Reactivity
狀態與畫面的「不」同步: Reactivity
狀態與畫面的「不」同步: Reactivity • Object.defineProperty() 的先天限制 • 直接修改 data 某個陣列內容 •
直接刪除某個 data 內的物件屬性 • 直接新增某個 data 內的物件屬性 • 以上 Object.defineProperty() 都追蹤不到。 • 必須使用 vue.$set() 強制寫入更新。
糟糕的效能?
Functional Component • Render function • functional (stateless) component •
functional: true • <template functional> • 透過 Object.freeze 鎖定 data
Functional Component
Functional Component
邏輯與程式碼的複用 • extends • mixins
Mixins 的困境 • 狀態來源不明確 • 各種命名衝突 • 當專案規模擴大,複雜度增加 重構難度
Mixins 的困境 https://reactjs.org/blog/2016/07/13/mixins-considered-harmful.html
問題這麼多,看來是時候跟 Vue 說再見了?
先不要。
Vue.js 3.0 is Here!
Vue 3.0 於 2020/09/19 正式發佈
混亂的模板與語法? • 改由 createApp 建立實體,不再有全域污染的問題
混亂的模板與語法? • 組件必須是單一根節點 • Vue 3.0 的 Fragments 特性打破了過去的規定
• <suspense> Async Setup / Hooks App.vue UserProfile.vue (setup style)
UserProfile.vue (op6ons style)
父子組件間的狀態傳遞 • 同樣是 props in, event out. • Vue 3.0
新增 <component> with v-model
Reactivity in Vue 3 • Change Detection Caveats • Object.defineProperty()
➡ Proxy API • 沒有 Vue 2.x 提到的那些問題 • 唯一缺點是 IE 11 不支援 • 整體來說 Z > B
Reactivity in Vue 3 Object Proxy get (target, key) {
return .... } set (target, key, value) { return .... } console.log(proxy.name) proxy.name = “Kuro”
Proxy API
Reactivity in Vue 3
Reactivity in Vue 3
Functional Component in Vue 3 Reference: https://v3.vuejs.org/guide/migration/functional-components.html#overview
模板編譯:靜態節點優化 h9ps://bit.ly/3cpwGOt
模板編譯:靜態節點優化 https://bit.ly/3cpwGOt
模板編譯:靜態節點優化 • 模板內容改由動態指令 ( v-if / v-for / slot) 來切分為獨立的區塊
• 每個動態的節點內容、位置是固定的 • Virtual DOM 更新時只需要遍歷動態的節點, 更新效率與實際 DOM 數量脫鉤,減少不必要的效能浪費 • 與 Vue 2.x 效能相比可提升 2-5 倍
Functional Component in Vue 3 • Render function • functional
(stateless) component • functional: true • <template functional>
混亂的模板與語法? • Component 的事件管理 • $on(事件名稱) • v-on:事件名稱 • Vue
自 3.0 起取消了 $on / $once / $off
混亂的模板與語法? • 組件資料 / 狀態的管理 • this 與 箭頭函式 •
程式碼與邏輯的管理與複用
混亂的模板與語法? • 組件資料 / 狀態的管理 • this 與 箭頭函式 •
程式碼與邏輯的管理與複用 •共同解藥: Compositions API
Compositions API • 並非為了取代現有的 Options style • 為了解決大型應用的痛點 (狀態、邏輯管理、複用) •
狀態來源清晰、無 namespace 的衝突 • 沒有 「this」 • 開發彈性大、效能佳 • 易於切分管理,語法類似 React Hooks.
傳統做法 • 狀態、邏輯、事件,與方法等, 散落在 component 各處。
Compositions API composition/Mouse.js
None
setup 語法糖
Vue.js: The Bad Parts ? - 狀態管理與畫面的「不」同步 - 糟糕的效能 -
混亂的模板與語法 - 邏輯與程式碼難以管理、複用
Vue.js 3.0: The Good Parts ! - 狀態與畫面不再各說各話 - 更小的檔案、更快的效能
- 清晰的模板與語法 - 邏輯、程式碼的管理複用更方便
And … - Vue.js 2.7 (LTS version / 2021 Q1)
- Vue Developer Experience (@vuedx) - Vite - next …?
https://www.youtube.com/watch?v=Vp5ANvd88x0
按一下以編輯母片標題樣式 按一下以編輯母片子標題樣式