---
# System prepended metadata

title: Preface
tags: [Vue]

---

# Preface

## Vue.js
![vue.js](https://hackmd.io/_uploads/HkzhaqMGbg.png)

## Roadmap

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

```mermaid
%%{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 --> .
```

```mermaid
%%{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)

![Options API v.s. Composition API](https://i.imgur.com/qWZLCTt.png)

## TypeScript

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

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

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

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

  ![typescript-meme](https://hackmd.io/_uploads/B1WboX0QJe.jpg)
  ![typescript-error](https://i.redd.it/azexriykptv71.png)
  ![TL;DR](https://memeprod.ap-south-1.linodeobjects.com/user-template/cd41a3529a54f222ea5b5af0eb8c8902.png)

[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