背熟前端面试题，反手拷打面试官！（2025持续更新···）

“面试造火箭，工作拧螺丝”——这是很多前端求职者的共鸣。但这些“难题”，正是企业筛选人才的核心标尺。所以我在这里总结出25年的常见前端面试题。

JavaScript

1、js中=、==、===的区别

在 JavaScript 中，=、==、=== 是三种不同的运算符，各自的作用和规则差异很大，核心区别在于赋值、松散相等（弱类型比较） 、严格相等（强类型比较） ，下面详细拆解：

“=” 赋值运算符：

作用：用于给变量赋值，而非比较。它将右侧的值赋给左侧的变量。

“==”相等运算符（松散比较）：

作用：用于比较两个值是否 “相等”，会进行隐式类型转换，将两个值转换为同一类型后再比较。

核心规则：

1. 如果两个值类型相同，直接比较值是否相等（类似===）。

2. 如果类型不同，先尝试类型转换，再比较转换后的值：

   • 数值与字符串比较：字符串转数值（如123 == "123" → 123 == 123 → true）。
   • 布尔值与其他类型比较：布尔值转数值（true→1，false→0，如true == 1 → true，false == 0 → true）。
   • null和undefined比较：互相相等（null == undefined → true），但与其他值比较均为false。
   • 对象与原始值比较：对象转原始值（调用valueOf()或toString()）后再比较。

“===”严格相等运算符（严格比较）：

作用：用于比较两个值是否 “严格相等”，不进行隐式类型转换，只有当类型和值都完全相同时，才返回true。

核心规则：

1. 先判断类型：如果类型不同，直接返回false。

2. 类型相同后，再比较值：

   • 数值：值相等（注意NaN不等于任何值，包括自身；+0 === -0 → true）。
   • 字符串：每个字符的编码都相同。
   • 布尔值：true和true、false和false相等。
   • 对象 / 数组 / 函数：引用地址相同（即指向同一个内存地址）才相等。
   • null和undefined：只有自身与自身相等（null === null → true，undefined === undefined → true）。

VUE

1、vue的生命周期

指的是vue对象从创建到销毁的过程。

Vue中的生命周期本质上就是按顺序固定执行一个个的钩子函数，我们开发者可以在每个函数中写入特定代码来实现我们需要的功能

例如我们常用的ajax请求通常就放在created或者mounted中

vue2的生命周期从分类上来看有如下几种情况：

1. 组件创建和挂载相关的钩子函数有

• beforeCreate
• created
• beforeMount
• mounted

2. 组件更新相关的钩子函数有

• beforeUpdate
• updated

3. 组件销毁相关的钩子函数有

• beforeDestroy
• destroyed

【以下如果能回答出来是超过面试官预期的，更加优秀】

1. 还有一个组件缓存激活相关的钩子函数是：activated和deactivated，这两个要配合keep-alive 缓存的组件一起使用
2. vue3总体来说什么周期执行顺序是一样的，不同点在于beforeCreate和created都被setup函数替代了

2、vue2和vue3的区别

Vue 2 和 Vue 3 是 Vue 框架的两个主要版本，Vue 3 作为 Vue 2 的重写版本，在响应式系统、API 设计、性能、生态、兼容等方面都有显著升级，同时兼顾了对 Vue 2 的部分兼容。以下从核心维度详细对比两者的区别：

对比维度	Vue2 特性	Vue3 特性
响应式系统	基于 Object.defineProperty 实现，存在属性监听局限性	基于 Proxy + Reflect 实现，支持全场景响应式
核心 API 风格	以选项式 API为主，逻辑按选项分散	选项式 API 兼容 + 组合式 API，按功能聚合逻辑
性能表现	虚拟 DOM 全量对比，初始化及更新性能一般，打包体积较大	虚拟 DOM 优化+静态提升，启动/更新更快，支持按需打包体积更小
生态与工具链	Vue CLI（Webpack）+ Vuex，对 TS 支持薄弱	Vite（推荐）+ Pinia，原生支持 TS，新增 Teleport 等组件
浏览器兼容性	支持 IE11 及现代浏览器，兼容旧环境能力强	放弃 IE11 支持，专注现代浏览器（Chrome/Firefox 等）

3、vue的常用指令有哪些？

vue常见的指令有‘v-for’、‘v-if/v-show’、‘v-bind’、‘v-model’和‘v-on’。

1、v-for： 用于渲染列表，循环遍历容器中的元素或对象的属性

2、v-if/v-show： 用于控制元素的显示与隐藏的。其中

• v-if： 会移除dom或组件树，开销大，适用于不频繁切换的场景
• v-show： 通过css决定显示或者隐藏节点，适用于多次切换的场景

3、v-bind： 用于动态的为标签绑定指定值

4、v-model： 用于表单元素，建立双向的数据绑定，可以更方便的获取或设置表单数据

5、v-on： 为HTML标签指定事件

4、v-if和v-show的区别

如上题3-2即可

v-if/v-show： 用于控制元素的显示与隐藏的。其中

• v-if： 会移除dom或组件树，开销大，适用于不频繁切换的场景
• v-show： 通过css决定显示或者隐藏节点，适用于多次切换的场景