《前后端面试题》专栏集合了前后端各个知识模块的面试题，包括html，javascript，css，vue，react，java，Openlayers，leaflet，cesium，mapboxGL，threejs，nodejs，mangoDB，MySQL，Linux… 。
文章目录
- 一、本文面试题目录
- 1. Vue 3相比Vue 2有哪些主要改进？
- 2. 什么是Composition API？它有什么优势？
- 3. Vue 3中的响应式系统是如何工作的？
- 4. Proxy与Object.defineProperty相比有什么优势？
- 5. Vue 3中的虚拟DOM优化了哪些方面？
- 6. Tree - shaking在Vue 3中是如何工作的？
- 7. Vue 3中的组件生命周期钩子有哪些变化？
- 8. 如何在Vue 3项目中进行性能优化？
- 9. Vue 3中的Teleport是什么？有什么作用？
- 10. Vue 3中的Suspense是什么？如何使用？
- 11. Vue 3中的Fragment是什么？有什么作用？
- 12. Vue 3中的工程化工具Vite是什么？有什么优势？
- 13. Vue 3的响应式系统中ref和reactive有什么区别？
- 14. 在Vue 3中如何使用TypeScript？
- 15. Vue 3中script setup的实现原理是什么？有什么特点？
- 二、120道面试题目录列表
一、本文面试题目录
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>
这种写法使代码更简洁，提高了开发效率 。
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
