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
100
[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
710
[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
730
[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
速くて安いWebサイトを作る
nishiharatsubasa
10
12k
Culture Deck
optfit
0
420
CZII - CryoET Object Identification 参加振り返り・解法共有
tattaka
0
360
データ資産をシームレスに伝達するためのイベント駆動型アーキテクチャ
kakehashi
PRO
2
530
リアルタイム分析データベースで実現する SQLベースのオブザーバビリティ
mikimatsumoto
0
1.3k
滅・サービスクラス🔥 / Destruction Service Class
sinsoku
6
1.6k
2025-02-21 ゆるSRE勉強会 Enhancing SRE Using AI
yoshiiryo1
1
330
『衛星データ利用の方々にとって近いようで触れる機会のなさそうな小話 ~ 衛星搭載ソフトウェアと衛星運用ソフトウェア (実物) を動かしながらわいわいする編 ~』 @日本衛星データコミニティ勉強会
meltingrabbit
0
140
利用終了したドメイン名の最強終活〜観測環境を育てて、分析・供養している件〜 / The Ultimate End-of-Life Preparation for Discontinued Domain Names
nttcom
2
190
The Future of SEO: The Impact of AI on Search
badams
0
190
バックエンドエンジニアのためのフロントエンド入門 #devsumiC
panda_program
18
7.5k
SA Night #2 FinatextのSA思想/SA Night #2 Finatext session
satoshiimai
1
140
Featured
See All Featured
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.4k
How to Think Like a Performance Engineer
csswizardry
22
1.3k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
27
1.6k
Testing 201, or: Great Expectations
jmmastey
42
7.2k
A Tale of Four Properties
chriscoyier
158
23k
Build your cross-platform service in a week with App Engine
jlugia
229
18k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
49k
Designing for Performance
lara
604
68k
Producing Creativity
orderedlist
PRO
344
39k
Scaling GitHub
holman
459
140k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
32
2.1k
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
按一下以編輯母片標題樣式 按一下以編輯母片子標題樣式