2025年前端面試題集(含答案)之Vue篇Vue實例的data選項為什么必須是函數(shù)而不是對象？當組件被復(fù)用（多次實例化）時，若data是對象，所有實例會共享同一個對象引用，導(dǎo)致數(shù)據(jù)污染。而函數(shù)返回新對象，每個實例擁有獨立的數(shù)據(jù)副本。例如，基礎(chǔ)組件A被父組件多次調(diào)用，若data為對象，修改其中一個實例的data會影響其他實例；改為函數(shù)后，每次實例化都會執(zhí)行函數(shù)提供新對象，保證數(shù)據(jù)隔離。Vue2和Vue3響應(yīng)式原理的核心區(qū)別是什么？Vue2使用Object.defineProperty攔截對象屬性的get/set操作，需遍歷對象屬性逐個綁定，無法檢測數(shù)組索引和長度的變化（需重寫數(shù)組方法），也無法感知對象新增/刪除屬性（需$set/$delete）。Vue3采用Proxy代理整個對象，可攔截13種操作（如get、set、deleteProperty），能直接響應(yīng)數(shù)組索引修改（如arr[0]=1）和對象動態(tài)增刪屬性（如obj.newKey=1），且無需遞歸遍歷提前綁定，僅在訪問時按需代理（懶代理）。例如，對數(shù)組arr執(zhí)行arr[2]=3，Vue2需觸發(fā)重寫的splice方法才會更新，Vue3通過Proxy的set攔截直接響應(yīng)。組件通信有哪些方式？各自適用場景是什么？1.props/$emit：父子通信，父通過props傳值，子通過$emit觸發(fā)自定義事件回傳。適用于層級較淺的直接父子關(guān)系，需定義props類型驗證（type、required、default）和emit事件聲明（emits選項）。2.provide/inject：跨層級通信（祖先后代），父組件provide提供值，后代組件inject注入。適用于深層嵌套（如組件庫中的Form/FormItem），但需注意值的響應(yīng)性——若provide的是reactive對象，修改屬性會觸發(fā)后代更新；若為普通值，需用ref包裹保證響應(yīng)。3.事件總線（EventBus）：全局事件中心，通過$on/$emit通信。適用于非父子/兄弟的松散耦合場景，但需手動移除事件監(jiān)聽（$off），否則可能內(nèi)存泄漏，Vue3推薦用Pinia替代。4.Vuex/Pinia：全局狀態(tài)管理，集中式存儲共享數(shù)據(jù)。適用于多組件共享復(fù)雜狀態(tài)（如用戶登錄信息、購物車），Pinia相比Vuex（2.x/3.x）無mutation、支持組合式API、類型推導(dǎo)更友好。5.$parent/$children：直接訪問父子實例。適用于小型項目或臨時需求，不推薦復(fù)雜場景（依賴組件結(jié)構(gòu)，易導(dǎo)致緊耦合）。Vue3組合式API（CompositionAPI）相比選項式API（OptionsAPI）有哪些優(yōu)勢？1.邏輯復(fù)用：通過自定義hook（如useFetchData）封裝可復(fù)用邏輯，避免Mixin的命名沖突和來源不清晰問題。例如，多個組件需要數(shù)據(jù)加載邏輯，用useFetchData返回{data,loading,error,fetch}，組件內(nèi)直接解構(gòu)使用，代碼更易維護。2.代碼組織：按功能模塊（如狀態(tài)、事件、副作用）分組，而非按選項（data、methods、watch）分組，長組件代碼更易閱讀。例如，處理用戶信息的邏輯（獲取、修改、監(jiān)聽變化）可集中在一個區(qū)域，而非分散在data、methods、watch中。3.類型推導(dǎo)：組合式API（setup、ref、reactive）天然支持TypeScript，參數(shù)和返回值類型明確，減少類型錯誤。選項式API中props和data的類型需額外聲明（如defineComponent的泛型），復(fù)雜度更高。4.性能優(yōu)化：組合式API在編譯時更易優(yōu)化（如Tree-shaking），未使用的邏輯可被移除，減少打包體積；選項式API因選項固定，難以剔除未使用的部分。Vue生命周期在Vue3中有哪些變化？對應(yīng)的組合式API如何使用？Vue2生命周期：beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy、destroyed（beforeUnmount、unmounted在Vue3中重命名）。Vue3調(diào)整：-beforeCreate→setup（開始時執(zhí)行，無需單獨聲明）-created→setup（結(jié)束時執(zhí)行）-beforeMount→onBeforeMount-mounted→onMounted-beforeUpdate→onBeforeUpdate-updated→onUpdated-beforeDestroy→onBeforeUnmount-destroyed→onUnmounted組合式API中通過導(dǎo)入生命周期函數(shù)使用，例如：```javascriptimport{onMounted}from'vue'setup(){onMounted(()=>{console.log('組件掛載完成')})}```注意：Vue3中setup執(zhí)行早于beforeCreate，因此在setup中無法訪問this（指向undefined），響應(yīng)式數(shù)據(jù)需通過ref/reactive定義。VueRouter的導(dǎo)航守衛(wèi)有哪些類型？如何實現(xiàn)權(quán)限控制？導(dǎo)航守衛(wèi)分為三類：1.全局守衛(wèi)：router.beforeEach（全局前置）、router.beforeResolve（全局解析）、router.afterEach（全局后置）。2.路由獨享守衛(wèi)：在路由配置中定義beforeEnter。3.組件內(nèi)守衛(wèi)：beforeRouteEnter（進入前）、beforeRouteUpdate（參數(shù)變化時）、beforeRouteLeave（離開前）。權(quán)限控制示例（全局前置守衛(wèi)）：```javascriptrouter.beforeEach((to,from,next)=>{constisLogin=localStorage.getItem('token')//假設(shè)通過token判斷登錄狀態(tài)if(to.meta.requireAuth){//需要權(quán)限的路由if(isLogin){next()}else{next({path:'/login',query:{redirect:to.fullPath}})//跳轉(zhuǎn)到登錄頁并記錄目標路徑}}else{next()//無需權(quán)限的路由直接放行}})```需在路由配置中標記需要權(quán)限的路由：```javascript{path:'/dashboard',component:Dashboard,meta:{requireAuth:true}}```Pinia相比Vuex有哪些改進？如何定義一個Store？改進點：-無mutation：僅保留state、getters、actions，簡化狀態(tài)修改流程（actions直接修改state）。-組合式API支持：可通過defineStore定義組合式Store（使用setup函數(shù)），靈活復(fù)用邏輯。-類型安全：默認支持TypeScript，state、getters、actions的類型自動推導(dǎo)。-更小體積：無模塊嵌套（通過storeId區(qū)分），代碼更簡潔。定義Store示例（選項式寫法）：```javascriptimport{defineStore}from'pinia'exportconstuseUserStore=defineStore('user',{state:()=>({name:'guest',isAdmin:false}),getters:{welcomeMsg:(state)=>`歡迎${}`//依賴state的計算屬性},actions:{login(username){//同步/異步操作=usernamethis.isAdmin=username==='admin'}}})```組件中使用：```javascriptimport{useUserStore}from'@/stores/user'constuserStore=useUserStore()userStore.login('admin')console.log(userStore.welcomeMsg)//輸出"歡迎admin"```v-model在Vue2和Vue3中有哪些差異？如何自定義組件的v-model？差異：-Vue2中v-model是語法糖，對組件默認綁定valueprop和input事件；Vue3支持自定義model:xxx語法，可同時綁定多個v-model（如v-model:name和v-model:age）。-Vue3中v-model的修飾符（如.trim、.number）可自定義，而Vue2僅支持內(nèi)置修飾符。自定義組件v-model（Vue3）：```javascript//子組件Child.vuedefineProps({modelValue:String//默認v-model綁定的prop名})defineEmits(['update:modelValue'])//默認觸發(fā)的事件名//或自定義prop名（如title）defineProps({title:String})defineEmits(['update:title'])//模板中修改值時觸發(fā)事件<button@click="$emit('update:title','新標題')">修改標題</button>```父組件使用：```vue<Childv-model:title="parentTitle"/><!--等價于--><Child:title="parentTitle"@update:title="parentTitle=$event"/>```Vue的虛擬DOM（VDOM）是如何工作的？diff算法的核心邏輯是什么？虛擬DOM是真實DOM的JavaScript對象表示（如{tag:'div',props:{class:'box'},children:[...]}）。當狀態(tài)變化時，Vue提供新的VDOM樹，與舊樹比較（diff），找出最小差異集，僅更新需要變化的真實DOM節(jié)點。diff算法核心（Vue3采用雙端比較）：1.同級比較：僅比較同一層級的節(jié)點（避免跨層級移動的復(fù)雜計算）。2.鍵（key）的作用：通過唯一key標識節(jié)點，判斷是否可復(fù)用（如列表渲染時，key相同則復(fù)用舊節(jié)點，僅更新props；key不同則刪除舊節(jié)點，創(chuàng)建新節(jié)點）。3.雙指針遍歷：新舊子節(jié)點列表各用首尾兩個指針（i=0,oldEnd=舊列表長度-1,newEnd=新列表長度-1），從兩端向中間比較，處理新增、刪除、移動等情況。例如，舊子節(jié)點順序[A,B,C,D]，新順序[D,B,A,C]，通過雙指針比較可快速定位D（舊尾=新頭）、A（舊頭=新尾）等節(jié)點的位置變化，減少不必要的DOM操作。如何優(yōu)化Vue應(yīng)用的性能？1.減少響應(yīng)式層級：避免深層嵌套對象（如obj.a.b.c），可通過解構(gòu)或使用computed提取深層屬性，減少依賴收集的復(fù)雜度。2.合理使用v-show和v-if：頻繁切換用v-show（控制display），條件很少變化用v-if（銷毀/重建節(jié)點）。3.列表渲染加key：避免用index作為key（數(shù)組重排時導(dǎo)致錯誤復(fù)用），推薦唯一標識（如id）。4.異步組件和路由懶加載：通過defineAsyncComponent或import()動態(tài)加載組件，減少首屏加載時間。例如：```javascriptconstAsyncComp=defineAsyncComponent(()=>import('./AsyncComp.vue'))```5.使用keep-alive緩存組件：對不常更新的組件（如列表頁）添加<keep-alive>，保留實例狀態(tài)，避免重復(fù)渲染。可配合include/exclude指定緩存的組件名。6.優(yōu)化watch：使用deep:true時僅在需要監(jiān)聽對象深層變化時開啟，否則通過監(jiān)聽具體屬性（如watch:{'obj.key':handler}）減少性能消耗；使用immediate:true觸發(fā)初始執(zhí)行。7.減少自定義指令的副作用：在beforeUnmount中移除事件監(jiān)聽或定時器，避免內(nèi)存泄漏。8.構(gòu)建優(yōu)化：通過Webpack或Vite配置按需引入（如ElementPlus的unplugin-vue-components自動導(dǎo)入）、壓縮代碼（Terser）、拆分Chunk（splitChunks），減小包體積。Vue3的Teleport和Suspense有什么作用？Teleport（傳送門）：將組件內(nèi)容渲染到DOM樹的其他位置（如body下），解決模態(tài)框、提示框等因父級樣式（如overflow:hidden）導(dǎo)致的顯示問題。例如：```vue<teleportto="body"><divclass="modal">彈出內(nèi)容</div></teleport>```即使父組件有overflow:hidden，模態(tài)框也會渲染到body下，正常顯示。Suspense：處理異步依賴（如異步組件、setup中的異步操作）的加載狀態(tài)。當子組件未準備好時顯示fallback內(nèi)容，加載完成后渲染子組件。示例：```vue<template><Suspense><templatedefault><AsyncComponent/><!--內(nèi)部使用asyncsetup或異步組件--></template><templatefallback><div>加載中...</div></template></Suspense></template>```如何實現(xiàn)一個自定義指令？常見的應(yīng)用場景有哪些？自定義指令通過app.directive注冊（全局）或directives選項注冊（局部），包含mounted、updated等鉤子。鉤子參數(shù)包括el（綁定元素）、binding（包含value、oldValue、arg等）、vnode（虛擬節(jié)點）。示例：權(quán)限控制指令v-permission（僅允許管理員操作）```javascript//全局注冊app.directive('permission',{mounted(el,binding){constuserRole=localStorage.getItem('role')//獲取用戶角色constrequiredRole=binding.value//指令值，如'admin'if(userRole!==requiredRole){el.remove()//無權(quán)限則移除元素}}})```使用：```vue<buttonv-permission="'admin'">刪除數(shù)據(jù)</button>```常見場景：-輸入框防抖（v-debounce，延遲執(zhí)行輸入事件）-元素聚焦（v-focus，進入頁面時自動聚焦輸入框）-圖片懶加載（v-lazyload，滾動到可視區(qū)域時加載圖片）-權(quán)限控制（如上述示例）Vue組件的scoped樣式是如何實現(xiàn)的？有哪些注意事項？scoped通過為組件模板中的元素添加唯一data屬性（如data-v-abc123），并將樣式選擇器編譯為屬性選擇器（如p[data-v-abc123]），實現(xiàn)樣式隔離。深層選擇器（如要修改子組件的樣式）需使用>>>或::v-deep（Vue3推薦::v-deep）。注意事項：-scoped樣式不影響全局樣式（如body、html的樣式需在全局文件中定義）。-子組件的根元素會繼承父組件的scoped樣式（因父組件的data屬性會應(yīng)用到子組件根元素）。-使用預(yù)處理器（如S