Vue3 面试题及详细答案120道 （1-15 ）

《前后端面试题》专栏集合了前后端各个知识模块的面试题，包括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中进行相应提示 。

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道面试题目录列表