首页
/ 正文

vue3 面试题（建议收藏）

更新时间: 2025-03-17 22:02:53

💡一则或许对你有用的小广告

欢迎加入小哈的星球 ，你将获得：专属的项目实战 / 1v1 提问 / Java 学习路线 / 学习打卡 / 每月赠书 / 社群讨论

新项目:《从零手撸：仿小红书（微服务架构）》 正在持续爆肝中，基于 Spring Cloud Alibaba + Spring Boot 3.x + JDK 17...，点击查看项目介绍 ;

《从零手撸：前后端分离博客项目（全栈开发）》 2 期已完结，演示链接： http://116.62.199.48/ ;

截止目前，星球内专栏累计输出 82w+ 字，讲解图 3441+ 张，还在持续爆肝中.. 后续还会上新更多项目，目标是将 Java 领域典型的项目都整一波，如秒杀系统, 在线商城, IM 即时通讯，权限管理，Spring Cloud Alibaba 微服务等等，已有 2900+ 小伙伴加入学习，欢迎点击围观

随着前端技术生态的快速发展，Vue3 作为 Vue.js 的重大升级版本，凭借其 Composition API、TypeScript 原生支持、响应式系统优化等特性，已成为企业招聘的热门技术栈。对于编程初学者和中级开发者而言，掌握 Vue3 的核心面试题不仅是求职的敲门砖，更是深入理解现代前端框架设计思想的关键。本文将系统梳理 Vue3 面试题中的高频考点，通过案例解析和代码示例，帮助读者构建清晰的知识脉络，并提升实际应用能力。

一、Vue3 核心概念与响应式系统

1.1 Vue3 的核心设计思想

Vue3 的设计围绕“更高效、更灵活、更易维护”的目标展开。其核心改进包括：

Proxy 替代 Object.defineProperty：Vue3 使用 ES6 的 Proxy 对象实现响应式，解决了 Vue2 中无法检测数组索引和对象新增属性的缺陷。
Composition API：通过函数式编程的方式组织代码逻辑，提升代码的复用性和可读性。
Tree-Shaking 友好性：模块化设计允许按需引入，减少打包体积。

形象比喻：
可以将 Vue3 的响应式系统想象为一个“魔法盒子”，当数据发生变化时，它能自动感知并更新视图，而开发者只需关注业务逻辑的实现。

1.2 响应式原理详解

Vue3 的响应式系统通过 reactive() 或 ref() 将数据包装成响应式对象，其底层依赖 Proxy 的 get 和 set 陷阱。

代码示例：

import { reactive } from 'vue';

const state = reactive({
  count: 0
});

// 当 state.count 改变时，视图自动更新
state.count += 1;

对比 Vue2 的 Object.defineProperty：
Vue2 使用 Object.defineProperty 逐个定义对象属性的 getter 和 setter，但存在以下限制：

无法检测对象新增属性；
无法响应数组索引的直接修改（如 arr[0] = 'new'）。

二、组件通信与状态管理

2.1 父子组件通信

父子组件通信是 Vue 开发的基石，主要通过 props 和 事件 实现：

父传子：通过 props 将数据传递给子组件；
子传父：子组件通过 $emit 触发事件，父组件通过 v-on 监听并处理。

案例场景：
假设有一个父组件向子组件传递用户信息，并在子组件中触发修改操作：

父组件代码：

<template>
  <ChildComponent :user="user" @update-user="handleUpdate" />
</template>

<script setup>
import { ref } from 'vue';
const user = ref({ name: 'Alice' });

const handleUpdate = (newName) => {
  user.value.name = newName;
};
</script>

子组件代码：

<template>
  <input v-model="localUser.name" @input="$emit('update-user', localUser.name)" />
</template>

<script setup>
const props = defineProps({
  user: Object
});

const localUser = ref({ ...props.user });
</script>

2.2 跨级组件通信与状态管理

对于非父子关系的组件通信，推荐使用以下方案：

Event Bus：通过 Vue 实例或第三方库（如mitt）传递事件；
Vuex/Pinia：集中式状态管理工具，适合复杂应用。

Pinia 示例：

// store.js
import { defineStore } from 'pinia';

export const useUserStore = defineStore('user', {
  state: () => ({ name: 'John' }),
  actions: {
    updateName(newName) {
      this.name = newName;
    }
  }
});

三、Composition API 深度解析

3.1 setup 函数与生命周期

Vue3 的 setup() 函数是 Composition API 的入口，它替代了 Vue2 的 beforeCreate 和 created 生命周期钩子。在 setup() 中，可以通过 ref、reactive 等 API 直接访问响应式数据。

代码对比：

// Vue2 的 Options API
export default {
  data() {
    return { count: 0 };
  },
  created() {
    console.log(this.count);
  }
};

// Vue3 的 Composition API
<script setup>
import { ref } from 'vue';

const count = ref(0);
console.log(count.value); // 在 setup 中直接执行
</script>

3.2 常用 API 与代码复用

Composition API 的核心是通过函数组织逻辑，提升代码复用性。例如，封装一个计时器函数：

复用函数示例：

// useTimer.js
import { ref } from 'vue';

export function useTimer() {
  const timer = ref(0);
  const start = () => {
    timer.value = setInterval(() => {
      // 执行逻辑
    }, 1000);
  };
  const stop = () => clearInterval(timer.value);

  return { timer, start, stop };
}

在组件中使用：

<script setup>
import { useTimer } from './useTimer';

const { timer, start, stop } = useTimer();
</script>

四、性能优化与高频面试题

4.1 懒加载与 KeepAlive

Vue3 的 <keep-alive> 组件可以缓存组件实例，避免重复渲染。结合 v-if 和 v-show 的差异，面试中常被问及：

v-if：条件渲染，切换时销毁并重新创建组件；
v-show：通过 CSS display 属性切换，保留组件实例。

KeepAlive 案例：

<template>
  <keep-alive>
    <component :is="currentComponent" />
  </keep-alive>
</template>

4.2 高频面试题解析

Q1：为什么 Vue3 选择 Proxy 而非 Object.defineProperty？

响应式全面性：Proxy 能捕获对象所有属性的访问和修改，包括新增属性和数组索引；
性能优化：Proxy 的遍历性能更高，尤其在处理大型对象时优势明显。

Q2：Vue3 的生命周期钩子有哪些变化？

Vue3 将 beforeDestroy 改为 beforeUnmount，destroyed 改为 unmounted，其他钩子命名规则保持一致。

Q3：如何实现跨组件数据共享？

小规模场景：使用 Event Bus 或 Props + Events；
大型应用：采用 Pinia 或 Vuex 进行集中式状态管理。

五、工具与生态扩展

5.1 TypeScript 支持

Vue3 原生支持 TypeScript，开发者可通过 defineProps 和 defineEmits 明确组件的类型约束：

<script setup lang="ts">
import type { User } from '@/types';

const props = defineProps<{
  user: User;
}>();

const emit = defineEmits<{
  (e: 'update', newName: string): void;
}>();
</script>

5.2 自定义指令与过渡动画

Vue3 的自定义指令允许开发者封装交互逻辑，例如实现拖拽功能：

app.directive('drag', {
  mounted(el) {
    let startX = 0;
    el.addEventListener('mousedown', (e) => {
      startX = e.clientX - el.offsetLeft;
      document.addEventListener('mousemove', onMove);
    });

    const onMove = (e) => {
      el.style.left = `${e.clientX - startX}px`;
    };

    el.addEventListener('mouseup', () => {
      document.removeEventListener('mousemove', onMove);
    });
  }
});

结论

Vue3 面试题的核心在于对响应式系统、组件通信、Composition API 等关键特性的理解与应用。本文通过案例和代码示例，系统梳理了面试高频考点，并提供了实际开发中的解决方案。对于求职者而言，建议结合项目实践深入掌握 Vue3 的底层机制，并关注其与 TypeScript、状态管理工具的结合使用。掌握这些内容，不仅能应对面试挑战，更能为构建高性能、可维护的前端应用奠定坚实基础。

（全文约 1600 字）

vue3 面试题（建议收藏）

一、Vue3 核心概念与响应式系统

1.1 Vue3 的核心设计思想

1.2 响应式原理详解

二、组件通信与状态管理

2.1 父子组件通信

2.2 跨级组件通信与状态管理

三、Composition API 深度解析

3.1 setup 函数与生命周期

3.2 常用 API 与代码复用

四、性能优化与高频面试题

4.1 懒加载与 KeepAlive

4.2 高频面试题解析

Q1：为什么 Vue3 选择 Proxy 而非 Object.defineProperty？

Q2：Vue3 的生命周期钩子有哪些变化？

Q3：如何实现跨组件数据共享？

五、工具与生态扩展

5.1 TypeScript 支持

5.2 自定义指令与过渡动画

结论

最新发布

Vue3 app.runWithContext() 函数（建议收藏）

Vue3 app.version 属性（一文讲透）

Vue3 app.config 属性（手把手讲解）

Vue3 app.config.errorHandler 属性（保姆级教程）

Vue3 app.config.warnHandler 属性（长文讲解）

Vue3 app.config.performance 属性（超详细）

Vue3 app.config.compilerOptions 属性（千字长文）

Vue3 app.config.globalProperties 属性（保姆级教程）

Vue3 app.config.optionMergeStrategies 属性（千字长文）

Vue3 app.config.idPrefix 属性（保姆级教程）