Vue.js: The bad parts. ／ Kuro Hsu（許國政）

大神#Kuro Hsu簡報支援

共筆從這開始

混亂的模板與語法

• 到處都是 this
• 我能用 arrow function 嗎?
• 是不是使用Vue.js 就不能享受最新的ES6語法?
• 組件必須是單一根節點
  即使用兩個組件包起來，vue還是會偷偷多生一個div出來
• Component的事件管理
  • v-on:事件名稱
  • $on(事件名稱)
  • 事件來源難以掌控
• Async Hooks?
  不好意思・你得自己包Promise

狀態管理與畫面的「不」同步:Reactivity

• MVVM 框架
• 物件狀態越複雜，花費的成本越高(set)
• 狀態更新時，無需跑迴圈逐一檢查，先前複寫的 set 會主動通知
• 物件狀態越複雜，成本越高
• 最大的問題是…
• Object.defineProperty() 的先天限制
  • 直接修改 data 某個陣列內容
  • 直接刪除某個 data 內的物件屬性
  • 直接新增某個 data 內的物件屬性
• 以上 Object.defineProperty() 都追蹤不到
• 必須使用 vue.$set() 強制寫入更新

糟糕的效能

解方

• Render function
• functional (stateless) component
  • functional: true
  • <template functional>
• 透過Object.freeze鎖定 data
• 一般 component vs functional component 比較

邏輯與程式碼難以管理、複用

• 邏輯與程式碼的複用
  • extends
  • mixins
• Mixins的困境
  • 狀態來源不明確
  • 各種Method命名衝突：在不同Mixins會有同樣名稱的可能
  • 當專案規模擴大，複雜度增加重構難度

Vue 3.0

混亂的模板與語法？

• 改由createApp建立實體,不再有全域污染的問題
• 組件必須是單一根節點
• Vue 3.0 的 Fragments 特性打破了過去的
• 父子組件間的狀態傳遞
  • 同樣是 props in, event out.
  • Vue 3.0 新増 <component> with v-model

Reactivity in Vue 3

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

模板編譯：靜態節點優化

• 模板內容改由動態指令 ( 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
  • <template functional>

混亂的模板與語法?

• Component 的事件管理
  • $on(事件名稱)
  • v-on:事件名稱
  • Vue 自 3.0 起取消了 $on / $once / $off
• 組件資料 / 狀態的管理
• this 與 箭頭函式
• 程式碼與邏輯的管理與複用
  -> 共同解藥： Compositions API

Compositions API

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

https://composition-api.vuejs.org/

Vue.js v.s. Vue.js 3.0

Vue.js生態圈

• Vite
• Vuejs 2.7 (LTS version / 2021 Q1)
• Vue Developer Experience (@vuedx)
• next …?

Vue's Mission:
Be a framework that grows with the user

tags: MW20 框架與應用 Vue.js