# Preface

## Vue.js

## Roadmap

下圖為我的 Learning Roadmap，或者你可以參考這張圖：[Web Developer Roadmap]。
+ 六邊形：框架或工具
+ 矩形：技術或概念
+ 圓形：階段的起點與終點

%%{init:{"theme":"forest","flowchart":{"curve":"basis"}}}%%
flowchart LR
    JS((("JS")))
    npm/...{{"npm/..."}}
    Vue((("Vue")))
    .((" "))

    JS --> JS-OOP & DOM & AJAX & npm/...
    JS-OOP --> JS-metaprogramming --> Reflex-API --> Proxy-API --> Vue
    DOM --> event --> Vue
    AJAX --> Promise-API --> Vue
    npm/... --> Vue
    Vue --> .

%%{init:{"theme":"forest","flowchart":{"curve":"basis"}}}%%
flowchart LR
    Vue((("Vue")))
    Webpack/...{{"Webpack/..."}}
    ESLint/...{{"ESLint/..."}}
    Vue-CLI{{"Vue-CLI"}}
    Vue-Router{{"Vue-Router"}}
    Vite{{Vite}}
    Vitest{{"Vitest"}}
    Pinia{{"Pinia"}}
    VueUse{{"VueUse"}}
    VueTS[Vue<br />#40;with TS#41;]
    Nuxt((("Nuxt")))
    .((" "))

    Vue --> Vue-Router
    Vue --> Vue-CLI --> Vite
    Webpack/... & ESLint/... --> Vue-CLI
    Vue-Router & Vite & TypeScript --> VueTS
    VueTS --> Vitest & Pinia & VueUse
    composables --> VueUse
    VueUse --> Nuxt
    Nuxt --> .

## Composition API
#### Q：[為啥要學 Composition API？][Why Composition API]
#### A：請聽我解釋...
+ Options API
+ 所有元件用到的資料和方法都和元件本身綁成一塊 (❌ tight coupling)
+ Composition API
+ 資料和方法有機會抽離元件做成 [composables](/@RogelioKG/vueuse#Composables) (✅ loose coupling)
+ 這<mark>給了你一個絕佳的機會，去 refactor 你的程式碼</mark>

#### Q：欸？可是我覺得 Options API 的 `mixins` 也很好用阿

#### A：請聽我解釋...
+ Options API
+ 混入是固定的 (無法接受 args)、混入變數名稱是可能會衝突的
+ Composition API
+ 皆可避免以上問題，這就是<mark>天生優勢</mark>
+ 🎬 [Alexander Lichter - Organize your Composition API code](https://youtu.be/iKaDFAxzJyw)


## TypeScript

#### [Q：為啥要學 TypeScript？][Why TypeScript]

#### A：請聽我解釋...
+ 商業邏輯最容易變動 ->\
變動 (change) 通常意味著重構 (refactor) ->\
重構意味著你要動以前寫的代碼 ->\
在 JS 一不小心就可能會改壞\
(在 TS 中，你的改動會自動做型別檢查，改壞時 ESLint 是會提醒你的，而不會默不作聲)

#### A：But... f you, TypeScript

+ 我原本以為 C++ 的 [SFINAE] 已經是泛型的極致了。
直到 TypeScript 的出現，再度顛覆我的想像 ...


[SFINAE]: https://home.gamer.com.tw/creationDetail.php?sn=5658758
[Web Developer Roadmap]: https://github.com/goodjack/developer-roadmap-chinese
[Why Composition API]: https://youtu.be/nhKCRYJQO_4?t=1040&si=czckhRRYePaqHsx5
[Why TypeScript]: https://youtu.be/nhKCRYJQO_4?si=52Jg1GF0UjVbetZB&t=498