Vue Dev Map

Vue + JavaScript 開發 Map

1. 語言基礎

• 變數與作用域

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

• 資料型別

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

• 物件 / 陣列

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

  • Object數據操作

• 運算子

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

---

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

• 函式

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

• 解構賦值

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

---

3. 非同步處理

• Promise (ES6)

• async / await (ES2017)

• 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 特化整合

• $nextTick

• 強制刷新

  • 使用 :key 重新掛載組件

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

• 響應式 (Reactivity)

  • ref / reactive / computed / watch (Vue 3 API)
  • 對應 JS 概念：物件/陣列的淺拷貝 vs 深拷貝

Vue 2 限制與技巧

  Vue 2 對陣列內部物件屬性改變不敏感

  透過 [...array] 或 Vue.set 替換整個陣列 → 強制模板更新

  this.integratedQuotaService = [...this.integratedQuotaService]（淺拷貝產生新 reference）

• 條件與迴圈渲染

  • 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. 版本與演進 (標籤化歸納)

• ES6 (2015) → 現代 JS 的基礎 (let/const, 箭頭函式, class, Promise, 展開運算子)
• ES2017+ → async/await, Object.entries, Optional chaining (?.)
• 最新 (ES2024) → 正則新特性、陣列操作方法 (如 toSorted)