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
95
[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
610
[.NET Conf 2020 Taiwan] 以輕前端視角進入 Vue 3.0 的世界
kurotanshi
0
700
[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
720
[COSCUP 2019] 前端工程師的養成之路與開源工具
kurotanshi
3
390
初探 Vue 3.0 Function API
kurotanshi
4
2.9k
VueJS Style Guide 導讀
kurotanshi
6
1.8k
[JSDC2017] 從 VueJS 看前端生態圈的發展變化
kurotanshi
9
2.2k
Other Decks in Technology
See All in Technology
LINEヤフーのフロントエンド組織・体制の紹介【24年12月】
lycorp_recruit_jp
0
530
10分で学ぶKubernetesコンテナセキュリティ/10min-k8s-container-sec
mochizuki875
3
330
非機能品質を作り込むための実践アーキテクチャ
knih
3
950
podman_update_2024-12
orimanabu
1
260
5分でわかるDuckDB
chanyou0311
10
3.2k
KnowledgeBaseDocuments APIでベクトルインデックス管理を自動化する
iidaxs
1
260
[Ruby] Develop a Morse Code Learning Gem & Beep from Strings
oguressive
1
150
Postman と API セキュリティ / Postman and API Security
yokawasa
0
200
Wantedly での Datadog 活用事例
bgpat
1
430
Oracle Cloudの生成AIサービスって実際どこまで使えるの? エンジニア目線で試してみた
minorun365
PRO
4
280
KubeCon NA 2024 Recap / Running WebAssembly (Wasm) Workloads Side-by-Side with Container Workloads
z63d
1
240
re:Invent をおうちで楽しんでみた ~CloudWatch のオブザーバビリティ機能がスゴい!/ Enjoyed AWS re:Invent from Home and CloudWatch Observability Feature is Amazing!
yuj1osm
0
120
Featured
See All Featured
Building Flexible Design Systems
yeseniaperezcruz
327
38k
Product Roadmaps are Hard
iamctodd
PRO
49
11k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
28
900
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
330
21k
GraphQLとの向き合い方2022年版
quramy
44
13k
How to train your dragon (web standard)
notwaldorf
88
5.7k
Site-Speed That Sticks
csswizardry
2
190
The Power of CSS Pseudo Elements
geoffreycrofte
73
5.4k
Facilitating Awesome Meetings
lara
50
6.1k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
29
2k
GitHub's CSS Performance
jonrohan
1030
460k
Visualization
eitanlees
146
15k
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
按一下以編輯母片標題樣式 按一下以編輯母片子標題樣式