2025年3月7日前端面试复盘 | Vue原理与JS数据类型高频考点2025年3月7日前端面试复盘

2025年3月7日前端面试复盘 | Vue原理与JS数据类型高频考点

一、面试问题回顾

1. Vue2的8个生命周期

核心答案：

创建阶段：beforeCreate / created
挂载阶段：beforeMount / mounted
更新阶段：beforeUpdate / updated
销毁阶段：beforeDestroy / destroyed
特殊钩子：activated / deactivated（keep-alive）

记忆技巧：绘制生命周期流程图，标注父子组件执行顺序

2. Vue3生命周期变化

重大更新：

组合式API替代选项式API
生命周期钩子统一添加on前缀：
- setup() 替代 beforeCreate/created
- onBeforeMount / onMounted
- onBeforeUpdate / onUpdated
- onBeforeUnmount / onUnmounted

代码对比示例：

export default {
  created() { /*...*/ },
  mounted() { /*...*/ }
}

// Vue3
import { onMounted } from 'vue'
setup() {
  onMounted(() => { /*...*/ })
}

3. 改变that时this指向问题

高频误解点解析：

that本质是this的引用副本
箭头函数特性：词法作用域绑定
常见修改方式：
- bind/call/apply显式绑定
- 闭包保存上下文
- 箭头函数继承外层this

经典案例：

  name: 'obj',
  print: function() {
    const that = this
    setTimeout(function() {
      console.log(that.name) // 正确访问
      console.log(this.name) // undefined（非严格模式为window）
    }, 100)
  }
}

4. 前端数据类型体系

基础数据类型（7种）：

String / Number / Boolean
Null / Undefined
Symbol（ES6）
BigInt（ES2020）

引用数据类型：

Object（包含Array/Function/Date等）

类型判断技巧：

typeof 检测基础类型（注意null返回object）
instanceof 检测引用类型
Object.prototype.toString.call() 精确判断

5. 原始类型 vs 引用类型

特征	原始类型	引用类型
存储位置	栈内存	堆内存
赋值方式	值拷贝	地址引用
比较方式	值比较	引用比较
可变性	不可变	可变
典型示例	let a = 1	let arr = [1,2]

内存示意图：

a: 0x001     [1,2,3]
b: 0x001     ↑
              arr: 0x001

二、面试反思

准备建议：绘制Vue生命周期执行流程图
易错重点：闭包与this绑定的关系理解
加分技巧：能说出BigInt的应用场景
进阶理解：解释基本类型包装对象机制

三、推荐学习资料

《你不知道的JavaScript（上卷）》- 作用域与闭包
Vue官方文档 - 组合式API章节
MDN Web Docs - 数据类型与内存管理