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

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

---

一、JavaScript 核心问题解析

1. 事件冒泡与捕获

   • 机制对比：

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

   • 阻止方法：

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

2. 变量声明对比

   特性	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 深度问题解析

1. v-if vs v-show 核心区别

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

   
   内容
   
   show ? _c('div',[...]) : _e()
   
   内容
   
   _c('div', { directives: [{name:"show", value: show}] })
   

2. Vue 3 Teleport 核心价值

   • 解决问题：组件嵌套导致的z-index/overflow:hidden样式污染
   • 实现原理：

     
       
     弹窗内容
     
     
     
     
       
     ...
       
     弹窗内容
      
     
     

   • 应用场景：
     • 全屏模态框
     • 通知提示框
     • 下拉菜单（避免父容器overflow:hidden裁剪）

---

三、jQuery 经典问题解析

1. 事件绑定演进史

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

   • 性能对比：

     // 低效（绑定1000个元素）
     $('table tr').on('click', handler); 
     
     // 高效（单事件委托）
     $('table').on('click', 'tr', handler);
     

2. 动画队列控制

   • .stop()：
     • 立即停止当前动画
     • 队列中动画继续执行

     $('.box').stop(true, false); // 清除队列，不跳转最终状态
     

   • .finish()：
     • 立即完成所有动画
     • 跳转到最终状态

     $('.box').finish(); // 直接显示动画结束状态
     

   • 使用场景：
     • 高频触发的hover动画：.stop(true, true)
     • 页面切换时：.finish()

---

四、综合原理深度剖析

1. 虚拟DOM Diff算法（Vue/React通用）

   是

   否

   是

   否

   新旧VNode对比

   同层比较

   Key值比对

   直接替换

   Key匹配?

   复用节点

   新建节点

   属性更新
   • Key的作用：复用相同元素避免重建（类似数据库主键）
   • 优化策略：首尾指针快速比对

2. 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([]); // 空数组处理
     });
   };
   

---

五、工程化问题解决方案

1. Vue 性能优化实战

   • 组件级优化：

   • 项目级优化：

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

2. 内存泄漏排查方案

   • 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>
     

   • 通用排查流程：
     1. Chrome DevTools → Memory → Heap snapshot
     2. 操作前后两次快照对比
     3. 检查Detached DOM节点
     4. 定位未释放的事件监听器