《前后端面试题
》专栏集合了前后端各个知识模块的面试题,包括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>
这种写法使代码更简洁,提高了开发效率 。