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

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 kurotanshi@gmail.com @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.deﬁneProperty() 複寫 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) UserProﬁle.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 …?