Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

Kuro Hsu
September 20, 2020

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

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

Kuro Hsu

September 20, 2020
Tweet

More Decks by Kuro Hsu

Other Decks in Technology

Transcript

  1. 按一下以編輯母片標題樣式
    按一下以編輯母片子標題樣式
    Vue.js :
    The Bad Parts
    Kuro Hsu

    View full-size slide

  2. 按一下以編輯母片標題樣式
    按一下以編輯母片子標題樣式
    我是
    Kuro Hsu
    Frontend Developer
    Vue.js Taiwan 社群主辦人
    Find me at
    [email protected]
    @kurotanshi

    View full-size slide

  3. 工商宣傳 – book.vue.tw

    View full-size slide

  4. 社群宣傳 – vue.tw

    View full-size slide

  5. 今天不 PK 。

    View full-size slide

  6. Vue,我⼀定判你有罪!

    View full-size slide

  7. Vue.js: The Bad Parts ?
    - 狀態管理與畫面的「不」同步
    - 糟糕的效能
    - 混亂的模板與語法
    - 邏輯與程式碼難以管理、複用

    View full-size slide

  8. 混亂的模板與語法?
    • 實體的全域污染

    View full-size slide

  9. 混亂的模板與語法?
    • 到處都是 this
    • 我能用 arrow function 嗎?
    • 是不是使用 Vue.js 就不能享
    受最新的 ES6 語法?


    View full-size slide

  10. 混亂的模板與語法?
    • 組件必須是單一根節點

    View full-size slide

  11. 混亂的模板與語法?
    • 組件必須是單一根節點

    View full-size slide

  12. 混亂的模板與語法?
    • Component 的事件管理
    • v-on:事件名稱
    • $on(事件名稱)
    • 事件來源難以掌控

    View full-size slide

  13. 混亂的模板與語法?
    • Async Hooks ? 不好意思,你得自己包 Promise。

    View full-size slide

  14. 狀態與畫面的「不」同步: Reactivity
    • Vue.js 最著名的大坑

    View full-size slide

  15. 狀態與畫面的「不」同步: Reactivity
    • 狀態更新時,無需跑迴圈逐
    一檢查,先前複寫的 set 會
    主動通知
    • 物件狀態越複雜,成本越高
    • 最大的問題是…

    View full-size slide

  16. 狀態與畫面的「不」同步: Reactivity
    Vue.js 2.x 透過
    Object.defineProperty()
    複寫 get 與 set ⽅法

    View full-size slide

  17. 狀態與畫面的「不」同步: Reactivity
    Name “Kuro”
    age “34”
    country “Taiwan”
    get
    set
    get
    set
    get
    set

    View full-size slide

  18. 狀態與畫面的「不」同步: Reactivity

    View full-size slide

  19. 狀態與畫面的「不」同步: Reactivity

    View full-size slide

  20. 狀態與畫面的「不」同步: Reactivity
    • Object.defineProperty() 的先天限制
    • 直接修改 data 某個陣列內容
    • 直接刪除某個 data 內的物件屬性
    • 直接新增某個 data 內的物件屬性
    • 以上 Object.defineProperty() 都追蹤不到。
    • 必須使用 vue.$set() 強制寫入更新。

    View full-size slide

  21. 糟糕的效能?

    View full-size slide

  22. Functional Component
    • Render function
    • functional (stateless) component
    • functional: true

    • 透過 Object.freeze 鎖定 data

    View full-size slide

  23. Functional Component

    View full-size slide

  24. Functional Component

    View full-size slide

  25. 邏輯與程式碼的複用
    • extends
    • mixins

    View full-size slide

  26. Mixins 的困境
    • 狀態來源不明確
    • 各種命名衝突
    • 當專案規模擴大,複雜度增加
    重構難度

    View full-size slide

  27. Mixins 的困境
    https://reactjs.org/blog/2016/07/13/mixins-considered-harmful.html

    View full-size slide

  28. 問題這麼多,看來是時候跟 Vue 說再見了?

    View full-size slide

  29. 先不要。

    View full-size slide

  30. Vue.js 3.0 is Here!

    View full-size slide

  31. Vue 3.0 於 2020/09/19 正式發佈

    View full-size slide

  32. 混亂的模板與語法?
    • 改由 createApp 建立實體,不再有全域污染的問題

    View full-size slide

  33. 混亂的模板與語法?
    • 組件必須是單一根節點
    • Vue 3.0 的 Fragments 特性打破了過去的規定

    View full-size slide


  34. Async Setup / Hooks
    App.vue
    UserProfile.vue (setup style)
    UserProfile.vue (op6ons style)

    View full-size slide

  35. 父子組件間的狀態傳遞
    • 同樣是 props in, event out.
    • Vue 3.0 新增 with v-model

    View full-size slide

  36. Reactivity in Vue 3
    • Change Detection Caveats
    • Object.defineProperty() ➡ Proxy API
    • 沒有 Vue 2.x 提到的那些問題
    • 唯一缺點是 IE 11 不支援
    • 整體來說 Z > B

    View full-size slide

  37. Reactivity in Vue 3
    Object
    Proxy
    get (target, key) {
    return ....
    }
    set (target, key, value) {
    return ....
    }
    console.log(proxy.name)
    proxy.name = “Kuro”

    View full-size slide

  38. Reactivity in Vue 3

    View full-size slide

  39. Reactivity in Vue 3

    View full-size slide

  40. Functional Component in Vue 3
    Reference: https://v3.vuejs.org/guide/migration/functional-components.html#overview

    View full-size slide

  41. 模板編譯:靜態節點優化
    h9ps://bit.ly/3cpwGOt

    View full-size slide

  42. 模板編譯:靜態節點優化
    https://bit.ly/3cpwGOt

    View full-size slide

  43. 模板編譯:靜態節點優化
    • 模板內容改由動態指令 ( v-if / v-for / slot) 來切分為獨立的區塊
    • 每個動態的節點內容、位置是固定的
    • Virtual DOM 更新時只需要遍歷動態的節點,
    更新效率與實際 DOM 數量脫鉤,減少不必要的效能浪費
    • 與 Vue 2.x 效能相比可提升 2-5 倍

    View full-size slide

  44. Functional Component in Vue 3
    • Render function
    • functional (stateless) component
    • functional: true

    View full-size slide

  45. 混亂的模板與語法?
    • Component 的事件管理
    • $on(事件名稱)
    • v-on:事件名稱
    • Vue 自 3.0 起取消了 $on / $once / $off

    View full-size slide

  46. 混亂的模板與語法?
    • 組件資料 / 狀態的管理
    • this 與 箭頭函式
    • 程式碼與邏輯的管理與複用

    View full-size slide

  47. 混亂的模板與語法?
    • 組件資料 / 狀態的管理
    • this 與 箭頭函式
    • 程式碼與邏輯的管理與複用
    •共同解藥: Compositions API

    View full-size slide

  48. Compositions API
    • 並非為了取代現有的 Options style
    • 為了解決大型應用的痛點 (狀態、邏輯管理、複用)
    • 狀態來源清晰、無 namespace 的衝突
    • 沒有 「this」
    • 開發彈性大、效能佳
    • 易於切分管理,語法類似 React Hooks.

    View full-size slide

  49. 傳統做法
    • 狀態、邏輯、事件,與方法等,
    散落在 component 各處。

    View full-size slide

  50. Compositions API
    composition/Mouse.js

    View full-size slide

  51. setup 語法糖

    View full-size slide

  52. Vue.js: The Bad Parts ?
    - 狀態管理與畫面的「不」同步
    - 糟糕的效能
    - 混亂的模板與語法
    - 邏輯與程式碼難以管理、複用

    View full-size slide

  53. Vue.js 3.0: The Good Parts !
    - 狀態與畫面不再各說各話
    - 更小的檔案、更快的效能
    - 清晰的模板與語法
    - 邏輯、程式碼的管理複用更方便

    View full-size slide

  54. And …
    - Vue.js 2.7 (LTS version / 2021 Q1)
    - Vue Developer Experience (@vuedx)
    - Vite
    - next …?

    View full-size slide

  55. https://www.youtube.com/watch?v=Vp5ANvd88x0

    View full-size slide

  56. 按一下以編輯母片標題樣式
    按一下以編輯母片子標題樣式

    View full-size slide