本文覆蓋Vue 基礎(chǔ)、組件核心、Vue2/Vue3 原理、全家桶、性能優(yōu)化、高頻拓展六大板塊，包含面試高頻題 + 手寫題 + 原理題，區(qū)分「基礎(chǔ)必背」「進階拔高」「原理深挖」三個難度梯度，適配校招 / 社招 / 中高級前端面試，答案均為企業(yè)面試標(biāo)準(zhǔn)表述，可直接背誦、上手即用。

? 標(biāo)注 = 面試最高頻，必考優(yōu)先級； ? 標(biāo)注 = 手寫 / 原理類，中高級面試重點。

一、Vue 基礎(chǔ)核心題（入門必背，100% 考）

? 1. Vue 的核心特性有哪些？

標(biāo)準(zhǔn)答案：

Vue 是一款漸進式 JavaScript 框架，核心特性圍繞「易用、高效、組件化」設(shè)計，核心特性如下：

?數(shù)據(jù)驅(qū)動視圖（MVVM）：遵循 MVVM 架構(gòu)，數(shù)據(jù)（Model）變化自動更新視圖（View），無需手動操作 DOM，實現(xiàn)視圖與數(shù)據(jù)解耦；

?組件化開發(fā)：將頁面拆分為獨立、可復(fù)用的組件，支持組件嵌套 / 傳參，降低代碼耦合度，提升復(fù)用性和可維護性；

?雙向數(shù)據(jù)綁定：v-model指令實現(xiàn)表單元素「視圖→數(shù)據(jù)、數(shù)據(jù)→視圖」雙向同步，底層是v-bind+v-on的語法糖；

?指令系統(tǒng)：內(nèi)置v-if/v-for/v-bind/v-on/v-show等指令，封裝 DOM 操作邏輯，用聲明式語法替代命令式 DOM 操作；

?虛擬 DOM + Diff 算法：將真實 DOM 抽象為虛擬節(jié)點（VNode），數(shù)據(jù)更新時通過 Diff 對比新舊 VNode，只更新變化的 DOM 節(jié)點，提升渲染效率；

?生命周期鉤子：提供完整的組件生命周期函數(shù)，可在組件「創(chuàng)建、掛載、更新、銷毀」各階段執(zhí)行自定義邏輯。

? 2. v-if 和 v-show 的區(qū)別？分別在什么場景下使用？

標(biāo)準(zhǔn)答案（面試滿分表述，分「區(qū)別 + 場景」兩層答）：

? 核心區(qū)別（3 點必答）

渲染原理不同?

v-if：動態(tài)增刪 DOM 元素，條件為 false 時，元素會從 DOM 樹中移除，不占 DOM 節(jié)點；

v-show：控制元素 CSS 的 display 屬性，條件為 false 時，元素僅被隱藏（display: none），始終存在于 DOM 樹中。

編譯性能不同

v-if：有編譯切換開銷，條件切換時會觸發(fā)組件的「銷毀→重建」，涉及生命周期執(zhí)行；

v-show：只有初始渲染開銷，條件切換僅修改樣式，性能損耗極低。

使用限制不同

v-if可與v-else/v-else-if配合實現(xiàn)多條件分支，支持模板根節(jié)點使用；

v-show不支持分支語法，僅能單獨控制單個元素的顯示隱藏。

? 適用場景

? 用v-show：需要頻繁切換顯示 / 隱藏的場景（如 tab 切換、彈窗顯隱），利用其切換無開銷的優(yōu)勢；

? 用v-if：條件很少改變、甚至首次渲染后不變的場景（如權(quán)限控制、頁面初始化的條件渲染），利用其節(jié)省 DOM 節(jié)點的優(yōu)勢。

? 3. v-for 為什么必須加 key？key 的作用是什么？

標(biāo)準(zhǔn)答案：

? 核心作用

key是 Vue 中虛擬 DOM Diff 算法的標(biāo)識，用于精準(zhǔn)識別列表中每個節(jié)點的唯一性，讓 Vue 知道新舊列表中「哪個節(jié)點是同一個」。

? 不加 key 的問題

若列表無 key，Vue 會采用「就地更新」策略：通過節(jié)點位置對比新舊列表，可能導(dǎo)致節(jié)點復(fù)用錯誤，出現(xiàn)「數(shù)據(jù)錯亂、表單值綁定異常、組件生命周期重復(fù)執(zhí)行」等問題。

? key 的選型原則 ?

優(yōu)先用唯一標(biāo)識：如后端返回的id、uid等唯一值（推薦，性能最優(yōu)、無副作用）；

禁止用 index 作為 key：index 會隨列表排序 / 增刪而變化，本質(zhì)還是「按位置匹配」，仍會觸發(fā)錯誤的節(jié)點復(fù)用，違背 key 的設(shè)計初衷；

特殊場景用隨機值：若無唯一標(biāo)識，可臨時用Math.random()，但會導(dǎo)致每次渲染都銷毀重建節(jié)點，性能較差，僅應(yīng)急使用。

? 4. Vue 中 data 為什么是一個函數(shù)（組件中），而不是對象？

標(biāo)準(zhǔn)答案：

核心原因是防止組件復(fù)用導(dǎo)致的數(shù)據(jù)污染。

組件是可復(fù)用的實例，如果 data 是對象，則所有組件實例會共享同一個 data 對象的引用：修改其中一個實例的 data，其他所有復(fù)用的實例 data 都會同步改變，造成數(shù)據(jù)混亂；

如果 data 是函數(shù)，組件每次被復(fù)用都會執(zhí)行一次 data 函數(shù)，返回一個全新的獨立對象，每個組件實例擁有專屬的 data 數(shù)據(jù)，相互隔離、互不影響。

?? 補充：Vue 根實例（new Vue ({})）中，data 可以是對象，因為根實例只會被創(chuàng)建一次，不存在復(fù)用問題。

? 5. 簡述 Vue 的生命周期，Vue2 和 Vue3 的生命周期有什么區(qū)別？

? ① Vue2 組件完整生命周期（8 個核心鉤子，按執(zhí)行順序）

plaintext

創(chuàng)建階段 → 掛載階段 → 更新階段 → 銷毀階段

beforeCreate → created → beforeMount → mounted → beforeUpdate → updated → beforeDestroy → destroyed

創(chuàng)建階段：beforeCreate（數(shù)據(jù) / 方法未初始化）、created（數(shù)據(jù) / 方法初始化完成，可請求數(shù)據(jù)，DOM 未生成）；

掛載階段：beforeMount（編譯模板完成，即將掛載 DOM）、mounted（DOM 掛載完成，可操作 DOM，請求數(shù)據(jù)也常用）；

更新階段：beforeUpdate（數(shù)據(jù)更新，DOM 未重新渲染）、updated（DOM 渲染完成，數(shù)據(jù)與視圖同步）；

銷毀階段：beforeDestroy（組件即將銷毀，可清除定時器 / 解綁事件）、destroyed（組件已銷毀，所有實例資源釋放）。

? ② Vue3 生命周期變化（3 個核心區(qū)別，必答）

Vue3 兼容 Vue2 選項式生命周期（可直接用），同時提供組合式 API 的生命周期鉤子，核心變化：

命名變化：beforeDestroy→beforeUnmount、destroyed→unmounted（語義更精準(zhǔn)）；

組合式 API 寫法：在<script setup>中，需導(dǎo)入鉤子函數(shù)使用，對應(yīng)關(guān)系：

setup() → 替代 beforeCreate + created（setup執(zhí)行時機更早）

onMounted → mounted

onUpdated → updated

onBeforeUnmount → beforeUnmount

onUnmounted → unmounted

執(zhí)行時機：setup是組合式 API 的入口，執(zhí)行時機早于 beforeCreate，此時this為undefined。

? ③ 面試高頻追問：「請求數(shù)據(jù)寫在哪個生命周期？為什么？」

答：優(yōu)先寫在 created /mounted/setup。

created：DOM 未生成，但數(shù)據(jù)已初始化，可提前發(fā)起請求，節(jié)省請求時間；

mounted：DOM 已掛載完成，若請求后需要操作 DOM，必須寫在 mounted；

Vue3 setup：可直接在頂層寫請求（無需嵌套鉤子），最簡、最推薦。

二、組件核心 & 通信題（高頻必考，占比 40%）

組件通信是 Vue 面試重中之重，必須熟練掌握「所有通信方式 + 適用場景」，按「Vue2 專屬、Vue3 專屬、通用」分類記憶，答出方式 + 用法 + 場景才算滿分。

? 1. Vue 組件之間有哪些通信方式？分別適用于什么場景？

? 一、父子組件通信（最常用，100% 考）【4 種】

? 方式 1：props / $emit（Vue2/Vue3 通用，首選）

?適用場景：父傳子（props）、子傳父（$emit），父子單向通信的標(biāo)準(zhǔn)方案。

?? 父傳子：父組件通過:屬性名="數(shù)據(jù)"傳值，子組件通過props接收（支持類型校驗、默認(rèn)值、必傳校驗）；

?? 子傳父：子組件通過this.$emit('自定義事件名', 數(shù)據(jù))觸發(fā)事件，父組件通過@自定義事件名="回調(diào)"接收數(shù)據(jù)。

Vue3<script setup>：子組件用defineProps接收、defineEmits觸發(fā)事件，無需 this。

? 方式 2：ref / $refs（Vue2）、ref + 模板引用（Vue3）

?適用場景：父組件主動獲取子組件的屬性 / 調(diào)用子組件的方法（父子雙向交互）。

Vue2：父組件給子組件加ref="xxx"，通過this.$refs.xxx訪問子組件實例；

Vue3：父組件用const childRef = ref(null)，子組件加ref="childRef"，通過childRef.value訪問實例。

? 方式 3：$parent / $children（Vue2 專屬，Vue3 廢棄）

?適用場景：子組件獲取父組件實例（）、父組件獲取所有子組件實例數(shù)組（children）；

?? 缺點：耦合度高，不推薦在大型項目使用，Vue3 已移除該 API。

? 方式 4：provide /inject（Vue2/Vue3 通用）

?適用場景：隔代組件通信（父→孫、爺→孫），跨多層級的單向數(shù)據(jù)傳遞，Vue3 中優(yōu)先級極高。

用法：父組件用provide('key', 數(shù)據(jù))提供數(shù)據(jù)，子孫組件用inject('key')注入數(shù)據(jù)；

特點：無視組件層級，支持響應(yīng)式數(shù)據(jù)傳遞（Vue3 中配合 ref/reactive，Vue2 中配合 Vue.observable）。

? 二、兄弟組件通信【3 種】

?方式 1：父組件中轉(zhuǎn)（最穩(wěn)妥，推薦）

思路：兄弟 A → 父組件（$emit），父組件 → 兄弟 B（props），利用父子通信實現(xiàn)兄弟通信，無副作用、易維護。

?方式 2：EventBus 事件總線（Vue2 常用，Vue3 替代）

思路：創(chuàng)建一個全局的 Vue 實例作為「事件中心」，兄弟組件通過$on監(jiān)聽事件、$emit觸發(fā)事件；

?? Vue3：移除 Vue 實例，可用mitt/tiny-emitter庫實現(xiàn)事件總線。

?方式 3：Pinia/Vuex（全局狀態(tài)管理，推薦）

思路：將兄弟組件共享的數(shù)據(jù)存入全局倉庫，組件按需讀取 / 修改，是大型項目兄弟通信的標(biāo)準(zhǔn)方案。

? 三、任意組件通信（跨層級、跨兄弟）【2 種，必背】

? ? 方式 1：Pinia（Vue3 首選）/ Vuex（Vue2 首選）【核心方案】

?適用場景：項目全局共享數(shù)據(jù)（如用戶信息、主題配置、購物車數(shù)據(jù)），支持組件任意層級通信，是企業(yè)級項目的標(biāo)配。

Vue2：用 Vuex（核心：State、Mutation、Action、Getter、Module）；

Vue3：用 Pinia（替代 Vuex，更輕量、支持 TS、無需模塊化嵌套，語法更簡潔）。

? 方式 2：全局變量 /localStorage/sessionStorage

?適用場景：非響應(yīng)式的全局?jǐn)?shù)據(jù)（如用戶 token、靜態(tài)配置），簡單場景應(yīng)急使用；

?? 缺點：數(shù)據(jù)非響應(yīng)式，修改后視圖不會自動更新，需手動處理。

? 面試總結(jié)（滿分話術(shù)）

「父子通信用 props/$emit/ref；隔代通信用 provide/inject；兄弟通信用父組件中轉(zhuǎn)或 Pinia；任意組件通信首選 Pinia，簡單場景用 EventBus / 全局變量?！?/p>

? 2. Vue3 中 setup 的特性和優(yōu)勢是什么？

標(biāo)準(zhǔn)答案（Vue3 核心考點，必答 4 點優(yōu)勢）：

setup是 Vue3組合式 API（Composition API）的入口函數(shù)，也是<script setup>語法糖的底層，核心特性 & 優(yōu)勢：

?更早的執(zhí)行時機：執(zhí)行時機早于 Vue2 的beforeCreate，此時組件實例未創(chuàng)建，this為undefined；

?統(tǒng)一的代碼組織：將「同一業(yè)務(wù)邏輯」的變量、方法、生命周期聚合在一起，解決 Vue2 選項式 API（Options API）「代碼碎片化」的問題，大型組件可讀性、可維護性翻倍；

?更好的 TS 支持：天然兼容 TypeScript，變量 / 方法的類型推導(dǎo)更精準(zhǔn)，無需額外綁定 this，解決 Vue2 中 TS 支持差的痛點；

?語法更簡潔：<script setup>語法糖可省略export default、defineProps/defineEmits自動注冊，無需 return 暴露變量 / 方法，代碼量大幅減少；

?更強的復(fù)用性：配合「組合式函數(shù)（Composables）」，可將通用邏輯抽離為獨立的 hooks 函數(shù)，實現(xiàn)跨組件邏輯復(fù)用，替代 Vue2 的 mixins（無命名沖突、可追溯）。

? 3. Vue2 的 mixins 有什么缺點？Vue3 是如何解決的？

標(biāo)準(zhǔn)答案（中高級面試高頻題，對比答法）：

? 一、Vue2 mixins 的 3 個核心缺點（必答）

mixins 是 Vue2 中組件邏輯復(fù)用的方案，缺點非常明顯，也是 Vue3 棄用它的原因：

?命名沖突問題：mixins 中的變量、方法、生命周期，若與組件內(nèi)同名，會被組件內(nèi)的內(nèi)容覆蓋，且無任何報錯，排查困難；

?來源追溯困難：組件中引入多個 mixins 時，無法直觀判斷「某個變量 / 方法來自哪個 mixin」，大型項目中可讀性極差；

?邏輯耦合問題：mixins 與組件之間隱式共享數(shù)據(jù)，mixins 可修改組件內(nèi)的數(shù)據(jù)，組件也可修改 mixins 的數(shù)據(jù)，耦合度高，易產(chǎn)生副作用。

? 二、Vue3 的解決方案（2 種，必答）

Vue3 用組合式函數(shù)（Composables，也叫 Vue3 Hooks）徹底替代 mixins，同時提供provide/inject增強方案，解決所有痛點：

?組合式函數(shù)（核心）：將復(fù)用邏輯抽離為獨立的函數(shù)，函數(shù)內(nèi)部用 ref/reactive 定義響應(yīng)式數(shù)據(jù)，return 暴露需要的變量 / 方法；組件通過導(dǎo)入函數(shù)、解構(gòu)賦值使用，命名可控、來源清晰，無沖突、可追溯；

?provide/inject 增強：配合 ref/reactive 實現(xiàn)響應(yīng)式數(shù)據(jù)傳遞，數(shù)據(jù)流向清晰，且支持跨層級復(fù)用，無耦合問題。

三、Vue2/Vue3 原理深挖題（中高級必考，手寫 + 原理）

該板塊是拉開面試差距的核心，校招側(cè)重「原理理解」，社招 / 中高級側(cè)重「手寫實現(xiàn)」，答案包含「原理表述 + 手寫代碼」，可直接背誦、手寫。

? ? 1. Vue2 的雙向數(shù)據(jù)綁定原理是什么？手寫簡易版 Vue2 響應(yīng)式？

? 一、原理表述（面試必背，3 句話講清）

Vue2 的雙向數(shù)據(jù)綁定基于「數(shù)據(jù)劫持（Object.defineProperty） + 發(fā)布 - 訂閱模式」實現(xiàn)：

?數(shù)據(jù)劫持：通過Object.defineProperty遍歷 data 中的所有屬性，為每個屬性添加getter/setter；

?依賴收集：組件渲染時，訪問 data 屬性會觸發(fā)getter，將當(dāng)前的Watcher（觀察者）收集到「Dep（依賴管理器）」中；

?派發(fā)更新：當(dāng) data 屬性被修改時，觸發(fā)setter，Dep 通知所有收集的 Watcher 執(zhí)行更新，進而觸發(fā)視圖重新渲染。

?? 補充：v-model是雙向綁定的語法糖，底層 =v-bind:value（數(shù)據(jù)→視圖） +v-on:input（視圖→數(shù)據(jù)）。

? ? 2. Vue3 為什么用 Proxy 替代 Object.defineProperty？兩者的區(qū)別是什么？

標(biāo)準(zhǔn)答案（Vue3 核心原理題，必答 4 點優(yōu)勢）：

Vue3 的響應(yīng)式底層由Proxy（代理） + Reflect（反射）實現(xiàn)，徹底替代 Vue2 的Object.defineProperty，核心原因是后者存在致命缺陷，Proxy 優(yōu)勢更明顯，兩者核心區(qū)別：

? 一、Object.defineProperty 的 3 個核心缺陷（必答）

?無法監(jiān)聽對象新增 / 刪除的屬性：只能劫持已存在的屬性，對obj.newKey = xxx、delete obj.key無感知，Vue2 中需用Vue.set/this.$set手動處理；

?無法監(jiān)聽數(shù)組的原生方法 / 下標(biāo)修改：對數(shù)組push/pop/shift/unshift/splice/sort/reverse等方法、arr[0] = xxx無法劫持，Vue2 中需重寫數(shù)組原型方法；

?劫持粒度細，性能差：需要深度遍歷對象，為每個屬性單獨添加 get/set，嵌套層級越深，性能損耗越大。

? 二、Proxy 的 4 個核心優(yōu)勢（必答）

?監(jiān)聽整個對象，而非單個屬性：直接代理整個對象，支持新增 / 刪除屬性的監(jiān)聽，無需手動處理；

?完美支持?jǐn)?shù)組監(jiān)聽：可監(jiān)聽數(shù)組的下標(biāo)修改、原生方法調(diào)用，無需重寫數(shù)組原型；

?劫持粒度粗，性能更優(yōu)：只代理頂層對象，惰性劫持（嵌套對象訪問時才遞歸代理），大幅提升初始化性能；

?支持更多數(shù)據(jù)類型：可代理 Map、Set、WeakMap、WeakSet 等集合類型，Object.defineProperty僅支持普通對象。

? 補充：Vue3 中 Reflect 的作用？

配合 Proxy 實現(xiàn)屬性的默認(rèn)行為（如Reflect.get(target, key)等價于target[key]）；

統(tǒng)一返回值類型，避免 Proxy 攔截時出現(xiàn)異常；

綁定 this 指向，確保操作的正確性。

? 3. Vue 的虛擬 DOM（VNode）和 Diff 算法原理是什么？

? 一、虛擬 DOM（VNode）原理

虛擬 DOM 是對真實 DOM 的抽象描述，本質(zhì)是一個JavaScript 對象，包含tag（標(biāo)簽名）、props（屬性）、children（子節(jié)點）、el（對應(yīng)真實DOM）等屬性。

? 核心作用：

避免直接操作真實 DOM，用 JS 對象描述 DOM 結(jié)構(gòu)，提升操作效率；

為跨平臺渲染提供基礎(chǔ)（Vue 可通過 VNode 渲染到瀏覽器 DOM、小程序、原生應(yīng)用）；

數(shù)據(jù)更新時，通過對比新舊 VNode，實現(xiàn)「精準(zhǔn) DOM 更新」。

? 二、Diff 算法原理（面試必背，核心流程）

Diff 算法是對比新舊兩棵 VNode 樹，找出差異節(jié)點，只更新差異部分的算法，Vue 的 Diff 遵循「同層比較、深度優(yōu)先」原則，核心流程 3 步：

?同級節(jié)點比較：只對比同一層級的 VNode，不跨層級比較（如根節(jié)點只對比根節(jié)點，子節(jié)點只對比子節(jié)點），時間復(fù)雜度從 O (n3) 降至 O (n)；

?節(jié)點類型判斷：

若新舊節(jié)點類型不同：直接銷毀舊節(jié)點，創(chuàng)建并掛載新節(jié)點；

若新舊節(jié)點類型相同：對比節(jié)點的 props、children，更新差異屬性，遞歸對比子節(jié)點；

?列表 Diff 優(yōu)化：針對 v-for 的列表節(jié)點，利用key建立節(jié)點映射關(guān)系，通過「移動、新增、刪除」實現(xiàn)高效更新，避免全量重建。

四、Vue 全家桶題（項目必考，占比 30%）

Vue 全家桶（VueRouter + Pinia/Vuex）是企業(yè)項目標(biāo)配，面試必考「使用方式 + 核心原理 + 常見問題」，答案適配 Vue2/Vue3 雙版本。

? 1. VueRouter 的核心原理是什么？Vue2 和 Vue3 的使用區(qū)別？

? 一、VueRouter 核心原理（hash 模式 vs history 模式，必答）

VueRouter 是 Vue 的路由管理器，實現(xiàn)單頁面應(yīng)用（SPA）的核心，支持兩種路由模式，底層原理不同：

? 模式 1：hash 模式（默認(rèn)）

原理：基于 URL 的hash 值（#）實現(xiàn)，#后的內(nèi)容不會發(fā)送到服務(wù)器，路由切換時 URL 變化但頁面不刷新；

特點：無需后端配置，兼容性好（支持 IE），URL 帶#，美觀性差；

核心 API：監(jiān)聽window.onhashchange事件，獲取 hash 值變化，匹配對應(yīng)路由組件。

? 模式 2：history 模式（推薦）

原理：基于 HTML5 的History API（pushState/replaceState）實現(xiàn)，URL 無#，與原生路由一致；

特點：URL 美觀，需后端配置（所有請求都重定向到 index.html），否則刷新頁面會 404；

核心 API：監(jiān)聽window.onpopstate事件，監(jiān)聽瀏覽器前進 / 后退，匹配路由組件。

? 二、Vue2 vs Vue3 VueRouter 使用區(qū)別（3 點必答）

?安裝方式不同：

Vue2：安裝vue-router@3.x，通過Vue.use(VueRouter)全局注冊；

Vue3：安裝vue-router@4.x，通過createRouter創(chuàng)建路由實例，配合 Vue3 的 createApp 掛載。

?路由實例創(chuàng)建不同：

// Vue2constrouter=newVueRouter({routes,mode:'history'})newVue({router}).$mount('#app')// Vue3constrouter=createRouter({history:createWebHistory(),routes})createApp(App).use(router).mount('#app')

?組件內(nèi)使用不同：

Vue2：通過this.$router（路由實例）、this.$route（當(dāng)前路由信息）訪問；

Vue3：<script setup>中需導(dǎo)入useRouter/useRoute函數(shù)使用，無 this。

? 2. VueRouter 中導(dǎo)航守衛(wèi)有哪些？分別適用于什么場景？

標(biāo)準(zhǔn)答案（按「全局、路由、組件」分類，答出類型 + 用法 + 場景）：

導(dǎo)航守衛(wèi)是 VueRouter 的路由攔截器，用于控制路由的「跳轉(zhuǎn)前 / 跳轉(zhuǎn)后」行為，分為 3 類，優(yōu)先級：全局前置 > 路由獨享 > 組件內(nèi)守衛(wèi)。

? 1. 全局守衛(wèi)（作用于所有路由，最常用）

?router.beforeEach（全局前置守衛(wèi)）：路由跳轉(zhuǎn)前執(zhí)行，核心場景：登錄權(quán)限校驗、路由攔截、頁面跳轉(zhuǎn)埋點；

?router.afterEach（全局后置守衛(wèi)）：路由跳轉(zhuǎn)后執(zhí)行，場景：頁面標(biāo)題修改、滾動條重置。

? 2. 路由獨享守衛(wèi)（作用于單個路由）

beforeEnter：在路由配置中定義，僅作用于當(dāng)前路由，場景：單個路由的權(quán)限校驗。

? 3. 組件內(nèi)守衛(wèi)（作用于當(dāng)前組件）

beforeRouteEnter：組件進入前執(zhí)行（組件實例未創(chuàng)建，無 this）；

beforeRouteUpdate：組件復(fù)用前執(zhí)行（如動態(tài)路由/user/:id切換）；

beforeRouteLeave：組件離開前執(zhí)行，核心場景：表單未提交時的離開確認(rèn)、清除定時器。

? 面試高頻追問：「登錄權(quán)限校驗怎么實現(xiàn)？」

答：在router.beforeEach中實現(xiàn)：

router.beforeEach((to,from,next)=>{consttoken=localStorage.getItem('token')// 需登錄的路由，無token則跳登錄頁if(to.meta.requiresAuth){token?next():next('/login')}else{next()// 無需登錄，直接放行}})

? 3. Pinia 和 Vuex 的區(qū)別？為什么 Vue3 推薦用 Pinia？

標(biāo)準(zhǔn)答案（Vue3 項目必考，必答 5 點核心區(qū)別）：

Pinia 是 Vue3 官方推薦的狀態(tài)管理庫，是 Vuex 的「升級版」，徹底替代 Vuex，兩者核心區(qū)別（Pinia 優(yōu)勢）：

?更輕量，語法更簡潔：Pinia 體積僅 1KB，無需像 Vuex 那樣嵌套State/Mutation/Action/Getter/Module，代碼量減少 50%；

?天然支持 TS：Pinia 的類型推導(dǎo)更精準(zhǔn)，無需手動定義類型，Vuex 的 TS 支持繁瑣、不友好；

?無需模塊化嵌套：Vuex 中需用 Module 拆分模塊，Pinia 中每個 store 都是獨立的模塊，直接創(chuàng)建即可，無嵌套層級，更易維護；

?支持直接修改 State：Pinia 中可在組件內(nèi)直接修改 State（也可寫 Action），Vuex 中必須通過 Mutation 修改 State，Action 只能異步；

?更好的 DevTools 支持：Pinia 完美兼容 Vue3 DevTools，支持 store 的時間旅行、狀態(tài)快照，調(diào)試更友好；

?無命名空間問題：Vuex 的 Module 需手動開啟命名空間，Pinia 的每個 store 都有獨立的命名空間，無沖突風(fēng)險。

五、Vue 性能優(yōu)化題（項目拔高題，面試加分項）

性能優(yōu)化是中高級面試必考，體現(xiàn)候選人的項目實戰(zhàn)能力，按「編碼階段、打包階段、運行階段」分類，記憶「優(yōu)化點 + 具體方案」，答出 3 點以上即可加分，答出 5 點以上滿分。

? 面試高頻問：「你在 Vue 項目中做過哪些性能優(yōu)化？」（標(biāo)準(zhǔn)答案，分 3 類）

? 一、編碼階段優(yōu)化（開發(fā)中可落地，最常用，必答）

?合理使用 v-if /v-show：頻繁切換用 v-show，少切換用 v-if，減少 DOM 操作；

?v-for 加唯一 key，避免用 index：提升列表 Diff 效率，防止數(shù)據(jù)錯亂；

?避免 v-for 和 v-if 同用：兩者同用時 v-for 優(yōu)先級更高，會導(dǎo)致每次渲染都遍歷列表，可將數(shù)據(jù)過濾后再渲染；

?使用懶加載：組件懶加載（import()）、圖片懶加載（v-lazy），減少首屏加載資源；

?緩存高頻使用的數(shù)據(jù)：用computed（緩存計算結(jié)果）、keep-alive（緩存組件實例），避免重復(fù)計算 / 重復(fù)渲染；

?減少響應(yīng)式數(shù)據(jù)：非響應(yīng)式數(shù)據(jù)不用 ref/reactive，直接用普通變量，減少 Proxy 劫持開銷。

? 二、打包階段優(yōu)化（工程化優(yōu)化，必答）

?路由懶加載：VueRouter 中用() => import('@/views/xxx.vue')，實現(xiàn)路由組件按需加載，拆分 chunk 包；

?第三方庫按需引入：如 ElementUI、AntD-Vue，只引入用到的組件，不引入全量庫；

?壓縮資源：開啟 Vite/Webpack 的代碼壓縮（JS/CSS/ 圖片），去除 console、注釋；

?CDN 加速：將 Vue、VueRouter、Pinia 等第三方庫通過 CDN 引入，不打包進項目，減小打包體積；

?Tree Shaking：開啟搖樹優(yōu)化，移除項目中未使用的代碼，減小打包體積。

? 三、運行階段優(yōu)化（進階優(yōu)化，加分項）

?使用虛擬列表：長列表（1000 + 數(shù)據(jù)）用vue-virtual-scroller，只渲染可視區(qū)域的 DOM 節(jié)點，解決長列表卡頓；

?防抖 / 節(jié)流處理：對高頻事件（resize、scroll、input）做防抖（debounce）/ 節(jié)流（throttle），減少事件觸發(fā)次數(shù)；

?優(yōu)化 SSR / 預(yù)渲染：首屏加載慢的項目，用 SSR（服務(wù)端渲染）/ 預(yù)渲染，提升首屏加載速度和 SEO。

六、Vue 高頻拓展題（查漏補缺，覆蓋所有考點）

? 1. computed 和 watch 的區(qū)別？分別適用于什么場景？

標(biāo)準(zhǔn)答案（高頻基礎(chǔ)題，分「區(qū)別 + 場景」）：

? 核心區(qū)別

?功能定位不同：

computed：計算屬性，依賴其他數(shù)據(jù)推導(dǎo)新值，是「多對一」的映射關(guān)系；

watch：監(jiān)聽器，監(jiān)聽單個數(shù)據(jù)的變化，執(zhí)行自定義邏輯，是「一對多」的觸發(fā)關(guān)系。

?緩存機制不同?：

computed：有緩存，依賴數(shù)據(jù)不變時，多次訪問會直接返回緩存結(jié)果，不重復(fù)計算；

watch：無緩存，監(jiān)聽的數(shù)據(jù)變化一次，就執(zhí)行一次回調(diào)函數(shù)。

?使用場景不同?：

computed：數(shù)據(jù)推導(dǎo)、值轉(zhuǎn)換場景（如拼接姓名、計算總價、過濾列表）；

watch：數(shù)據(jù)變化后的異步操作、復(fù)雜邏輯處理場景（如監(jiān)聽搜索關(guān)鍵詞變化發(fā)起請求、監(jiān)聽路由變化執(zhí)行埋點）。

? 2. keep-alive 的作用是什么？有哪些生命周期鉤子？

標(biāo)準(zhǔn)答案：

? 核心作用

keep-alive是 Vue 的內(nèi)置組件，用于緩存組件實例，避免組件的「銷毀→重建」，提升組件切換效率，常用在路由切換、tab 切換場景。

? 專屬生命周期鉤子（2 個，必答）

被 keep-alive 緩存的組件，會新增兩個生命周期鉤子：

?activated：組件被激活時執(zhí)行（進入組件）；

?deactivated：組件被失活時執(zhí)行（離開組件）。

?? 補充：組件首次渲染仍會執(zhí)行mounted，后續(xù)切換只執(zhí)行activated/deactivated。

? 3. Vue3 相比 Vue2 有哪些核心升級？

標(biāo)準(zhǔn)答案（面試必背，5 點核心升級）：

?組合式 API（Composition API）：替代選項式 API，解決代碼碎片化問題，提升大型組件的可維護性和復(fù)用性；

?響應(yīng)式系統(tǒng)重構(gòu)：用 Proxy 替代 Object.defineProperty，解決 Vue2 響應(yīng)式的缺陷，支持對象新增 / 刪除屬性、數(shù)組監(jiān)聽；

?更輕量、更快：體積減少 40%，初始化性能提升 55%，更新性能提升 133%；

?天然支持 TS：源碼用 TS 重構(gòu)，TS 類型推導(dǎo)更精準(zhǔn)，開發(fā)體驗更好；

?其他優(yōu)化：支持多根節(jié)點組件、Teleport 傳送門、Suspense 異步組件，生態(tài)更完善（Pinia 替代 Vuex）。