当前位置：首页 > news >正文

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

news 2025/7/12 9:41:06

前端高频面试题深度解析（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 经典问题解析

事件绑定演进史

timeline2006年 ： .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>