2025-2026 大厂 Vue2Vue3 高频面试题 Top100

字节 / 阿里前端上岸神器！2025-2026 大厂 Vue2/Vue3 高频面试题 Top100（源码级解析）

阅前须知

• 数据来源：全网真实大厂面经 | CSDN / 掘金 / 牛客网 2025.1-2026.5 高频题统计
• 覆盖企业：字节、阿里、腾讯、华为、美团、京东、百度
• 适用人群：准备春招 / 秋招 / 跳槽晋级的前端开发者
• 学习建议：不要死记硬背，原理＞答案，理解＞模板

---

文档说明

本套题库为 2025-2026 大厂前端面试高频核心题，全部来自真实面试现场复盘，剔除老旧题目、培训机构模拟题。

每题包含：题干 → 面试出处 → 参考答案 → 深度解析 → 代码示例，对标一线大厂评分标准，可直接用于面试突击、复习总结、博客发布。

高频面试题（1-100）

第1题：Vue2 响应式原理及缺陷？

面试出处：字节跳动 2026-03、阿里 2026-02、美团 2025-11

参考答案 ：

Vue2响应式核心依托Object.defineProperty方法，对数据对象的属性进行劫持拦截，结合Dep依赖收集器与Watcher视图监听器，搭配发布订阅设计模式实现数据驱动视图更新。

1. 组件初始化阶段，递归遍历data内所有层级属性，为每一个属性单独添加getter、setter访问器；
2. 页面渲染读取数据时，触发getter函数，此时Dep会收集当前依赖该数据的Watcher观察者；
3. 当业务代码修改数据值时，触发setter函数，Dep统一通知所有收集到的Watcher，执行视图重新渲染逻辑。

存在四大核心缺陷：

1. 无法监听对象后续新增、删除的属性，新增属性不会具备响应式能力；
2. 不能监听数组通过下标直接修改元素、修改数组length长度的操作；
3. 初始化采用全量递归劫持，层级深、体量庞大的数据会拉高页面初始化性能消耗；
4. 仅能劫持对象已定义属性，无法对整对象做统一拦截处理。

原理解析 ：

Vue2采用属性级别的数据劫持方案，每一个属性独立绑定监听逻辑。Object.defineProperty的API特性决定了它只能作用于单个已知属性，天然存在监听盲区。递归遍历初始化的机制，面对复杂嵌套数据会产生不必要的性能损耗，这也是Vue3更换响应式底层API的核心原因。针对缺陷框架内置重写7个数组常用变更方法，同时提供$set接口弥补属性新增监听问题。

代码示例：

// 简易模拟Vue2响应式底层逻辑
class Dep {
  constructor() {
    this.watchers = [];
  }
  // 收集依赖
  depend() {
    if (targetWatcher) {
      this.watchers.push(targetWatcher);
    }
  }
  // 通知更新
  notify() {
    this.watchers.forEach(watcher => watcher.update());
  }
}

class Watcher {
  constructor(fn) {
    this.updateFn = fn;
  }
  update() {
    this.updateFn();
  }
}

let targetWatcher = null;
function defineReactive(obj, key, val) {
  const dep = new Dep();
  Object.defineProperty(obj, key, {
    get() {
      dep.depend();
      return val;
    },
    set(newVal) {
      if (newVal === val) return;
      val = newVal;
      dep.notify();
    }
  })
}

// 测试调用
const data = { name: "Vue2" };
defineReactive(data, "name", data.name);
targetWatcher = new Watcher(() => console.log("视图更新：", data.name));
data.name = "响应式变更";

第2题：Vue3 响应式原理？为什么用 Proxy 不用 Object.defineProperty？

面试出处 ：腾讯 2026-04、华为 2026-01、阿里 2025-12
参考答案 ：

Vue3放弃Vue2的属性劫持方案，采用ES6原生Proxy代理整个目标对象，搭配Reflect反射API完成数据拦截、依赖收集与视图更新，同时引入懒代理机制优化性能。

1. Proxy可以一次性拦截对象13类操作行为，包含属性读取、赋值、删除、数组索引修改、长度变更等；
2. 借助Reflect替代直接操作对象属性，保证this指向准确性，规避属性操作异常；
3. 采用懒代理策略，初始化不会递归遍历所有属性，仅在属性被访问时才创建代理对象；
4. 同样沿用Dep、Watcher依赖收集体系，数据变动后触发视图更新。

舍弃Object.defineProperty选择Proxy核心原因：

1. 监听范围更广，支持属性新增删除、数组下标修改，彻底解决Vue2响应式盲区；
2. 代理层级优化，以整个对象为单位监听，无需逐个属性绑定逻辑；
3. 懒代理减少无效初始化开销，大数据场景性能优势明显；
4. API可拦截行为丰富，扩展性更强，适配复杂数据场景。

原理解析 ：

二者本质是单属性劫持与全对象代理的区别。Object.defineProperty受原生API限制，存在无法弥补的监听缺陷，且初始化性能损耗不可忽视。Proxy从对象整体层面做拦截，原生支持各类数据变更操作，结合懒代理机制，既补齐功能短板，又大幅优化页面初始化、数据更新的运行效率，完美适配Vue3大型项目开发场景。

代码示例：

// Vue3响应式简易模拟
const targetMap = new WeakMap();
let activeEffect = null;

// 依赖收集
function track(target, key) {
  if (!activeEffect) return;
  let depsMap = targetMap.get(target);
  if (!depsMap) targetMap.set(target, (depsMap = new Map()));
  let deps = depsMap.get(key);
  if (!deps) depsMap.set(key, (deps = new Set()));
  deps.add(activeEffect);
}

// 触发更新
function trigger(target, key) {
  const depsMap = targetMap.get(target);
  if (!depsMap) return;
  const deps = depsMap.get(key);
  deps && deps.forEach(effect => effect());
}

// 创建响应式对象
function reactive(obj) {
  return new Proxy(obj, {
    get(target, key, receiver) {
      track(target, key);
      return Reflect.get(target, key, receiver);
    },
    set(target, key, value, receiver) {
      const oldVal = Reflect.get(target, key, receiver);
      const result = Reflect.set(target, key, value, receiver);
      if (oldVal !== value) {
        trigger(target, key);
      }
      return result;
    },
    deleteProperty(target, key) {
      const hasKey = Reflect.has(target, key);
      const result = Reflect.deleteProperty(target, key);
      if (hasKey && result) {
        trigger(target, key);
      }
      return result;
    }
  })
}

// 测试使用
const state = reactive({ count: 1 });
activeEffect = () => console.log("页面渲染数值：", state.count);
state.count = 10;
state.name = "Vue3";

第3题：Vue2与Vue3响应式的本质区别？

面试出处 ：字节 2026-05、美团 2026-03、百度 2025-10
参考答案：

1. 底层API差异：Vue2基于Object.defineProperty劫持单个属性；Vue3采用Proxy代理完整对象，搭配Reflect完成属性操作。
2. 数据监听范围：Vue2仅能监听初始化已定义的属性，无法捕获新增、删除属性与数组下标修改；Vue3支持所有属性操作、数组变更、对象增减行为。
3. 初始化机制：Vue2全局递归劫持所有嵌套属性，无论是否使用都会创建监听；Vue3采用懒代理，仅访问属性时才生成代理实例。
4. 性能表现：Vue2复杂嵌套数据初始化耗时久，内存占用偏高；Vue3减少无效监听，初始化与更新效率全面提升。
5. 拓展性：Vue2API功能固定，无法拓展监听行为；Vue3可拦截十余种对象操作，适配更多业务场景。

原理解析 ：

核心差异是监听粒度与底层架构的革新。Vue2为属性级监听，架构先天存在功能漏洞，只能通过额外API弥补缺陷；Vue3改为对象级监听，从底层解决历史问题。懒代理设计规避无用性能消耗，整体架构兼顾功能完整性与运行高效性，更适配现代化前端复杂业务开发。

第4题：v-if 和 v-show 区别与使用场景？

面试出处 ：阿里 2026-04、腾讯 2026-02、京东 2025-11
参考答案：

1. 实现原理

   v-if属于真实条件渲染，条件表达式为false时，直接将对应DOM节点从页面销毁；条件切换为true时，重新创建、挂载DOM结构。

   v-show属于样式控制显隐，无论条件真假，DOM节点始终存在页面中，仅通过切换display CSS属性实现展示与隐藏。

2. 性能开销

   v-if初始渲染开销低，无无效DOM创建；频繁切换状态时，销毁重建会产生高额性能消耗。

   v-show首次加载必须完成DOM渲染，初始开销偏高；状态切换仅修改样式，损耗极小。

3. 指令特性

   v-if支持多分支判断v-else、v-else-if，可结合模板标签拆分结构；内部组件生命周期会随节点销毁重建完整执行。

   v-show不支持分支语法，组件状态不会随显隐改变，缓存状态数据。

4. 适用场景

   页面元素极少切换显示隐藏、初始化大概率隐藏的内容，优先使用v-if；

   弹窗、标签页、悬浮提示等高频反复切换的模块，优先选用v-show。

原理解析 ：

两者核心取舍在于渲染销毁成本和切换成本的权衡。v-if偏向惰性渲染，减少初始页面资源占用；v-show常驻DOM结构，牺牲初始性能换取快速切换体验。实际开发根据元素切换频次选型，能够有效优化页面整体流畅度。

代码示例：

<!-- 低频切换、初始隐藏使用v-if -->
<div v-if="isLogin">个人中心页面</div>

<!-- 高频弹窗切换使用v-show -->
<div v-show="showDialog" class="dialog-box">
  弹窗表单内容
</div>

第5题：Vue3 Composition API 相比 Options API 有什么优势？

面试出处 ：字节 2026-05、华为 2026-03、美团 2025-12
参考答案：

1. 业务逻辑复用性极强

   Options API逻辑分散在data、methods、computed等配置项，跨组件复用难度大；Composition API可将同一业务功能封装为独立组合函数，任意组件直接引入调用，彻底解决逻辑复用难题。

2. 代码组织结构更合理

   Options API按照语法选项拆分代码，同一功能代码割裂分散，大型组件维护难度高；Composition API以业务模块为聚合标准，相关数据、方法、生命周期编写在一起，可读性与维护性大幅提升。

3. 原生适配TypeScript

   选项式API对象结构推导存在局限，类型提示容易出错；组合式API基于函数式写法，天然支持类型校验与自动推导，适配大型类型严谨项目。

4. 打包体积优化

   组合式API支持按需导入内置方法，配合Tree-shaking打包机制，未使用的API会自动剔除，有效缩减项目打包产物体积。

5. 代码灵活度更高

   不受固定选项格式约束，可根据业务自由组织代码顺序，适配复杂多变的业务开发场景。

与 Options API 对比：

Options API 在复杂组件中逻辑分散； Composition API 逻辑内聚，TS 类型更友好，是 Vue3 官方主推写法。

原理解析 ：

Options API入门简单、结构规整，适合小型简易项目，但在中大型项目中暴露出复用弱、维护难、类型支持差等问题。Composition API贴合函数式编程思想，重构代码组织模式，针对性解决老语法痛点，是Vue3适配企业级复杂项目的核心升级。

代码示例：

// Options API 写法 逻辑分散
export default {
  data() {
    return { count: 0 };
  },
  methods: {
    addCount() {
      this.count++;
    }
  },
  mounted() {
    console.log("组件挂载", this.count);
  }
}

// Composition API 写法 逻辑聚合
import { ref, onMounted } from 'vue';
export default {
  setup() {
    // 计数相关逻辑统一存放
    const count = ref(0);
    const addCount = () => {
      count.value++;
    };
    onMounted(() => {
      console.log("组件挂载", count.value);
    });
    return { count, addCount };
  }
};

第6题：Vue常用组件通信方式汇总

面试出处 ：腾讯 2026-04、阿里 2026-01、百度 2025-10
参考答案 ：

根据组件层级关系，分为四类通信场景，各自适配不同业务场景：

1. 父子组件通信

   props/emit：父组件通过props向下传递数据，子组件触发自定义事件向上回调传参，最基础常用方式；ref/emit：父组件通过props向下传递数据，子组件触发自定义事件向上回调传参，最基础常用方式； ref/emit：父组件通过props向下传递数据，子组件触发自定义事件向上回调传参，最基础常用方式；ref/parent/$children：ref获取子组件实例直接调用属性方法，父级实例反向操作；

   provide/inject：顶层组件向下注入数据，后代任意层级直接获取；

2. 兄弟组件通信

   Vue2事件总线EventBus、Vue3 mitt工具，全局事件订阅发布中转数据；

   Vuex/Pinia全局状态库，统一存取公共数据实现互通。

3. 跨层级深层组件

   优先使用provide/inject简易传值，复杂业务数据采用全局状态管理。

4. 跨组件属性透传
   attrs接收父组件非props属性，attrs接收父组件非props属性，attrs接收父组件非props属性，listeners接收父组件事件，批量向下逐层传递。

原理解析 ：

组件通信选型遵循就近简易原则。简单父子传参首选props事件回调；多层级简易数据用provide/inject；兄弟、跨组件高频共享数据统一交由状态库管理；批量属性透传使用内置属性，减少冗余代码。

代码示例

// 1. props父子传参 父组件
<Child :msg="parentMsg" @child-event="handleChild"></Child>
// 子组件接收
props: { msg: String }

// 2. mitt兄弟通信 Vue3
import mitt from 'mitt';
const emitter = mitt();
// 发送方
emitter.emit('send-data', 100);
// 接收方
emitter.on('send-data', val => console.log(val));

第7题：Vue3 diff 算法相比 Vue2 做了哪些优化？

面试出处：字节 2026-05、华为 2026-02、美团 2025-11

参考答案：

1. PatchFlag 静态标记 编译阶段给动态节点打上标记，diff 时只比对动态绑定的部分，完全跳过静态节点，比对量大幅减少。
2. Block Tree 机制 将模板编译成扁平化节点树，动态节点被单独提取，diff 不再需要递归全树，效率显著提升。
3. 最长递增子序列 计算节点复用序列，最小化 DOM 移动次数，比 Vue2 双端比对更高效。
4. 静态提升 静态节点只创建一次，不参与重复渲染，减少内存与渲染开销。

原理解析 ： Vue3 最核心升级是 编译时优化，通过 PatchFlag + Block Tree 把虚拟 DOM 从 "全量递归比对" 变成 "只比对动态部分"，时间复杂度从 O (n) 优化到接近 O (动态节点数)，是 Vue3 渲染性能大幅提升的关键。

代码示例

<!-- 静态内容不参与diff -->
<div>静态文字</div>
<!-- 动态内容被打上PatchFlag -->
<div :class="cls">{{ text }}</div>

第8题：简述Vue完整生命周期及各钩子应用场景

面试出处 ：阿里 2026-04、腾讯 2026-03、京东 2025-12
参考答案：

1. beforeCreate：组件实例刚初始化，数据、方法均未挂载，无法访问data和methods，极少业务使用。
2. created：实例创建完成，响应式数据、组件方法初始化完毕。常用场景：页面初始化接口请求、初始数据赋值。
3. beforeMount：模板编译解析完成，DOM尚未挂载到页面，依旧无法操作真实DOM元素。
4. mounted：DOM结构成功挂载页面，页面视图渲染完成。常用场景：DOM节点操作、获取元素DOM、第三方DOM类插件初始化。
5. beforeUpdate：数据发生变更，页面重新渲染更新前触发，可获取更新前DOM状态。
6. updated：数据驱动视图重新渲染完成，可操作最新DOM结构。
7. beforeUnmount：组件开始销毁，实例依旧可用。常用场景：清除定时器、解绑全局事件、终止未完成接口请求，规避内存泄漏。
8. unmounted：组件实例与DOM完全销毁，所有功能失效。

原理解析 ：

生命周期钩子串联组件从创建、渲染、更新到销毁的全流程，是控制组件业务逻辑执行时机的核心。依据钩子阶段特性分配业务代码，既能保证功能正常运行，也能有效规避内存泄漏、数据错乱、DOM获取失败等常见问题。

代码示例

export default {
  created() {
    // 初始化请求接口数据
    this.getUserInfo();
  },
  mounted() {
    // 操作DOM、初始化插件
    this.$refs.box.style.color = "red";
  },
  beforeUnmount() {
    // 清理定时器
    clearInterval(this.timer);
  },
  methods: {
    getUserInfo(){}
  }
}

第9题：v-for循环中key的作用与使用规范

面试出处 ：字节 2026-05、美团 2026-02、百度 2025-10
参考答案 ：

key是虚拟DOM节点唯一身份标识，在diff算法节点比对环节起到核心匹配作用。

1. 比对原理：新旧虚拟DOM对比时，通过key判断节点是否为同一节点，匹配成功则复用原有DOM结构，仅更新内部数据；匹配失败则销毁重建节点。
2. 核心作用：精准区分不同列表节点，避免框架默认就地复用机制引发视图与数据错位、状态错乱问题。

使用规范：

1. 优先使用业务唯一id、主键作为key，匹配精度最高，无渲染异常；
2. 严禁直接使用数组索引index充当key，数组删除、排序、插入元素后索引重新排布，极易出现勾选状态、表单数据错乱bug；
3. key值必须保证同层级列表内唯一，不可重复。

原理解析 ：

无key时diff算法默认按照数组索引顺序就地复用DOM，列表结构变动后节点对应关系错乱。唯一key建立稳定节点映射关系，保证数据变更后视图精准更新，是列表渲染必不可少的规范写法。

代码示例

<!-- 标准规范写法 唯一主键key -->
<div v-for="item in goodsList" :key="item.id">
  <p>{{ item.name }}</p>
</div>

<!-- 不规范写法 索引key易出错 -->
<div v-for="(item,index) in goodsList" :key="index"></div>

第10题：Vue3中ref与reactive的区别与使用场景

面试出处 ：腾讯 2026-04、华为 2026-03、阿里 2025-12
参考答案：

1. 适配数据类型

   ref：专门处理字符串、数字、布尔、null、undefined等基础数据类型；也可接收对象数组引用类型。

   reactive：仅适配对象、数组等引用数据类型，无法单独处理基础类型。

2. 内部实现原理

   ref底层依旧调用reactive，将基础值包装为单层对象{value: 原值}，再做代理监听；

   reactive直接对传入引用类型做Proxy代理，无额外包装层级。

3. 取值赋值写法

   脚本逻辑中，ref定义数据必须通过.value属性读写修改；

   reactive直接访问属性即可操作数据，无需额外标识。

   模板渲染阶段，ref自动解包，页面书写无需添加.value。

4. 使用场景

   简单单个数值、状态标记使用ref；

   表单对象、列表数据、多层级结构体统一使用reactive。

原理解析 ：

Proxy仅能代理对象类型，无法监听基础数据。ref通过包装对象的方式，让基础类型具备响应式能力，补齐数据类型适配短板。两种API底层互通，根据数据结构复杂度选择对应写法即可。

代码示例

import { ref, reactive } from 'vue';
// 基础类型使用ref
const pageNum = ref(1);
// 引用类型使用reactive
const userForm = reactive({
  username: "test",
  age: 24
});

// 脚本内操作
pageNum.value = 2;
userForm.age = 25;

第11题：Vue2中$set原理与使用场景

面试出处 ：字节2026-02、阿里2026-01
参考答案 ：

Vue2响应式无法自动监听对象新增属性、数组下标直接赋值操作，新增数据不会触发视图更新。$set是框架提供的原生API，手动为数据添加响应式监听能力。

使用场景分为两类：

1. 给已初始化的响应式对象动态添加新属性，保证新增属性可驱动视图变化；
2. 通过数组下标修改指定位置元素、修改数组length长度，补齐数组监听盲区。

底层执行原理：

1. 判断目标数据类型，区分普通对象与数组；
2. 数组场景内部调用重写后的splice方法，触发响应式更新；
3. 对象场景调用defineReactive方法，手动为新增属性添加getter、setter劫持；
4. 主动触发依赖通知，更新页面视图。

原理解析 ：

Vue2初始化仅劫持已有属性，新增属性脱离监听体系。$set本质是手动补全响应式劫持逻辑，调用底层核心监听方法，让新增数据纳入响应式管理，从而正常更新页面。

代码示例

export default {
  data() {
    return {
      user: { name: "张三" },
      arr: [1,2,3]
    }
  },
  methods: {
    addProp() {
      // 动态新增对象属性
      this.$set(this.user, "age", 22);
      // 通过下标修改数组元素
      this.$set(this.arr, 0, 100);
    }
  }
}

第12题：Vue组件中computed计算属性与method方法区别

面试出处 ：美团2026-04、腾讯2026-01
参考答案：

1. 缓存机制

   computed具备结果缓存特性，内部依赖数据不发生改变时，多次访问计算属性只会执行一次计算逻辑，直接读取缓存结果；

   methods无任何缓存，每一次触发调用，函数都会完整重新执行一遍。

2. 调用书写形式

   计算属性语法等同于普通变量，模板中直接插值使用，无需函数括号调用；

   方法必须以函数调用形式执行，书写格式区分明显。

3. 数据依赖与触发时机

   computed监听内部绑定的依赖数据，依赖变化自动重新计算；

   methods只能主动手动触发，数据变化不会自动执行函数。

4. 业务适用场景

   页面数据拼接、数值运算、状态筛选等计算类业务，优先使用computed；

   点击事件、异步操作、一次性触发动作，使用methods方法。

原理解析 ：

二者核心差异在于缓存与触发模式。计算属性依托响应式依赖自动执行，缓存机制减少重复运算开销；方法被动触发，灵活性更高，根据业务执行特性合理选型，优化页面运算性能。

代码示例

<template>
  <div>
    <p>总和：{{ totalNum }}</p>
    <button @click="getSum">计算</button>
  </div>
</template>

<script>
export default {
  data() {
    return { num1: 10, num2: 20 }
  },
  computed: {
    totalNum() {
      console.log("计算属性执行");
      return this.num1 + this.num2;
    }
  },
  methods: {
    getSum() {
      console.log("方法执行");
      return this.num1 + this.num2;
    }
  }
}
</script>

面试官评分标准（掌握即可高分）

1. 能答出用法 = 60 分（基础）
2. 能讲清原理 = 80 分（进阶）
3. 能说出优缺点、场景、避坑 = 90 分（大厂水准）
4. 能结合项目、手写原理 = 100 分（SP 级）

本文为 2025-2026 大厂 Vue 高频真题合集，持续更新最新面试题。

收藏 + 点赞，需要完整 PDF 版、详细完整MD版可在顶部关联资源查看！