Vue Dev Map - daniel-qa/Vue GitHub Wiki

Vue + JavaScript 開發 Map

vue map 分類原則

0. 網站功能設計階段

1. 語言基礎

• 變數與作用域

  • var / let / const (ES6)
  • 區塊作用域 vs 函式作用域

• 資料型別

  • 基本型別 (string, number, boolean, null, undefined, symbol, bigint)

• 物件 / 陣列

  • 物件屬性存取 → Vue props 綁定時常用

  • Array 數據操作

  • Object數據操作

• 運算子

  • 算術、比較、邏輯
  • 展開運算子 ... → 常用於 Vue props 傳遞、合併物件
  • 三元運算子 → Vue :class、:style 常搭配

---

2. 函式與結構 (邏輯核心)

• 函式

  • 傳統函式 vs 箭頭函式 ()=>{}
  • 剩餘參數 (...args) / 展開運算子
  • 回呼函式 (callback) → Vue 事件回調

• 解構賦值

  • 陣列解構 → const [a, b] = arr
  • 物件解構 → const { name } = obj
  • Vue 常見場景：從 props 或 store 解構資料

---

3. 非同步處理

• Promise

• async / await

• Vue 常見場景

  • API 請求 (axios)
  • 組件初始化 onMounted(async ()=>{})

---

4. 模組化

• ES Modules

  • import / export (ES6)

• Vue 常見場景

  • 匯入組件、工具函式
  • Vue Router 設定

---

5. 物件導向 & 擴充

• Class (ES6)

• 原型 / 繼承

• Vue 常見場景

  • 建立服務物件 (API Adapter, Data Model)
  • 封裝可重用邏輯 (class + Vue composition API)

---

6. Vue 特化整合

• 狀態管理 (Vuex)

• $refs 取得元件高度

• $nextTick

• 強制刷新

  • 使用 :key 重新掛載組件

  • this.$forceUpdate() // Vue 2 / Vue 3 Options API 可用

• 響應式 (Reactivity)

  • this.$set / Vue.set → 新增屬性保持響應式
  • ref / reactive / computed / watch (Vue 3 API)
  • 對應 JS 概念：物件/陣列的淺拷貝 vs 深拷貝

• 條件與迴圈渲染

  • Vue: v-if / v-for
  • JS: filter / map / for...of

• 事件處理

  • Vue: @click / @input
  • JS: 函式、事件物件 (event.target.value)

• 樣式綁定

  • Vue: :class / :style
  • JS: 三元運算子、展開運算子

• 全局 / 原型方法

  • Vue 2: Vue.prototype.$xxx → 子組件使用 this.$xxx
  • Vue 3: app.config.globalProperties.$xxx / provide/inject → 全局可訪問
  • 用途：跨組件共用資料或方法、注入工具函式、配置物件

• 除錯與開發輔助工具

---

7 . 樣式與 UI 控制 (CSS / Vue 整合)