vue 3面试高频问题及答案解析

最近好多朋友私訊我，問到 Vue 3 面試到底要準備啥，說實話，我自己也當過幾次面試官，看著一堆人卡在同樣的問題上，真心覺得可惜。這框架升級後變化不小，不是光背答案就能過關，得懂背後原理才不會被問倒。今天我就來聊聊幾個高頻問題，結合我踩過的坑和實戰經驗，幫大家少走彎路。

先講 Composition API，這絕對是面試官的最愛。很多人一聽到就急著比較 Options API，但重點不是哪個好，而是為什麼 Vue 3 要推這個。Composition API 讓邏輯重用變得更靈活，比方說，以前在 Options API 裡，data 和 methods 散在各處，維護大型專案時容易亂套。現在用 setup 函數，你可以把相關功能包成獨立的 composable function，像處理表單驗證或 API 呼叫，直接 import 進來用，程式碼清爽多了。面試時常問：什麼場景下該切換到 Composition API？我的經驗是，當專案規模大了，或者需要跨組件共享邏輯時，它就發揮優勢。但別硬套，小專案用 Options API 反而更直覺。

再來是 Reactivity 系統，這塊超容易讓人混淆。Vue 3 換成 Proxy 實作，跟 Vue 2 的 defineProperty 有啥不同？簡單說，Proxy 能直接攔截物件操作，不用預先定義屬性，效能更好也支援巢狀結構。面試官愛問：ref 和 reactive 怎麼選？實務上，ref 適合基本型別如數字或字串，因為它包裝成物件；reactive 則處理物件或陣列。常見陷阱是，直接用 reactive 包基本型別會失效，得用 ref。記得有次我調 bug 半天，才發現是這原因，面試時分享這種實例，能加分不少。

Lifecycle Hooks 在 Vue 3 也有調整，別再死記舊版了。現在常用的是 onMounted、onUpdated 這些，掛在 setup 裡執行。面試高頻題：為什麼 beforeCreate 和 created 被整合進 setup？其實是為了配合 Composition API 的設計，讓生命週期更貼近函數式思維。實戰中，我建議別濫用 hooks，像 onMounted 拿來初始化 API 呼叫就好，避免塞太多邏輯影響效能。有回我面試新人，他答得出 hooks 順序，但問到實際優化案例就卡住，這顯示只懂表面不夠。

State Management 部分，Vuex 和 Pinia 的對比少不了。Vue 3 時代，Pinia 崛起不是沒道理，它更輕量、支援 TypeScript 更好，而且不用寫一堆 mutations。面試常考：怎麼決定用哪個？我的看法是，新專案直接上 Pinia，API 簡單直觀；但舊專案升級時，Vuex 4 還能撐一陣子。關鍵在理解核心概念，像 actions 處理非同步、getters 做計算屬性，面試官愛聽你分享真實場景，比如電商購物車怎麼管理狀態才不亂。

最後聊聊效能優化，這在面試中越來越重要。Vue 3 的 Tree-shaking 機制讓 bundle size 變小，但問到具體怎麼做，很多人只會說「用 vite 就好」。其實得深入點，比如用 Suspense 處理非同步載入，或 lazy 載入組件減少初始負擔。我有個教訓：曾為趕進度忽略這塊，結果頁面載入慢，用戶跑光光。面試時展現這種反思，能證明你不是紙上談兵。

總之，Vue 3 面試不是考記憶力，而是考你懂不懂為什麼。多動手寫專案，累積真實經驗，答題時自然流露自信。祝大家順利過關，有啥疑問下面留言聊！