Link
Embed
Share
Beginning
This slide
Copy link URL
Copy link URL
Copy iframe embed code
Copy iframe embed code
Copy javascript embed code
Copy javascript embed code
Share
Tweet
Share
Tweet
Slide 1
Slide 1 text
按一下以編輯母片標題樣式 按一下以編輯母片子標題樣式 Vue.js : The Bad Parts Kuro Hsu
Slide 2
Slide 2 text
按一下以編輯母片標題樣式 按一下以編輯母片子標題樣式 我是 Kuro Hsu Frontend Developer Vue.js Taiwan 社群主辦人 Find me at
[email protected]
@kurotanshi
Slide 3
Slide 3 text
工商宣傳 – book.vue.tw
Slide 4
Slide 4 text
社群宣傳 – vue.tw
Slide 5
Slide 5 text
今天不 PK 。
Slide 6
Slide 6 text
Vue,我⼀定判你有罪!
Slide 7
Slide 7 text
Vue.js: The Bad Parts ? - 狀態管理與畫面的「不」同步 - 糟糕的效能 - 混亂的模板與語法 - 邏輯與程式碼難以管理、複用
Slide 8
Slide 8 text
混亂的模板與語法? • 實體的全域污染
Slide 9
Slide 9 text
混亂的模板與語法? • 到處都是 this • 我能用 arrow function 嗎? • 是不是使用 Vue.js 就不能享 受最新的 ES6 語法?
Slide 10
Slide 10 text
混亂的模板與語法? • 組件必須是單一根節點
Slide 11
Slide 11 text
混亂的模板與語法? • 組件必須是單一根節點
Slide 12
Slide 12 text
混亂的模板與語法? • Component 的事件管理 • v-on:事件名稱 • $on(事件名稱) • 事件來源難以掌控
Slide 13
Slide 13 text
混亂的模板與語法? • Async Hooks ? 不好意思,你得自己包 Promise。
Slide 14
Slide 14 text
狀態與畫面的「不」同步: Reactivity • Vue.js 最著名的大坑
Slide 15
Slide 15 text
狀態與畫面的「不」同步: Reactivity • 狀態更新時,無需跑迴圈逐 一檢查,先前複寫的 set 會 主動通知 • 物件狀態越複雜,成本越高 • 最大的問題是…
Slide 16
Slide 16 text
狀態與畫面的「不」同步: Reactivity Vue.js 2.x 透過 Object.defineProperty() 複寫 get 與 set ⽅法
Slide 17
Slide 17 text
狀態與畫面的「不」同步: Reactivity Name “Kuro” age “34” country “Taiwan” get set get set get set
Slide 18
Slide 18 text
狀態與畫面的「不」同步: Reactivity
Slide 19
Slide 19 text
狀態與畫面的「不」同步: Reactivity
Slide 20
Slide 20 text
狀態與畫面的「不」同步: Reactivity • Object.defineProperty() 的先天限制 • 直接修改 data 某個陣列內容 • 直接刪除某個 data 內的物件屬性 • 直接新增某個 data 內的物件屬性 • 以上 Object.defineProperty() 都追蹤不到。 • 必須使用 vue.$set() 強制寫入更新。
Slide 21
Slide 21 text
糟糕的效能?
Slide 22
Slide 22 text
Functional Component • Render function • functional (stateless) component • functional: true • • 透過 Object.freeze 鎖定 data
Slide 23
Slide 23 text
Functional Component
Slide 24
Slide 24 text
Functional Component
Slide 25
Slide 25 text
邏輯與程式碼的複用 • extends • mixins
Slide 26
Slide 26 text
Mixins 的困境 • 狀態來源不明確 • 各種命名衝突 • 當專案規模擴大,複雜度增加 重構難度
Slide 27
Slide 27 text
Mixins 的困境 https://reactjs.org/blog/2016/07/13/mixins-considered-harmful.html
Slide 28
Slide 28 text
問題這麼多,看來是時候跟 Vue 說再見了?
Slide 29
Slide 29 text
先不要。
Slide 30
Slide 30 text
Vue.js 3.0 is Here!
Slide 31
Slide 31 text
Vue 3.0 於 2020/09/19 正式發佈
Slide 32
Slide 32 text
混亂的模板與語法? • 改由 createApp 建立實體,不再有全域污染的問題
Slide 33
Slide 33 text
混亂的模板與語法? • 組件必須是單一根節點 • Vue 3.0 的 Fragments 特性打破了過去的規定
Slide 34
Slide 34 text
• Async Setup / Hooks App.vue UserProfile.vue (setup style) UserProfile.vue (op6ons style)
Slide 35
Slide 35 text
父子組件間的狀態傳遞 • 同樣是 props in, event out. • Vue 3.0 新增 with v-model
Slide 36
Slide 36 text
Reactivity in Vue 3 • Change Detection Caveats • Object.defineProperty() ➡ Proxy API • 沒有 Vue 2.x 提到的那些問題 • 唯一缺點是 IE 11 不支援 • 整體來說 Z > B
Slide 37
Slide 37 text
Reactivity in Vue 3 Object Proxy get (target, key) { return .... } set (target, key, value) { return .... } console.log(proxy.name) proxy.name = “Kuro”
Slide 38
Slide 38 text
Proxy API
Slide 39
Slide 39 text
Reactivity in Vue 3
Slide 40
Slide 40 text
Reactivity in Vue 3
Slide 41
Slide 41 text
Functional Component in Vue 3 Reference: https://v3.vuejs.org/guide/migration/functional-components.html#overview
Slide 42
Slide 42 text
模板編譯:靜態節點優化 h9ps://bit.ly/3cpwGOt
Slide 43
Slide 43 text
模板編譯:靜態節點優化 https://bit.ly/3cpwGOt
Slide 44
Slide 44 text
模板編譯:靜態節點優化 • 模板內容改由動態指令 ( v-if / v-for / slot) 來切分為獨立的區塊 • 每個動態的節點內容、位置是固定的 • Virtual DOM 更新時只需要遍歷動態的節點, 更新效率與實際 DOM 數量脫鉤,減少不必要的效能浪費 • 與 Vue 2.x 效能相比可提升 2-5 倍
Slide 45
Slide 45 text
Functional Component in Vue 3 • Render function • functional (stateless) component • functional: true •
Slide 46
Slide 46 text
混亂的模板與語法? • Component 的事件管理 • $on(事件名稱) • v-on:事件名稱 • Vue 自 3.0 起取消了 $on / $once / $off
Slide 47
Slide 47 text
混亂的模板與語法? • 組件資料 / 狀態的管理 • this 與 箭頭函式 • 程式碼與邏輯的管理與複用
Slide 48
Slide 48 text
混亂的模板與語法? • 組件資料 / 狀態的管理 • this 與 箭頭函式 • 程式碼與邏輯的管理與複用 •共同解藥: Compositions API
Slide 49
Slide 49 text
Compositions API • 並非為了取代現有的 Options style • 為了解決大型應用的痛點 (狀態、邏輯管理、複用) • 狀態來源清晰、無 namespace 的衝突 • 沒有 「this」 • 開發彈性大、效能佳 • 易於切分管理,語法類似 React Hooks.
Slide 50
Slide 50 text
傳統做法 • 狀態、邏輯、事件,與方法等, 散落在 component 各處。
Slide 51
Slide 51 text
Compositions API composition/Mouse.js
Slide 52
Slide 52 text
No content
Slide 53
Slide 53 text
setup 語法糖
Slide 54
Slide 54 text
Vue.js: The Bad Parts ? - 狀態管理與畫面的「不」同步 - 糟糕的效能 - 混亂的模板與語法 - 邏輯與程式碼難以管理、複用
Slide 55
Slide 55 text
Vue.js 3.0: The Good Parts ! - 狀態與畫面不再各說各話 - 更小的檔案、更快的效能 - 清晰的模板與語法 - 邏輯、程式碼的管理複用更方便
Slide 56
Slide 56 text
And … - Vue.js 2.7 (LTS version / 2021 Q1) - Vue Developer Experience (@vuedx) - Vite - next …?
Slide 57
Slide 57 text
https://www.youtube.com/watch?v=Vp5ANvd88x0
Slide 58
Slide 58 text
按一下以編輯母片標題樣式 按一下以編輯母片子標題樣式