Vue.js 發展至今也有數年的歷史,而今年最熱門的議題莫過於新釋出的 Vue 3.0。 在本場演講中,我將以社群傳教士的角度向大家分享 Vue.js 這些年來的發展,以及那些不太受歡迎的特性。
按一下以編輯母片標題樣式按一下以編輯母片子標題樣式Vue.js :The Bad PartsKuro Hsu
View Slide
按一下以編輯母片標題樣式按一下以編輯母片子標題樣式我是Kuro HsuFrontend DeveloperVue.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 會主動通知• 物件狀態越複雜,成本越高• 最大的問題是…
狀態與畫面的「不」同步: ReactivityVue.js 2.x 透過Object.defineProperty()複寫 get 與 set ⽅法
狀態與畫面的「不」同步: ReactivityName “Kuro”age “34”country “Taiwan”getsetgetsetgetset
狀態與畫面的「不」同步: Reactivity
狀態與畫面的「不」同步: Reactivity• Object.defineProperty() 的先天限制• 直接修改 data 某個陣列內容• 直接刪除某個 data 內的物件屬性• 直接新增某個 data 內的物件屬性• 以上 Object.defineProperty() 都追蹤不到。• 必須使用 vue.$set() 強制寫入更新。
糟糕的效能?
Functional Component• Render function• functional (stateless) component• functional: true• • 透過 Object.freeze 鎖定 data
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 特性打破了過去的規定
• Async Setup / HooksApp.vueUserProfile.vue (setup style)UserProfile.vue (op6ons style)
父子組件間的狀態傳遞• 同樣是 props in, event out.• Vue 3.0 新增 with v-model
Reactivity in Vue 3• Change Detection Caveats• Object.defineProperty() ➡ Proxy API• 沒有 Vue 2.x 提到的那些問題• 唯一缺點是 IE 11 不支援• 整體來說 Z > B
Reactivity in Vue 3ObjectProxyget (target, key) {return ....}set (target, key, value) {return ....}console.log(proxy.name)proxy.name = “Kuro”
Proxy API
Reactivity in Vue 3
Functional Component in Vue 3Reference: 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•
混亂的模板與語法?• Component 的事件管理• $on(事件名稱)• v-on:事件名稱• Vue 自 3.0 起取消了 $on / $once / $off
混亂的模板與語法?• 組件資料 / 狀態的管理• this 與 箭頭函式• 程式碼與邏輯的管理與複用
混亂的模板與語法?• 組件資料 / 狀態的管理• this 與 箭頭函式• 程式碼與邏輯的管理與複用•共同解藥: Compositions API
Compositions API• 並非為了取代現有的 Options style• 為了解決大型應用的痛點 (狀態、邏輯管理、複用)• 狀態來源清晰、無 namespace 的衝突• 沒有 「this」• 開發彈性大、效能佳• 易於切分管理,語法類似 React Hooks.
傳統做法• 狀態、邏輯、事件,與方法等,散落在 component 各處。
Compositions APIcomposition/Mouse.js
setup 語法糖
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
按一下以編輯母片標題樣式按一下以編輯母片子標題樣式