前端面试题

JavaScript

jQuery

VUE

VUE

一、Vue2 核心类（入门必问）

1. Vue 的核心特性是什么？
   数据驱动（MVVM）：数据变视图自动更，不用手动操作 DOM；
   组件化：页面拆成独立组件，复用性高；
   双向数据绑定：v-model（表单场景）；
   指令系统：v-if、v-for、v-bind 等，简化 DOM 操作；
   虚拟 DOM：减少真实 DOM 操作，提高性能。
2. Vue 响应式原理是什么？
   核心是Object.defineProperty 劫持对象属性：
3. v-if 和 v-show 的区别？
   v-if：动态增删 DOM 元素，惰性渲染（初始不渲染），切换开销大；
   v-show：控制 CSS 的 display，DOM 一直存在，切换开销小；
   场景：频繁切换用 v-show，条件少变用 v-if。
4. v-for 为什么要加 key？
   key 是唯一标识，Vue 根据 key 识别节点，复用 DOM；
   不加 key：Vue 用 “就地更新” 策略，可能导致 DOM 复用错误（比如列表错乱）；
   注意：别用 index 当 key（列表排序 / 增删时 index 会变，仍出错），用唯一 ID。
5. 计算属性（computed）和侦听器（watch）的区别？
   computed：依赖数据缓存，同步计算，适合 “根据多个数据推导一个值”（比如全名 = 姓 + 名）；
   watch：监听单个数据，支持异步，适合 “数据变化做复杂操作”（比如请求接口）；
   核心：computed 有缓存，watch 无缓存；computed 不能异步，watch 可以。
   二、Vue3 新特性类（高频必问）
6. Vue3 相比 Vue2 有哪些核心变化？
   响应式：用 Proxy 替代 Object.defineProperty，能监听数组、新增属性，支持 Map/Set；
   组合式 API（setup）：替代 Options API，逻辑复用更灵活，代码更易维护；
   虚拟 DOM 重写：编译优化，性能提升；
   支持 TS：更好的类型提示；
   体积更小：按需打包，核心体积减少。
7. setup 语法糖的优势？
   不用写 return，变量 / 方法直接用；
   支持

节流,防抖

import axios from 'axios';

// 存储请求记录：key=接口url，value=上次请求时间
const requestRecord = new Map();

// 添加请求拦截器
axios.interceptors.request.use((config) => {
  const { url, method } = config;
  const key = `${method}-${url}`;
  const interval = 2000; // 2秒内同一接口只能请求一次

  // 检查是否频繁请求
  if (requestRecord.has(key)) {
    const lastTime = requestRecord.get(key);
    if (Date.now() - lastTime < interval) {
      return Promise.reject(new Error('请求太频繁，请稍后再试'));
    }
  }

  // 更新请求时间
  requestRecord.set(key, Date.now());
  return config;
}, (error) => {
  return Promise.reject(error);
});

// 示例：调用接口
async function submitData() {
  try {
    await axios.post('/api/submit', { data: 'test' });
  } catch (err) {
    console.error(err.message); // 频繁请求时提示
  }
}