《前后端面試題》專欄集合了前后端各個知識模塊的面試題，包括html，javascript，css，vue，react，java，Openlayers，leaflet，cesium，mapboxGL，threejs，nodejs，mangoDB，MySQL，Linux… 。

前后端面試題-專欄總目錄

一、本文面試題目錄

1. Vue 3相比Vue 2有哪些主要改進？

Vue 3有諸多改進。在性能上，使用Proxy替代Object.defineProperty實現響應式系統，能更高效追蹤數據變化，提升渲染性能；對虛擬DOM進行優化，包括編譯器優化、Tree - shaking支持以及更高效的差異更新等，使得渲染速度更快。在代碼組織與復用方面，引入Composition API，讓開發者可將組件邏輯按功能組織，提高代碼可維護性與可重用性。在類型支持上，提供了更好的TypeScript支持，包括類型定義文件，利于編碼時進行類型檢查。此外，還新增了Teleport、Suspense等特性，支持多根節點，重構了全局API等。

2. 什么是Composition API？它有什么優勢？

Composition API是Vue 3中新引入的API設計模式。它允許開發者更靈活地組織和管理組件邏輯。優勢如下：更好的代碼組織，能將邏輯按功能相關方式組織，而非按生命周期鉤子函數組織；更好的代碼重用，可將邏輯封裝為可重用函數在多個組件間共享；更好的類型推斷，基于TypeScript能更好推斷函數和響應式數據類型，為代碼編輯器提供更好支持；更好的邏輯復用，提供如watch、computed等內置函數處理常見邏輯場景。

3. Vue 3中的響應式系統是如何工作的？

Vue 3使用ES6的Proxy實現響應式系統。當一個響應式對象被訪問時，Vue 3通過Proxy攔截器捕獲該訪問，建立依賴關系，將訪問與正在訪問的組件關聯。當響應式對象的屬性發生變化時，Proxy攔截器觸發，通知相關組件更新。并且采用“代理轉發”技術，只有真正訪問響應式對象屬性時才建立依賴關系，避免不必要的依賴追蹤，提升性能。例如：

import { reactive } from 'vue';
const state = reactive({ count: 0 });
// 訪問state.count時建立依賴關系
console.log(state.count);
// 修改state.count時觸發更新
state.count++;

4. Proxy與Object.defineProperty相比有什么優勢？

Proxy相比Object.defineProperty優勢明顯。性能上，Proxy本身性能較好。功能方面，Proxy可以攔截屬性的訪問、賦值、刪除等13種操作，而Object.defineProperty主要能劫持屬性的讀取和賦值；Proxy不需要在初始化時遍歷所有屬性，對于多層屬性嵌套，只有訪問某個屬性時才遞歸處理下一級屬性，而Object.defineProperty對對象的已有屬性值的讀取和修改進行劫持，對象直接添加新屬性或刪除已有屬性時，界面不會自動更新；Proxy還可以監聽數組的索引和length屬性變化，而Object.defineProperty對數組處理存在局限性 。

5. Vue 3中的虛擬DOM優化了哪些方面？

Vue 3對虛擬DOM的優化體現在多方面。編譯器優化上，標記和提升所有靜態根節點，diff時只比較動態節點內容，提高了對比效率。例如，模板中靜態部分在多次渲染中不會重復對比。支持Tree - shaking，可移除未使用代碼，減小打包體積。在差異更新方面，通過Patch Flag等技術，給動態標簽末尾加上相應標記，只有帶Patch Flag的節點才被認為是動態元素并追蹤屬性修改，能快速定位動態節點，無需逐個逐層遍歷，極大提升虛擬DOM diff的性能。

6. Tree - shaking在Vue 3中是如何工作的？

在Vue 3中，Tree - shaking工作依賴于現代構建工具（如webpack 4及以上版本）。推薦使用按需導入方式引入第三方組件庫，而非直接導入整個庫，這樣構建工具在打包時能分析代碼中實際使用的模塊。例如創建一個包含多個函數的文件utils.js ，若代碼中只使用了其中部分函數，構建打包輸出時，Tree - shaking優化會自動去除未使用函數的代碼。同時，Vue 3本身對一些未使用的全局API等進行了優化，通過Tree - shaking技術，使得最終包體積更小，應用加載速度更快。

7. Vue 3中的組件生命周期鉤子有哪些變化？

Vue 3引入了一些新的組件生命周期鉤子，如onBeforeMount、onMounted、onBeforeUpdate、onUpdated等。與Vue 2相比，使用方式有所不同，在Vue 3中這些鉤子函數需要從’vue’中導入使用。例如在setup函數中使用生命周期鉤子：

import { onMounted } from 'vue';
export default {setup() {onMounted(() => {console.log('組件已掛載');});}
};

此外，Vue 3還提供了與組件卸載相關的鉤子onBeforeUnmount、onUnmounted等 。

8. 如何在Vue 3項目中進行性能優化？

可從多方面進行性能優化。代碼分割方面，將代碼按路由或功能模塊進行分割，實現按需加載，減少初始加載的代碼量。例如使用動態導入實現組件懶加載：const MyComponent = () => import('./MyComponent.vue'); 。懶加載不僅用于組件，對圖片等資源也適用。避免不必要的計算和渲染，如合理使用computed屬性，其值只有在依賴變化時才重新計算；使用v - if和v - show時，根據場景合理選擇，v - if是真正的條件渲染，條件為假時相關DOM元素不會存在，v - show通過CSS的display屬性控制元素顯示隱藏，適用于頻繁切換顯示狀態的場景 。還可利用Vue 3的響應式系統優化，避免過度的響應式數據嵌套等。

9. Vue 3中的Teleport是什么？有什么作用？

Teleport是Vue 3中新增的一個內置組件。它允許將組件的部分內容渲染到DOM樹中的其他位置，而不是組件自身所在的位置。作用如下：在組件外部渲染內容，通過它可將組件內部內容渲染到組件外部指定位置，實現更靈活布局，比如將模態框渲染到標簽下，避免模態框樣式受限于組件內部的CSS樣式層級。解決層級限制問題，當組件樣式受父級組件CSS限制無法實現期望布局時，使用Teleport將組件內容渲染到組件外部位置，可避免該限制 。例如：

<template><Teleport to="body"><div class="modal"><!-- 模態框內容 --></div></Teleport>
</template>

10. Vue 3中的Suspense是什么？如何使用？

Suspense是Vue 3中用于處理異步組件加載的新特性。它可以在等待異步組件加載時顯示一些占位符內容，提升用戶體驗。使用時，將需要異步加載的組件包裹在組件內，通過設置<template #default>顯示加載完成后的組件內容，<template #fallback>顯示加載過程中的占位符內容。例如：

<template><Suspense><template #default><AsyncComponent /></template><template #fallback><div>加載中...</div></template></Suspense>
</template>
<script setup>
import { defineAsyncComponent } from 'vue';
const AsyncComponent = defineAsyncComponent(() => import('./AsyncComponent.vue'));
</script>

若異步組件加載失敗，還可結合錯誤處理機制在Suspense中進行相應提示 。

---

No.	大劍師精品GIS教程推薦
0	地圖渲染基礎- 【WebGL 教程】 - 【Canvas 教程】 - 【SVG 教程】
1	Openlayers 【入門教程】 - 【源代碼+示例 300+】
2	Leaflet 【入門教程】 - 【源代碼+圖文示例 150+】
3	MapboxGL【入門教程】 - 【源代碼+圖文示例150+】
4	Cesium 【入門教程】 - 【源代碼+綜合教程 200+】
5	threejs【中文API】 - 【源代碼+圖文示例200+】

---

11. Vue 3中的Fragment是什么？有什么作用？

Fragment允許組件返回多個根節點，解決了Vue 2中組件必須有一個根節點的問題。在Vue 2中，如果需要在組件模板中渲染多個同級元素，必須用一個額外的包裹元素（如

<template><Fragment><h1>標題</h1><p>段落內容</p></Fragment>
</template>

也可以使用短語法<></>來代替<Fragment></Fragment> 。

12. Vue 3中的工程化工具Vite是什么？有什么優勢？

Vite是一個快速的前端開發工具。優勢顯著，開發體驗上，它利用原生ES模塊，實現了極快的冷啟動速度，無需等待冗長的打包過程，在開發環境中能即時熱更新（HMR），且更新速度快，幾乎無刷新閃爍。構建方面，使用Rollup進行打包，能有效減小打包體積，對Vue 3項目有很好的支持，通過Tree - shaking等技術優化代碼。同時，它對各種前端框架（如Vue、React等）都有良好的兼容性，配置相對簡單，開箱即用，大大提高了前端開發效率 。

13. Vue 3的響應式系統中ref和reactive有什么區別？

ref用于創建一個包含響應式數據的引用，一般用于基本數據類型（如字符串、數字、布爾等），也可用于對象和數組，但會將其包裝成一個具有value屬性的對象。訪問和修改數據時需要通過.value，在模板中使用時無需.value。例如：

import { ref } from 'vue';
const count = ref(0);
console.log(count.value);
count.value++;

reactive用于創建一個響應式對象，直接返回響應式的對象，適用于對象和數組類型數據，對對象內部屬性的訪問和修改無需特殊操作。例如：

import { reactive } from 'vue';
const state = reactive({ name: '張三', age: 20 });
console.log(state.name);
state.age++;

如果要將一個對象作為響應式數據且需要深度響應式，優先使用reactive；如果是基本數據類型或者需要對對象進行特殊包裝（如保持引用一致性等場景），可使用ref 。

14. 在Vue 3中如何使用TypeScript？

Vue 3對TypeScript提供了更好的支持。首先，創建Vue 3項目時可選擇集成TypeScript的模板。在項目中，可在Vue組件內使用TypeScript編寫代碼。定義組件時，可使用類型注解明確props、data、methods等的類型。例如：

<script lang="ts">
import { defineComponent } from 'vue';
interface Props {message: string;
}
export default defineComponent({props: {message: {type: String,required: true}} as Props,setup(props) {const count = ref(0);const increment = () => {count.value++;};return {count,increment};}
});
</script>

還可利用TypeScript的類型推斷功能，在編寫邏輯時獲得更準確的類型提示，減少類型相關錯誤，提高代碼的可維護性和健壯性 。

15. Vue 3中script setup的實現原理是什么？有什么特點？

script setup本質是setup()函數的語法糖。vue - loader在編譯期間會把script setup內的代碼編譯成setup()函數，把defineExpose()內指定的變量編譯為setup()函數的返回值。特點如下：簡化了組合式API的寫法，屬性和方法無需顯式返回即可在模板中直接使用。引入組件時會自動注冊，無需通過components選項手動注冊。使用defineProps接收父組件傳遞的值，useAttrs獲取屬性，useSlots獲取插槽，defineEmits獲取自定義事件。默認不會對外暴露任何屬性，若有需要可使用defineExpose 。例如：

<script setup lang="ts">
import { defineProps, defineEmits } from 'vue';
const props = defineProps({title: String
});
const emits = defineEmits(['close']);
const handleClose = () => {emits('close');
};
</script>
<template><div>{{ title }}</div><button @click="handleClose">關閉</button>
</template>

這種寫法使代碼更簡潔，提高了開發效率 。

二、120道面試題目錄列表

文章序號	vue3面試題120道
1	vue3 面試題及詳細答案（01 - 15）
2	vue3 面試題及詳細答案（16 - 30）
3	vue3 面試題及詳細答案（31 - 45）
4	vue3 面試題及詳細答案（46 - 60）
5	vue3 面試題及詳細答案（61 - 75）
6	vue3 面試題及詳細答案（76 - 90）
7	vue3 面試題及詳細答案（91 - 105）
8	vue3 面試題及詳細答案（106 - 120）