---
tags: []
create time: 2026-04-30 15:30
---

# 前端摸底测试（第六次）— 错题精讲

## 概述

本次测试涵盖 **Axios、AJAX/XHR、JavaScript 核心、DOM/BOM、事件系统、CSS、浏览器存储与定时器、Node.js、Vue 3、React Hooks、Webpack、ESM 模块系统**等前端核心技术点。共 110 道单选题，本篇聚焦 37 道错题，按知识点分类逐一拆解错误原因并给出正确理解。

> [!tip] 使用建议
> 先通读各专题的"为什么错 → 为什么对"分析，再做右侧表格的自测检查，最后用「高频考点速览」串记薄弱概念。

---

## 一、请求层：Axios & AJAX / XHR

### Q03：跨域方案辨析

| 项目 | 内容 |
| ------ | ------------ |
| ❌ 你的答案 | B（服务器 cors） |
| ✅ 正确答案 | D（axios） |

---

### Q04：XHR 终止方法

> [!note] 纠正说明
> 此题你答对了。**`xhr.abort()`** 是唯一标准方法来中止一个正在进行的 XHR 请求。

### Q18：readyState = 3 的含义

| 项目 | 内容 |
| ------ | -------- |
| ❌ 你的答案 | C（已应答） |
| ✅ 正确答案 | B（交互中） |

```js
// XHR readyState 五阶段
const STATE = {
  UNSENT:      0,   // 未初始化
  OPENED:      1,   // open() 已调用
  HEADERS_RECEIVED: 2, // 收到响应头
  LOADING:     3,   // ↓ 正在下载响应体（交互中）
  DONE:        4    // 完成
};
```

> [!question] 💡 思考
> 为什么 `LOADING(3)` 适合做"流式进度展示"而不是 `DONE(4)`？

### Q38：AJAX 成功事件

| 项目 | 内容 |
| ------ | -------- |
| ❌ 你的答案 | B（onreadystatechange） |
| ✅ 正确答案 | A（onload） |

```js
// 推荐方式：onload — 简洁明了
xhr.onload = function () {
  if (xhr.status === 200) {
    console.log(xhr.responseText);
  }
};

// 旧方式：onreadystatechange — 需要自行判断状态
xhr.onreadystatechange = function () {
  if (xhr.readyState === 4 && xhr.status === 200) { /*...*/ }
};
```

> [!important] 记忆要点
> - **`onload`**：请求完整结束（等同于 readyState===4），仅区分成功/失败
> - **`onerror`**：网络级别失败（DNS 错误、断网等）
> - **`onreadystatechange`**：状态每变化一次都触发，需手动检查 `readyState === 4`

### Q39：CORS 响应头

| 项目 | 内容 |
| ------ | -------- |
| ❌ 你的答案 | D（Cross-Origin-Resource-Policy） |
| ✅ 正确答案 | A（Access-Control-Allow-Origin） |

> [!warning] 避坑
> 这是**服务端返回**的响应头，格式为 `Access-Control-Allow-Origin: https://example.com`。客户端不需要手动设置这个头部。

### Q40：解析 JSON 响应的 API

| 项目 | 内容 |
| ------ | -------- |
| ❌ 你的答案 | B（XML.parse()） |
| ✅ 正确答案 | A（JSON.parse()） |

> [!abstract] 冷知识
> XHR 原生支持 `responseType = 'json'`，此时 `xhr.response` 直接就是解析好的 JS 对象，无需手动 `JSON.parse()`。

---

## 二、HTTP 协议基础

### Q51：HTTP 400 状态码

| 项目 | 内容 |
| ------ | -------- |
| ❌ 你的答案 | A（请求方式错误） |
| ✅ 正确答案 | D（请求参数错误） |

> [!memory] HTTP 状态码速记表
>
> ```mermaid
> graph LR
>   A["2xx 成功"] --> A1["200 OK"]
>   A --> A2["201 Created"]
>   B["3xx 重定向"] --> B1["304 Not Modified"]
>   C["4xx 客户端错误"] --> C1["400 Bad Request"]
>   C --> C2["401 Unauthorized"]
>   C --> C3["403 Forbidden"]
>   C --> C4["404 Not Found"]
>   D["5xx 服务端错误"] --> D1["500 Internal Server Error"]
>   D --> D2["502 Bad Gateway"]
> ```

### Q52：Content-Type 的作用

| 项目 | 内容 |
| ------ | -------- |
| ❌ 你的答案 | D（响应的资源类型） |
| ✅ 正确答案 | A（请求体的类型） |

> [!example] 常见 Content-Type
> - `application/json` — JSON 数据（最常用）
> - `application/x-www-form-urlencoded` — 传统表单
> - `multipart/form-data` — 文件上传
> - `text/html` / `text/css` / `image/png` — 响应端

---

## 三、JavaScript 核心概念

### Q07：JS 数据类型辨析

| 项目 | 内容 |
| ------ | -------- |
| ❌ 你的答案 | A（RegExp） |
| ✅ 正确答案 | D（String） |

> [!question] 💡 思考
> 为什么 RegExp / Function / Array 属于引用类型（对象），而 String 是基本类型？

```js
typeof /pattern/   // "object" → RegExp 是对象类型
typeof function(){} // "function" → Function 是对象类型
typeof []           // "object" → Array 是对象类型
typeof "hello"      // "string" → 基本类型！
typeof new String("a") // "object" → String 包装对象才是对象类型
```

### Q06：值传递 vs 引用传递

| 项目 | 内容 |
| ------ | -------- |
| ❌ 你的答案 | A（10） |
| ✅ 正确答案 | A（9） |

```js
let num = 9;
function fn(num) {
  num = num + 1;  // 修改的是函数局部参数，不影响外层
}
fn(num);
console.log(num);  // 9 —— 基本类型按值传递
```

> [!example] 对比：引用类型的行为（Q14）
> ```js
> let arr = [1];
> function fn(arr) {
>   arr.push(3);  // 修改的是同一块堆内存
> }
> fn(arr);
> console.log(arr);  // [1, 3]
> ```

### Q23：一元加号 + 的类型转换

| 项目 | 内容 |
| ------ | -------- |
| ❌ 你的答案 | D（string） |
| ✅ 正确答案 | B（number） |

```js
typeof +'136';  // "number"
// 等价于：Number('136') → 136
// '+' 作为一元运算符时，会将操作数转换为数字
```

### Q13 & Q43 & Q44：事件循环（Event Loop）输出顺序

这三道题都在考同一个核心：**同步 → Promise微任务 → setTimeout宏任务**。

| 题目 | ❌ 你的答案 | ✅ 正确答案 |
|------|------------|-------------|
| Q13 | D | C（2→3→5→4→1） |
| Q43 | D | A（8,9,5,5,5,5,5） |
| Q44 | D | A（23541） |

以 Q13 为例，执行过程分解：

> [!abstract] Event Loop 执行流程
>
> ```mermaid
> flowchart TD
>   A["同步代码开始执行"] --> B["setTimeout 注册宏任务"]
>   B --> C["Promise 立即执行"]
>   C --> D["for 循环 resolve"]
>   D --> E["console.log 5"]
>   E --> F["同步代码结束"]
>   F --> G["微任务 then"]
>   G --> H["宏任务 setTimeout"]
> ```

> [!tip] 记忆口诀
> **"同步先行，微任务跟进，宏任务殿后"**
>
> 输出顺序始终是：**2 → 3 → 5 → 4 → 1**

对于 Q43（var 闭包陷阱）：

```js
console.log(8);            // 1. 同步输出 8
for (var i = 0; i < 5; i++) {
  // var 没有块级作用域，i 最终值为 5
  setTimeout(() => console.log(i), 1000 * i);
  // 5个定时器全部注册为宏任务
}
console.log(9);            // 2. 同步输出 9
// 3. 1秒后依次输出 5,5,5,5,5
```

### Q27：对象引用赋值

| 项目 | 内容 |
| ------ | -------- |
| ❌ 你的答案 | A（'teal'） |
| ✅ 正确答案 | B（'red'） |

```js
let obj1 = { uname: 'teal' };
let obj2 = obj1;             // 引用赋值，指向同一块内存
obj2.uname = 'red';
console.log(obj1.uname);     // 'red' ← obj1 也变了！
```

### Q01：Axios 拦截器的问题

| 项目 | 内容 |
| ------ | -------- |
| ❌ 你的答案 | D |
| ✅ 正确答案 | D（B和C都对） |

> [!note] 纠正说明
> 此题你答对了。关键两点：
> - **token 过期应先尝试刷新**，而非直接跳转登录
> - **SPA 中应使用路由跳转**（如 `router.push('/login')`），`window.location.href` 会触发整页刷新，破坏 SPA 体验

### Q12：响应拦截器异常处理

| 项目 | 内容 |
| ------ | -------- |
| ❌ 你的答案 | C |
| ✅ 正确答案 | C（两个回调位置写法） |

> [!note] 纠正说明
> 此题你答对了。注意签名顺序：`use(onFulfilled, onRejected)`——**先成功回调，后失败回调**。

### Q100：Node.js 启用 ESM

| 项目 | 内容 |
| ------ | -------- |
| ❌ 你的答案 | C（--experimental-modules） |
| ✅ 正确答案 | D（B和D均正确） |

两种方法均可启用 ESM：
1. `package.json` 中添加 `"type": "module"`
2. 使用 `.mjs` 扩展名

> [!warning] 注意
> `--experimental-modules` 是 Node 12~13 的临时标志，Node 14+ 已移除，不再是推荐做法。

---

## 四、事件系统与 DOM/BOM

### Q02：取消默认事件的正确方法

| 项目 | 内容 |
| ------ | -------- |
| ❌ 你的答案 | C（preventDefault()） |
| ✅ 正确答案 | C（preventDefault()） |

> [!note] 纠正说明
> 此题你答对了。
> - `preventDefault()` → **阻止默认行为**（如链接跳转、表单提交）
> - `stopPropagation()` → **阻止事件冒泡**
> - `cancelBubble = true` → IE8 时代的旧写法

### Q16：获取 CSS 样式的方法

| 项目 | 内容 |
| ------ | -------- |
| ❌ 你的答案 | A（getElementStyle()） |
| ✅ 正确答案 | B（getComputedStyle()） |

```js
// 标准写法
const style = getComputedStyle(element);
console.log(style.fontSize);

// 兼容性写法（IE8-）
element.currentStyle?.fontSize;
```

### Q17：TypeError 的产生场景

| 项目 | 内容 |
| ------ | -------- |
| ❌ 你的答案 | A（未定义变量操作） |
| ✅ 正确答案 | B（将函数作为对象使用） |

```js
TypeError 的典型场景：
undefined.foo        → ReferenceError（不是 TypeError！）
fn()                 → TypeError（fn 不是函数却被当作函数调用）
new undefined()      → TypeError
'text'.split = 1     → TypeError（不可配置属性被修改）
```

> [!question] 💡 思考
> 为什么访问 `undefined.xxx` 抛的是 `ReferenceError` 而不是 `TypeError`？

### Q19：可继承的 CSS 属性

| 项目 | 内容 |
| ------ | -------- |
| ❌ 你的答案 | D（line-height） |
| ✅ 正确答案 | C（border） |

> [!memory] CSS 继承规则速记
> 文本相关属性（color/font/line-height/letter-spacing）**默认继承**。
> 盒模型属性（border/margin/padding/width/height）**不继承**。

### Q20：选择器优先级

| 项目 | 内容 |
| ------ | -------- |
| ❌ 你的答案 | D（id） |
| ✅ 正确答案 | A（style（行内样式最高）） |

> [!memory] CSS 优先级从高到低
> ```
> !important > 行内 style > ID 选择器 > Class/属性/伪类 > 标签选择器 > 通配符
> ```

### Q26：querySelector 选择第一个 box 类元素

| 项目 | 内容 |
| ------ | -------- |
| ❌ 你的答案 | C |
| ✅ 正确答案 | C（document.querySelector('.box')） |

> [!note] 纠正说明
> 此题你答对了。注意：`.box` 中的点 `.` 表示类选择器，不加点 `box` 会被当作标签名 `<box>`。

### Q30：事件委托中获得真实触发元素

| 项目 | 内容 |
| ------ | -------- |
| ❌ 你的答案 | C（target.name） |
| ✅ 正确答案 | A（event.target.tagName） |

### Q31：阻止事件冒泡

| 项目 | 内容 |
| ------ | -------- |
| ❌ 你的答案 | C（preventPropagation()） |
| ✅ 正确答案 | B（event.stopPropagation()） |

> [!warning] 避坑
> DOM 规范中**不存在** `preventPropagation()` 这个方法。容易和 `preventDefault()` 混淆。

### Q59：文件上传编码类型

| 项目 | 内容 |
| ------ | -------- |
| ❌ 你的答案 | A |
| ✅ 正确答案 | A（enctype="multipart/form-data"） |

> [!note] 纠正说明
> 此题你答对了。只有文件上传时需要 `multipart/form-data`；普通表单用默认的 `application/x-www-form-urlencoded` 即可。

### Q73：操作浏览器地址栏的对象

| 项目 | 内容 |
| ------ | -------- |
| ❌ 你的答案 | A（navigator） |
| ✅ 正确答案 | D（location） |

> [!memory] BOM 四大对象区分
> - **location**：URL 信息（搜索 `?`、哈希 `#`、跳转 `assign/replace`）
> - **history**：历史栈（`back/forward/go`）
> - **navigator**：浏览器信息（`userAgent/platform`）
> - **screen**：屏幕尺寸

### Q105：teleport 组件的理解

| 项目 | 内容 |
| ------ | -------- |
| ❌ 你的答案 | B |
| ✅ 正确答案 | C（可以条件性启用） |

> [!abstract] teleport 的关键特性
> - 传送的内容**保持与原组件的数据绑定**（响应式依然存在）
> - 可以通过 `to` 属性指定任意合法选择器（不限于 body）
> - 支持 `:disabled` 条件控制是否传送

### Q107：Context 中修改 theme

| 项目 | 内容 |
| ------ | -------- |
| ❌ 你的答案 | B |
| ✅ 正确答案 | B（需要将 setTheme 也传入 Context） |

> [!note] 纠正说明
> 此题你答对了。Context 只传值不传方法，子组件就无法修改父组件的状态。正确做法是把 `[theme, setTheme]` 一起放入 value 对象。

---

## 五、存储与定时器

### Q33：localStorage 的限制

| 项目 | 内容 |
| ------ | -------- |
| ❌ 你的答案 | A（存储任意类型） |
| ✅ 正确答案 | A（不能存储任意类型） |

> [!warning] localStorage 只能存**字符串**！
> 存入对象/数组会自动调用 `.toString()` 变成 `[object Object]`。正确做法：
> ```js
> localStorage.setItem('data', JSON.stringify({ a: 1 }));
> const parsed = JSON.parse(localStorage.getItem('data'));
> ```

### Q34：定时器描述的错误选项

| 项目 | 内容 |
| ------ | -------- |
| ❌ 你的答案 | C |
| ✅ 正确答案 | C（并非所有定时器都会立即执行） |

`setTimeout(fn, 0)` 不代表立刻执行，而是放入宏任务队列等待本轮同步代码结束后再执行。

### Q35：classList 切换类的方法

| 项目 | 内容 |
| ------ | -------- |
| ❌ 你的答案 | C |
| ✅ 正确答案 | C（toggleClass 不存在） |

> [!note] classList 的正确 API
>
> | 方法 | 说明 |
> |------|------|
> | `add()` | 添加类 |
> | `remove()` | 删除类 |
> | `toggle()` | **切换**（有则删，无则加） |
> | `contains()` | 是否包含 |
> | `replace(old, new)` | 替换类名 |

> [!warning] 注意区分
> `toggleClass()` **不存在**于 DOM API 中，正确方法是 `classList.toggle()`（没有 Class 中间那个大写字母）。

### Q108：自定义 Hook 的请求问题

| 项目 | 内容 |
| ------ | -------- |
| ❌ 你的答案 | B |
| ✅ 正确答案 | B（每次渲染都会发起请求） |

```js
// ❌ 错误：没有 useEffect 包裹
function useData(id) {
  fetch(`/api/data/${id}`).then(res => res.json()).then(setData);
}

// ✅ 正确：用 useEffect 控制时机
function useData(id) {
  const [data, setData] = useState(null);
  useEffect(() => {
    fetch(`/api/data/${id}`)
      .then(res => res.json())
      .then(setData);
  }, [id]);  // 依赖 id 变化才重新请求
}
```

---

## 六、框架相关

### Vue 专题

#### Q01（provide/inject）& Q101

| 项目 | 内容 |
| ------ | -------- |
| ❌ 你的答案 | A/C（父子通信 / props传递） |
| ✅ 正确答案 | B（跨多层传递） |

> [!abstract] provide/inject 适用场景
>
> ```mermaid
> graph TD
>   A["props drilling"] -->|"1-2层"| B["props 足够"]
>   A -->|"3+层"| C["provide/inject 更优雅"]
>   D["同层级兄弟"] --> E["提升状态到共同祖先"]
>   F["全局共享"] --> G["Pinia / Vuex"]
> ```

#### Q102：reactive 解构导致响应式失效

| 项目 | 内容 |
| ------ | -------- |
| ❌ 你的答案 | B |
| ✅ 正确答案 | B（解构会丢失响应式追踪） |

```js
const state = reactive({ count: 0 });

// ❌ 解构后失去响应式
const { count } = state;   // count 变成了普通数字
count++;                   // state.count 不变！

// ✅ 正确做法
const { count } = toRefs(state);  // toRefs 保留响应式
count.value++;                   // 同步更新 state.count
```

#### Q103：生命周期执行顺序

| 项目 | 内容 |
| ------ | -------- |
| ❌ 你的答案 | B |
| ✅ 正确答案 | B（Child mounted → Parent mounted） |

> [!abstract] 挂载顺序
>
> ```mermaid
> flowchart LR
>   A["父 setup 执行"] --> B["子 setup 执行"]
>   B --> C["子 template 渲染"]
>   C --> D["子 onMounted 执行"]
>   D --> E["父 template 渲染"]
>   E --> F["父 onMounted 执行"]
> ```

#### Q106：API Key 泄露处理

| 项目 | 内容 |
| ------ | -------- |
| ❌ 你的答案 | B |
| ✅ 正确答案 | B（在平台禁用并重新生成） |

> [!note] 纠正说明
> 此题你答对了。密码 ≠ API Key，更改密码无法撤销已泄漏的 Key。

---

### React 专题

#### Q43（var 闭包）& Q44 & Q06 & Q14 & Q27：JavaScript 基础贯穿

这几道题其实在考同一个内核：**JavaScript 的变量作用域和引用机制**。

| 题目 | 考查点 | 你的答案 | 正确答案 |
|------|--------|---------|---------|
| Q43 | var 循环闭包 | D | A |
| Q44 | Promise + setTimeout | D | A |
| Q06 | 值传递 | A | A |
| Q14 | 引用传递 | C | C |
| Q27 | 引用赋值 | A | B |

#### Q46：v-bind vs v-on

| 项目 | 内容 |
| ------ | -------- |
| ❌ 你的答案 | C（v-on） |
| ✅ 正确答案 | A（v-bind（动态属性绑定）） |

#### Q62：useState 的作用

| 项目 | 内容 |
| ------ | -------- |
| ❌ 你的答案 | B（定义 props） |
| ✅ 正确答案 | A（定义初始状态） |

#### Q67：useEffect 清理副作用

| 项目 | 内容 |
| ------ | -------- |
| ❌ 你的答案 | C（useState） |
| ✅ 正确答案 | A（返回一个函数） |

#### Q70：React.memo 的作用

| 项目 | 内容 |
| ------ | -------- |
| ❌ 你的答案 | D（比较 refs） |
| ✅ 正确答案 | A（比较 props，避免不必要重渲染） |

#### Q72：子传父的实现方式

| 项目 | 内容 |
| ------ | -------- |
| ❌ 你的答案 | C（状态提升） |
| ✅ 正确答案 | A（回调函数） |

> [!question] 💡 思考
> "状态提升"和"回调函数"有什么区别？什么场景该用哪个？

#### Q84：触发重渲染的条件

| 项目 | 内容 |
| ------ | -------- |
| ❌ 你的答案 | D（useRef变化） |
| ✅ 正确答案 | A（父组件状态变化） |

> [!warning] useRef 的变化**不会**触发重渲染——这正是它的价值所在。

#### Q98：浏览器原生支持的模块系统

| 项目 | 内容 |
| ------ | -------- |
| ❌ 你的答案 | A（CommonJS） |
| ✅ 正确答案 | B（ESM） |

```html
<!-- 浏览器原生支持，通过 type="module" 开启 -->
<script type="module" src="./app.js"></script>
```

CommonJS 是 Node.js 的规范，浏览器需要打包工具（Webpack/Vite）才能使用。

#### Q99：ESM 中报错的导出语法

| 项目 | 内容 |
| ------ | -------- |
| ❌ 你的答案 | D（export *） |
| ✅ 正确答案 | C（export = { a: 1 }） |

---

## 七、Node.js 与构建工具

### Q09：浏览器页面加载事件

| 项目 | 内容 |
| ------ | -------- |
| ❌ 你的答案 | A（DOMContentLoaded） |
| ✅ 正确答案 | B（load（HTML + 所有外部资源）） |

> [!abstract] 两个关键事件对比
>
> ```mermaid
> timeline
>   title 页面加载事件时间线
>   HTML解析完成 ： DOMContentLoaded
>   图片/CSS/JS加载完 ： load
> ```

### Q10：Node.js 能做什么

| 项目 | 内容 |
| ------ | -------- |
| ❌ 你的答案 | A |
| ✅ 正确答案 | A（Node.js 不能操作 DOM） |

### Q49：执行 HTTP 请求的 Node 模块

| 项目 | 内容 |
| ------ | -------- |
| ❌ 你的答案 | D（net） |
| ✅ 正确答案 | A（http） |

### Q50：FormData 添加键值对的方法

| 项目 | 内容 |
| ------ | -------- |
| ❌ 你的答案 | D（set()） |
| ✅ 正确答案 | A（append()） |

> [!warning] 注意区分
> Map 对象用 `set()`，但 FormData 用 **`append()`**。两者 API 不同。

### Q53-56：Webpack 配置项速查

| 配置项 | 作用 | 你的答案 |
|--------|------|---------|
| devtool | 源代码映射 (sourcemap) | ❌ A |
| externals | 定义外部依赖（不打包） | ✅ A |
| splitChunks | 代码分割 | ✅ A |
| resolve | 解析模块路径/别名 | ✅ A |
| optimization | 优化打包 | ✅ C |

### Q11：Node.js 内置模块

| 项目 | 内容 |
| ------ | -------- |
| ❌ 你的答案 | D（dayjs） |
| ✅ 正确答案 | D（dayjs（第三方库，非内置）） |

### Q57-58：Node.js 基础

| 题目 | 你的答案 | 正确答案 |
|------|---------|---------|
| module.exports | 导出公共接口 | ✅ A |
| Node.js 是什么 | — | ✅ B |

---

## 八、其他知识点

### Q28：自定义 data-* 属性

| 项目 | 内容 |
| ------ | -------- |
| ❌ 你的答案 | C（dataset 是函数） |
| ✅ 正确答案 | D（dataset 返回 DOMMap 对象，不是函数） |

### Q29：innerText vs innerHTML

| 项目 | 内容 |
| ------ | -------- |
| ❌ 你的答案 | D |
| ✅ 正确答案 | D（两者作用不一致，innerHTML 解析标签） |

> [!note] 纠正说明
> 此题你答对了。`innerText` 只看纯文本，`innerHTML` 会解析并渲染 HTML 标签。

### Q104：LLM 工作原理

| 项目 | 内容 |
| ------ | -------- |
| ❌ 你的答案 | B |
| ✅ 正确答案 | B（下一个 token 的最大似然预测） |

> [!note] 纠正说明
> 此题你答对了。LLM 不是"理解"语义，而是基于概率统计预测下一个词。

---

## 高频考点速览

> [!summary] 测试中暴露的共性薄弱环节

| 类别 | 高频考点 | 掌握要点 |
|------|---------|---------|
| 事件循环 | 同步/微任务/宏任务顺序 | 同步 → Promise.then → setTimeout |
| JavaScript 基础 | 值传递 vs 引用传递 | 基本类型传副本，引用类型传指针 |
| 事件系统 | stopPropagation / preventDefault | 冒泡 vs 默认行为，千万别混 |
| CSS | 优先级 & 继承规则 | 行内 > ID > Class > 标签；文本继承，盒模型不继承 |
| HTTP | 400/401/403/404/500 | 4x 客户端错，5x 服务端错 |
| Axios | 拦截器最佳实践 | 优先路由跳转、先刷新 token |
| Vue | provide/inject | 专为跨多层通信设计 |
| Vue | reactive 解构 | 用 toRefs 保留响应式 |
| React | useEffect 清理 | return () => cleanup |
| React | 状态不可变性 | setList([newArr]) 而非 push+原引用 |
| React | useRef | 不触发重渲染 |
| 模块系统 | ESM vs CommonJS | 浏览器原生 ESM，export/import |
| webpack | devtool | sourcemap 调试用，不是开发工具 |

---

## 关联笔记

- [[hzh/EXAM]]
- [[Frontend Fundamentals]]
- [[JavaScript Event Loop]]
- [[HTTP Status Codes]]
- [[Vue Lifecycle]]
- [[React Hooks Patterns]]