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

{%hackmd @ModernWeb/HkqZxb98v %}

### [大神#Kuro Hsu簡報支援](https://s.itho.me/modernweb/2020/Slides/d204.pdf)
>共筆從這開始

### 混亂的模板與語法
* 到處都是 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 比較](https://kuro.tw/vue-functional-demo/index.html)

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

# [Vue 3.0](https://github.com/vuejs/vue-next/releases/tag/v3.0.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: The Bad Parts ? | Vue.js 3.0：The Good Parts！ |
| -------- | -------- |
| 狀態管理與畫面的「不」同步 | 清晰的模板與語法 |
| 糟糕的效能 | 狀態與畫面不再各說各話 |
| 混亂的模板與語法 | 更小的檔案、更快的效能 |
| 邏輯與程式碼難以管理、複用 | 邏輯、程式碼的管理複用更方便 |

### 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`