前端高频面试题深度解析（JavaScript + Vue + jQuery）

最新推荐文章于 2026-07-02 09:16:15 发布

原创最新推荐文章于 2026-07-02 09:16:15 发布 · 867 阅读

20 ·

本内容遵循CC 4.0 BY-SA版权协议

GEO检测

前端高频面试题深度解析（JavaScript + Vue + jQuery）

一、JavaScript 核心问题解析

事件冒泡与捕获

机制对比：

graph LR
A[捕获阶段] -->|Window→父元素| B[目标元素]
B -->|子元素→父元素| C[冒泡阶段]

阻止方法：

// 阻止冒泡（常用）
event.stopPropagation();

// 阻止捕获 + 冒泡 + 默认行为（慎用）
event.stopImmediatePropagation();

变量声明对比

特性	var	let	const
作用域	函数级	块级	块级
变量提升	✅	❌	❌
重复声明	✅	❌	❌
暂时性死区	❌	✅	✅
全局属性绑定	✅	❌	❌

// 典型面试陷阱
for (var i = 0; i < 3; i++) {
  setTimeout(() => console.log(i), 100); // 输出3次3
}
for (let j = 0; j < 3; j++) {
  setTimeout(() => console.log(j), 100); // 输出0,1,2
}

二、Vue.js 深度问题解析

v-if vs v-show 核心区别

维度	v-if	v-show
DOM操作	销毁/重建节点	display切换
编译过程	惰性编译	始终编译
性能	高切换成本	高初始渲染成本
适用场景	运行时条件少变	频繁切换

<!-- 源码级原理 -->
<div v-if="show">内容</div>
<!-- 编译为 -->
show ? _c('div',[...]) : _e()

<div v-show="show">内容</div>
<!-- 编译为 -->
_c('div', { directives: [{name:"show", value: show}] })

Vue 3 Teleport 核心价值
- 解决问题：组件嵌套导致的z-index/overflow:hidden样式污染
- 实现原理：
```
<teleport to="body">
  <div class="modal">弹窗内容</div>
</teleport>


<body>
  <div id="app">...</div>
  <div class="modal">弹窗内容</div> 
</body>
```
- 应用场景：
  - 全屏模态框
  - 通知提示框
  - 下拉菜单（避免父容器overflow:hidden裁剪）

三、jQuery 经典问题解析

事件绑定演进史

timeline
    2006年 ： .bind()
    2009年 ： .live() ： 基于document委托
    2011年 ： .delegate() ： 指定委托容器
    2013年+ ： .on() ： 统一API

性能对比：

// 低效（绑定1000个元素）
$('table tr').on('click', handler); 

// 高效（单事件委托）
$('table').on('click', 'tr', handler);

动画队列控制
- .stop()：
  - 立即停止当前动画
  - 队列中动画继续执行
```
$('.box').stop(true, false); // 清除队列，不跳转最终状态
```
- .finish()：
  - 立即完成所有动画
  - 跳转到最终状态
```
$('.box').finish(); // 直接显示动画结束状态
```
- 使用场景：
  - 高频触发的hover动画：.stop(true, true)
  - 页面切换时：.finish()

四、综合原理深度剖析

虚拟DOM Diff算法（Vue/React通用）
- Key的作用：复用相同元素避免重建（类似数据库主键）
- 优化策略：首尾指针快速比对

Promise.all 手写实现

Promise.myAll = (promises) => {
  return new Promise((resolve, reject) => {
    let results = [];
    let completed = 0;
    
    promises.forEach((promise, i) => {
      Promise.resolve(promise) // 处理非Promise值
        .then(res => {
          results[i] = res; // 保持结果顺序
          if (++completed === promises.length) resolve(results);
        })
        .catch(reject); // 任一失败立即结束
    });
    
    if (promises.length === 0) resolve([]); // 空数组处理
  });
};

五、工程化问题解决方案

Vue 性能优化实战

组件级优化：

<!-- 1. 函数式组件 -->
<template functional>
  <div>{{ props.message }}</div>
</template>

<!-- 2. 计算属性缓存 -->
<script>
export default {
  computed: {
    // 避免模板内复杂计算
    filteredList() { /* ... */ } 
  }
}
</script>

项目级优化：

// vite.config.js
export default {
  build: {
    rollupOptions: {
      output: {
        manualChunks: {
          vue: ['vue', 'vue-router'],
          utils: ['lodash', 'dayjs']
        }
      }
    }
  }
}

内存泄漏排查方案

Vue 特定场景：

// 解决方案1：组件销毁前移除事件
beforeUnmount() {
  window.removeEventListener('resize', this.handleResize);
}

// 解决方案2：避免v-if和v-for共用
<div v-for="item in list" :key="item.id">
  <ChildComponent v-if="item.visible" />
</div>