[ModernWeb'20] Vue.js : The Bad Parts

Vue.js 發展至今也有數年的歷史，而今年最熱門的議題莫過於新釋出的 Vue 3.0。 在本場演講中，我將以社群傳教士的角度向大家分享 Vue.js 這些年來的發展，以及那些不太受歡迎的特性。

Transcript

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