Vue 面試題從資淺到資深
Vue 面試題不該只是背 API 名詞。真正有鑑別度的題目，通常會沿著「會不會用」、「知不知道為什麼」、「能不能做取捨」一路往上問。
本專題會用工程師成長路線整理 Vue 面試核心題：資淺重在觀念與手感，中階重在元件與狀態設計，高階重在效能與底層機制，資深則看架構判斷、團隊協作與技術選型。
學習路徑圖
章節清單
第一階段：資淺基礎 (Junior)
確認是否真正理解 Vue 的日常開發語言，而不是只會照著範例改。
- Vue 核心觀念：MVVM、宣告式渲染與單向資料流 - Vue 解決了什麼問題，以及和原生 DOM 操作的差異。
- Vue 組件的 data 為什麼必須是函數 - 元件實例、狀態隔離、引用共享、Options API 與 Composition API 的差異。
- v-model 雙向綁定的原理 - 表單元素、元件語法糖、
modelValue、多個v-model與修飾符。 - v-if 與 v-show 的區別 - 條件渲染、顯示切換、初始成本、切換成本、生命週期與適用場景。
- Vue 修飾符有哪些 - 事件修飾符、鍵盤修飾符、滑鼠修飾符、表單修飾符、v-bind 修飾符與自訂 v-model modifiers。
- Vue 中 key 的作用 - VNode 身份、列表 Diff、DOM/元件復用、狀態錯位、強制重建與 index key 陷阱。
- Template 與常用指令面試題 -
v-if、v-show、v-for、key、事件修飾符與條件渲染陷阱。 - Vue computed 的實現原理 - lazy 求值、依賴收集、快取、dirty 標記、可寫 computed 與 watch 對比。
- watch 與 computed 的區別 - 衍生狀態、副作用、快取、lazy、flush 時機、watchEffect 與選型判斷。
- Vue 中 ref 的作用 - 響應式 ref、
.value、模板 ref、DOM/子元件引用、ref 解包與 reactive 對比。 - nextTick 的作用與實現原理 - DOM 批次更新、微任務、更新佇列、使用時機與常見誤區。
- 接口請求一般放在哪個生命週期？為什麼？ -
onMounted、setup、路由參數監聽、onServerPrefetch、取消請求、Loading/Error 與 SSR 差異。
第二階段：中階應用 (Mid-Level)
面試官開始觀察你能不能把功能拆乾淨，讓狀態、資料流與元件邊界維持穩定。
- Composition API 實戰與 Composable 設計 -
setup、script setup、ref/reactive、Composable 抽取、邏輯復用與可讀性取捨。 - Vue 元件通訊方式有哪些及原理 - Props、Emit、
v-model、Provide/Inject、Refs、Event Bus、Pinia 與 Slots。 - Vue 狀態管理：Pinia、Vuex 與狀態歸屬 - local state、Composable、URL state、Pinia、Vuex、store 拆分、持久化與 SSR 狀態隔離。
- Vue 插槽設計：Slot、Scoped Slot 與 Headless Component - 預設插槽、具名插槽、作用域插槽、受控元件、Renderless / Headless Component 與元件 API 設計。
- Vue 表單、非同步狀態與資料流設計 - 受控表單、表單驗證、Loading/Error/Cancel/Retry、錯誤回填、樂觀更新與資料流取捨。
- Vue 與 TypeScript 實戰 -
defineProps、defineEmits、defineModel、Template Ref、Composable 泛型、API response、Pinia 與 Slot 型別。 - Vue 復用手段選型：Composable、Directive、Plugin、Mixin - Composable、自訂指令、Plugin、Mixin、Provide/Inject、Global Properties 的適用場景與取捨。
- Vue 路由實現：Hash 路由與 History 路由原理 - 前端路由、Hash 模式、History API、
router-link、router-view與伺服器配置。
第三階段：高階實戰 (Senior-Ready)
這一段會從「能寫出來」轉向「能解釋代價」，包含效能、緩存、DOM 結構與底層機制。
- Vue 性能優化總覽 - 建立量測、定位瓶頸、分層優化、驗證結果與方案取捨的完整回答框架。
- Vue 渲染性能優化 - 更新範圍、列表渲染、
v-if/v-show、v-memo、事件代理與 DOM 讀寫分離。 - Vue 響應式性能優化 - 深層響應式成本、
shallowRef、shallowReactive、markRaw、deep watch、computed/watch 與狀態拆分。 - Vue 打包與資源優化 - 分包、路由懶載入、Tree Shaking、第三方依賴、CDN、gzip/brotli、快取與 source map。
- Vue 請求、快取與體驗優化 - API 並行、取消請求、請求去重、前端快取、預取、骨架屏、樂觀更新與 PWA。
- Vue SPA 如何優化首屏載入速度 - 性能指標、路由懶載入、分包、資源壓縮、資料請求、骨架屏、快取、SSR/SSG。
- Vue 權限與路由守衛設計 - 登入攔截、route meta、動態路由、RBAC、選單權限、按鈕權限、API 權限與安全邊界。
- Vue 錯誤處理與監控設計 - Vue errorHandler、errorCaptured、API 錯誤、Promise 錯誤、路由錯誤、監控上報、Source Map 與告警策略。
- 瀏覽器渲染管線與 DOM 操作成本 - Style、Layout、Paint、Composite、強制同步佈局與讀寫分離。
- Vue 2.x 與 Vue 3.x 渲染器 Diff 算法 - 雙端比較、Keyed Children、最長遞增子序列與編譯期優化。
- 深入 Vue KeepAlive：組件緩存與狀態保留 - 緩存策略、LRU、
onActivated與記憶體管理。 - 深入 Vue Teleport：跨 DOM 層級的 UI 設計 - Modal、全螢幕場景、
disabled與層疊上下文。 - Vue Compiler 的實現原理 - Template 編譯、AST、Transform、Codegen、Patch Flags、Block Tree 與靜態提升。
第四階段：資深視角 (Staff / Lead)
資深面試更常問「為什麼這樣設計」，也會看你能否替團隊留下可演進的系統。
- 大型 Vue 專案架構設計 - 模組邊界、設計系統、權限模型、API 層與錯誤處理。
- Vue SSR 的實現原理 - Server Render、Hydration、同構程式、資料預取、狀態注水、Mismatch 與部署架構。
- Vue 測試策略與可維護性 - 單元測試、組件測試、E2E、Mock 邊界、CI 品質門檻與重構安全網。
- Vue 面試系統設計題 - 從後台管理、低程式碼表單、即時協作到微前端拆分。
題型安排
每篇文章建議固定使用四段式結構：
- 必考觀念：先用一句話回答，再補上正確心智模型。
- 追問題庫：整理面試官常見追問，包含容易踩錯的邊界。
- 實作題：提供一個可手寫、可討論取捨的小場景。
- 資深視角：說明在真實專案裡如何判斷成本、風險與替代方案。
TIP
建議寫作順序：先補齊 Junior 與 Mid-Level 主幹，建立完整基礎面；接著補 Performance、Rendering、Architecture、SSR，讓系列具備高階面試的深度。既有的 KeepAlive 與 Teleport 可以作為 Senior-Ready 的進階專題。