Vue Dev Map - daniel-qa/Vue GitHub Wiki

• 變數與作用域

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

• 資料型別

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

  • String (字串) 進階處理

  • • Unicode 支援與轉義序列

• 物件 / 陣列

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

  • Array 數據操作

  • Object數據操作

• 運算子

  • 邏輯運算子

  • 算術、比較、邏輯

  • 展開運算子 ... → 常用於 Vue props 傳遞、合併物件

  • 三元運算子 → Vue :class、:style 常搭配

運算子 (Operators)
    ├─ 算術運算子 (+ - * / %)
    ├─ 比較運算子 (== === != > <)
    ├─ 邏輯運算子 (! && ||)
    ├─ 位元運算子 (& | ^ << >>)
    ├─ 條件運算子 (?: 三元運算子)
    ├─ 展開 / 剩餘運算子 (...spread / ...rest)
    └─ 型別轉換運算子技巧 (!!, +value, Boolean(value))

• 函式

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

• 解構賦值

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

• Promise

• async / await

• Vue 常見場景

  • 串接後端API

  • API 請求 (axios)

  • 組件初始化 onMounted(async ()=>{})

• ES Modules

  • import / export (ES6)

• Vue 常見場景

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

• Class (ES6)

• 原型 / 繼承

• Vue 常見場景

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

• 父子元件通訊（Props down / Events up）

  $emit

• 狀態管理 (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 → 全局可訪問
  • 用途：跨組件共用資料或方法、注入工具函式、配置物件

• 除錯與開發輔助工具

• Web Layout (網頁排版)

• Responsive Web Design（RWD）

• Flexbox

Flexbox (彈性盒子) 用於網頁排版佈局

• 拖曳/排序元件

Vue.Draggable

• DOM 與編輯器底層 API

• DOM API

• Selection API

• Range API

• contenteditable

• Text Node

• MutationObserver

• DOM 事件模型

• 事件冒泡（Event Bubbling）

• 事件捕獲（Event Capturing）

• 預設行為攔截（e.preventDefault()）

• 事件委託（Event Delegation）

• 瀏覽器存儲

• LocalStorage

• Cookie

• 渲染原理

• 為什麼需要 this.$nextTick