FE-01-HTML5 语义化与现代表单

FE-01-HTML5 语义化与现代表单

本节目标：理解 HTML5 语义化标签的使用场景、文档大纲、可访问性，以及现代表单控件和验证 API。

1. 为什么要语义化

语义化 HTML = 用对的标签表达对的内容，而不是全部 <div> + <span> + class。

好处：

  • 可访问性：屏幕阅读器、盲文显示器能正确解析
  • SEO：搜索引擎能理解页面结构
  • 可维护性：代码即文档，结构清晰
  • 性能：浏览器能少渲染、多复用
  • 跨设备：适配未来的设备/浏览器

2. 文档结构标签

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>页面标题 - 网站名</title>
  <meta name="description" content="页面描述，搜索引擎用">
</head>
<body>
  <header>
    <nav><!-- 导航 --></nav>
  </header>

  <main>
    <article>
      <header>
        <h1>文章标题</h1>
        <time datetime="2026-09-01">2026年9月1日</time>
      </header>

      <section>
        <h2>第一节</h2>
        <p>内容</p>
      </section>

      <aside>
        <h3>相关链接</h3>
      </aside>
    </article>
  </main>

  <footer>
    <address>联系：<a href="mailto:hi@example.com">hi@example.com</a></address>
    <small>© 2026 公司名</small>
  </footer>
</body>
</html>

核心标签对照：

标签 用途 别用
<header> 页面/区块的头部 不要每个 div 都套
<nav> 主要导航 不用在所有链接组
<main> 页面主体（每页唯一） 不要嵌在 article 里
<article> 独立可分发的内容（博客、新闻） 简单的卡片别用
<section> 有标题的主题分组 单纯样式分组用 div
<aside> 侧边栏/相关补充 任何次要内容
<footer> 页面/区块底部 同 header
<h1> ~ <h6> 标题层级（不要跳级） 不要为大小用

3. 内容语义标签

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
<!-- 文本 -->
<p>段落</p>
<blockquote cite="https://example.com">
  <p>长引用</p>
</blockquote>
<q>行内短引用</q>
<cite>《红楼梦》</cite>
<code>let x = 1;</code>
<pre><code>多行代码</code></pre>
<kbd>Ctrl</kbd> + <kbd>C</kbd>
<mark>高亮</mark>
<del datetime="2026-01-01">已删除</del>
<ins>新插入</ins>
<abbr title="HyperText Markup Language">HTML</abbr>

<!-- 列表 -->
<ul><li>无序</li></ul>
<ol><li>有序</li></ol>
<dl>
  <dt>HTML</dt><dd>超文本标记语言</dd>
  <dt>CSS</dt><dd>层叠样式表</dd>
</dl>

<!-- 媒体 -->
<figure>
  <img src="chart.png" alt="2026 年 Q1 销售图表" width="800" height="400">
  <figcaption>图 1：2026 Q1 销售额环比增长 12%</figcaption>
</figure>

<picture>
  <source srcset="img.avif" type="image/avif">
  <source srcset="img.webp" type="image/webp">
  <img src="img.jpg" alt="...">
</picture>

<video controls poster="preview.jpg" preload="metadata">
  <source src="video.mp4" type="video/mp4">
  <source src="video.webm" type="video/webm">
  <track kind="captions" src="captions.vtt" srclang="zh" label="中文字幕">
</video>

<!-- 表格 -->
<table>
  <caption>2026 年员工统计</caption>
  <thead>
    <tr><th scope="col">部门</th><th scope="col">人数</th></tr>
  </thead>
  <tbody>
    <tr><th scope="row">研发</th><td>50</td></tr>
    <tr><th scope="row">产品</th><td>20</td></tr>
  </tbody>
  <tfoot>
    <tr><th scope="row">合计</th><td>70</td></tr>
  </tfoot>
</table>

4. 图标与插图

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!-- SVG 直接内联（推荐，小图标） -->
<svg width="24" height="24" viewBox="0 0 24 24" aria-hidden="true">
  <path d="M3 12l9-9 9 9-9 9-9-9z" fill="currentColor"/>
</svg>

<!-- 需要可访问性时 -->
<svg role="img" aria-label="关闭">
  <use href="#close-icon"/>
</svg>

<!-- 装饰性图片：alt="" -->
<img src="decoration.png" alt="">

<!-- 信息性图片：alt 描述内容 -->
<img src="user-avatar.jpg" alt="张三的头像">

5. ARIA 属性（无障碍）

ARIA = Accessible Rich Internet Applications。W3C 标准，给辅助技术补充信息。

5 条 ARIA 规则：

  1. 优先用原生 HTML 标签（<button> 而不是 <div role="button">）
  2. 不要改原生语义（<h2 role="tab"> ❌）
  3. 所有交互控件必须键盘可达
  4. 不要用 role="presentation" 隐藏可读元素
  5. 所有可交互元素必须有可访问名
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!-- 标签关联（屏幕阅读器读出"用户名"） -->
<label for="username">用户名</label>
<input id="username" name="username" required>

<!-- 替代：包装 -->
<label>
  密码
  <input type="password" name="pwd" required>
</label>

<!-- 必填提示 -->
<input aria-required="true" required>
<input aria-invalid="true" aria-describedby="err">

<!-- 错误消息 -->
<input id="email" aria-describedby="email-err" aria-invalid="true">
<span id="email-err" role="alert">邮箱格式错误</span>

<!-- 加载状态 -->
<button aria-busy="true" aria-live="polite">提交中...</button>

<!-- 隐藏（对屏幕阅读器不可见） -->
<span class="sr-only">重要提示：</span>
<style>.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }</style>

6. HTML5 表单新特性

6.1 新的 input type

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<form>
  <input type="email" name="email" required>
  <input type="url" name="website">
  <input type="tel" name="phone" pattern="[0-9]{11}">
  <input type="number" name="age" min="0" max="150" step="1">
  <input type="range" name="score" min="0" max="100" value="50">
  <input type="date" name="birthday">
  <input type="time" name="meeting">
  <input type="datetime-local" name="event">
  <input type="month" name="expiry">
  <input type="week" name="target">
  <input type="color" name="theme" value="#1e6fdc">
  <input type="search" name="q" placeholder="搜索...">
  <input type="file" name="avatar" accept="image/*" multiple>
  <input type="password" name="pwd" minlength="8" autocomplete="new-password">
</form>

6.2 自动验证属性

1
2
3
4
5
6
7
8
9
10
11
<input type="text"
       required                    <!-- 必填 -->
       minlength="3"               <!-- 最短 -->
       maxlength="20"              <!-- 最长 -->
       min="0" max="100"           <!-- 数值范围 -->
       pattern="[A-Za-z]{3,}"      <!-- 正则 -->
       step="2"                   <!-- 步长 -->
       placeholder="用户名"        <!-- 占位符（不是标签！） -->
       autofocus                   <!-- 自动聚焦 -->
       autocomplete="username"     <!-- 浏览器自动填充 -->
>

6.3 验证 API

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<form id="signup" novalidate>
  <input id="email" type="email" required>
  <span id="err" hidden></span>
  <button type="submit">注册</button>
</form>

<script>
const form = document.getElementById('signup');
const email = document.getElementById('email');
const err = document.getElementById('err');

email.addEventListener('invalid', (e) => {
  e.preventDefault();
  if (email.validity.valueMissing) {
    err.textContent = '邮箱不能为空';
  } else if (email.validity.typeMismatch) {
    err.textContent = '请输入合法的邮箱';
  } else if (email.validity.tooShort) {
    err.textContent = '邮箱太短';
  }
  err.hidden = false;
});

email.addEventListener('input', () => {
  if (email.checkValidity()) {
    err.hidden = true;
  }
});

form.addEventListener('submit', (e) => {
  if (!form.checkValidity()) {
    e.preventDefault();
    // 找到第一个无效字段并聚焦
    const firstInvalid = form.querySelector(':invalid');
    firstInvalid?.focus();
  }
});
</script>

validity 对象属性：

  • valid：是否合法
  • valueMissing：必填但空
  • typeMismatch：类型不匹配（email/url/number）
  • patternMismatch：正则不匹配
  • tooShort / tooLong：长度超限
  • rangeUnderflow / rangeOverflow：数值超界
  • stepMismatch：不满足 step
  • badInput：输入无法解析

6.4 <datalist> 自动补全

1
2
3
4
5
6
7
<input list="browsers" name="browser">
<datalist id="browsers">
  <option value="Chrome">
  <option value="Firefox">
  <option value="Safari">
  <option value="Edge">
</datalist>

6.5 <output> 显示计算结果

1
2
3
4
5
<form oninput="result.value = parseInt(a.value) + parseInt(b.value)">
  <input type="number" id="a" value="0"> +
  <input type="number" id="b" value="0"> =
  <output name="result">0</output>
</form>

7. 现代表单组件实战

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
<form>
  <fieldset>
    <legend>账号信息</legend>
    <label>
      用户名
      <input type="text" name="username" required minlength="3" maxlength="20">
    </label>
    <label>
      邮箱
      <input type="email" name="email" required>
    </label>
  </fieldset>

  <fieldset>
    <legend>偏好设置</legend>

    <label>
      主题
      <select name="theme">
        <optgroup label="亮色">
          <option value="light">浅色</option>
          <option value="sepia">护眼</option>
        </optgroup>
        <optgroup label="暗色">
          <option value="dark">深色</option>
          <option value="black">纯黑</option>
        </optgroup>
      </select>
    </label>

    <fieldset>
      <legend>通知方式（多选）</legend>
      <label><input type="checkbox" name="notify" value="email" checked> 邮件</label>
      <label><input type="checkbox" name="notify" value="sms"> 短信</label>
      <label><input type="checkbox" name="notify" value="push"> 推送</label>
    </fieldset>

    <fieldset>
      <legend>性别（单选）</legend>
      <label><input type="radio" name="gender" value="m" checked> 男</label>
      <label><input type="radio" name="gender" value="f"> 女</label>
      <label><input type="radio" name="gender" value="o"> 其他</label>
    </fieldset>

    <label>
      简介
      <textarea name="bio" rows="4" maxlength="500" placeholder="一句话介绍自己..."></textarea>
    </label>
  </fieldset>

  <button type="submit">提交</button>
  <button type="reset">重置</button>
</form>

8. SEO 最佳实践

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<head>
  <title>独特且描述性的标题 - 站点名</title>
  <meta name="description" content="150 字以内的页面描述">
  <meta name="keywords" content="关键词1, 关键词2">
  <meta name="robots" content="index, follow">
  <link rel="canonical" href="https://example.com/canonical-url">

  <!-- Open Graph（社交分享） -->
  <meta property="og:title" content="分享标题">
  <meta property="og:description" content="分享描述">
  <meta property="og:image" content="https://example.com/og.jpg">
  <meta property="og:url" content="https://example.com/page">
  <meta property="og:type" content="article">

  <!-- Twitter Card -->
  <meta name="twitter:card" content="summary_large_image">
  <meta name="twitter:title" content="...">
  <meta name="twitter:image" content="...">

  <!-- 结构化数据 (JSON-LD) -->
  <script type="application/ld+json">
  {
    "@context": "https://schema.org",
    "@type": "Article",
    "headline": "文章标题",
    "author": { "@type": "Person", "name": "张三" },
    "datePublished": "2026-09-01"
  }
  </script>
</head>

9. 性能相关的 HTML 技巧

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!-- 关键资源预加载 -->
<link rel="preload" href="critical.css" as="style">
<link rel="preload" href="hero.jpg" as="image">
<link rel="preload" href="font.woff2" as="font" crossorigin>
<link rel="prefetch" href="/next-page.html">  <!-- 下一页 -->
<link rel="preconnect" href="https://cdn.example.com">  <!-- 提前建连 -->

<!-- DNS 预解析 -->
<link rel="dns-prefetch" href="//cdn.example.com">

<!-- 异步加载非关键 CSS -->
<link rel="stylesheet" href="print.css" media="print" onload="this.media='all'">

<!-- 延迟加载图片 -->
<img src="placeholder.jpg" data-src="real.jpg" loading="lazy" decoding="async" alt="...">

<!-- 现代图片格式 -->
<picture>
  <source srcset="img.avif" type="image/avif">
  <source srcset="img.webp" type="image/webp">
  <img src="img.jpg" alt="...">
</picture>

10. 可访问性 checklist

  • 所有图片有 alt（装饰性用 alt=""）
  • 所有交互元素键盘可达（Tab 顺序合理）
  • focus 状态有视觉提示（不要 outline: none）
  • 表单字段有关联的 <label>
  • 标题层级不跳级（h1 → h2 → h3）
  • 语言标记 <html lang="...">
  • 颜色对比度 ≥ 4.5:1（正文）/ 3:1（大字号）
  • 错误消息用 aria-live 或 role="alert"
  • 动效用 prefers-reduced-motion 兼容
  • 用 axe / Lighthouse / WAVE 检测

小结

主题 要点
语义化 用对的标签，不要 div 套一切
文档结构 header/nav/main/article/section/aside/footer
媒体 figure+figcaption、picture、video+track
表单 type=email/url/date、required、pattern
验证 HTML5 原生 + Constraint Validation API
a11y ARIA 是补充，不是替代原生 HTML
SEO title/description/og:*/JSON-LD

下一节讲 CSS3 进阶：Flexbox、Grid、动画、容器查询——真正写”现代 CSS”。

展开全文 >>

FE-02-CSS3 进阶：Flex、Grid、动画与容器查询

FE-02-CSS3 进阶：Flex、Grid、动画与容器查询

本节目标：掌握 Flexbox 和 Grid 的全部核心概念、CSS 动画与过渡、容器查询与 @layer 等现代特性。

1. Flexbox（弹性盒子）

一维布局，沿主轴方向排列子元素。

1.1 容器属性

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
.container {
  display: flex;            /* 或 inline-flex */

  /* 主轴方向（默认 row）*/
  flex-direction: row | row-reverse | column | column-reverse;

  /* 换行 */
  flex-wrap: nowrap | wrap | wrap-reverse;

  /* 主轴对齐 */
  justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly;

  /* 交叉轴对齐 */
  align-items: stretch | flex-start | flex-end | center | baseline;

  /* 多行对齐（仅 wrap 时） */
  align-content: stretch | flex-start | flex-end | center | space-between | space-around;
}

**速记 flex-flow**：flex-direction: row; flex-wrap: wrap; → flex-flow: row wrap;

1.2 项目属性

1
2
3
4
5
6
7
8
.item {
  flex: 1 1 200px;     /* 简写：grow shrink basis */
  flex-grow: 1;         /* 放大比例，默认 0 */
  flex-shrink: 1;      /* 缩小比例，默认 1 */
  flex-basis: 200px;    /* 基础尺寸，默认 auto */
  order: 2;            /* 排列顺序，数字小的在前 */
  align-self: center;  /* 单独覆盖 align-items */
}

1.3 经典场景

居中：

1
.parent { display: flex; justify-content: center; align-items: center; }

导航栏：

1
2
3
.nav { display: flex; }
.nav .logo { margin-right: auto; }  /* 把后面的项推到右边 */
.nav .item { padding: 0 1rem; }

圣杯布局：

1
2
3
.holy-grail { display: flex; }
.holy-grail > main { flex: 1; }      /* 占满中间 */
.holy-grail > nav, aside { flex: 0 0 200px; }

等高卡片：

1
2
.row { display: flex; }
.card { flex: 1; }  /* 默认 stretch，所有卡片自动等高 */

2. Grid（网格布局）

二维布局，行列同时控制。

2.1 容器属性

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
.container {
  display: grid;

  /* 定义列 */
  grid-template-columns: 200px 1fr 200px;
  grid-template-columns: repeat(3, 1fr);
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));  /* 响应式 */
  grid-template-columns: 1fr 2fr 1fr;  /* 比例 */

  /* 定义行 */
  grid-template-rows: 100px auto 1fr;

  /* 区域命名（高级） */
  grid-template-areas:
    "header header header"
    "nav    main   aside"
    "footer footer footer";

  /* 间距 */
  gap: 16px;                    /* 行列同 */
  row-gap: 16px;
  column-gap: 24px;

  /* 对齐 */
  justify-items: stretch | start | end | center;
  align-items: stretch | start | end | center;
  place-items: center;          /* 简写 */
  justify-content: center;
  align-content: center;
}

2.2 项目属性

1
2
3
4
5
6
7
.item {
  grid-column: 1 / 3;          /* 从第 1 列跨到第 3 列 */
  grid-row: 2 / 4;
  grid-area: header;            /* 用 area 名 */
  justify-self: center;
  align-self: center;
}

2.3 经典场景

12 列网格：

1
2
3
.grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 16px; }
.col-6 { grid-column: span 6; }  /* 占 6 列 */
.col-4 { grid-column: span 4; }

响应式（无 media query）：

1
2
3
4
5
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 16px;
}

宽度够就多放几列，不够自动换行。

瀑布流：

1
2
3
4
5
6
.masonry {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  grid-auto-rows: 10px;
}
.masonry > * { grid-row: span 20; }  /* 每项占 20 行 */

圣杯布局：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.holy-grail {
  display: grid;
  grid-template-columns: 200px 1fr 200px;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "header header header"
    "nav    main   aside"
    "footer footer footer";
  min-height: 100vh;
}
.holy-grail > header { grid-area: header; }
.holy-grail > nav    { grid-area: nav; }
.holy-grail > main   { grid-area: main; }
.holy-grail > aside  { grid-area: aside; }
.holy-grail > footer { grid-area: footer; }

3. CSS 变量（自定义属性）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
:root {
  --color-primary: #1e6fdc;
  --color-bg: #ffffff;
  --spacing-md: 16px;
  --font-size: 16px;
  --radius: 8px;
}

.button {
  background: var(--color-primary);
  padding: var(--spacing-md);
  border-radius: var(--radius);

  /* 回退值 */
  color: var(--color-text, #333);

  /* 嵌套（变量套变量） */
  --shadow: 0 0 0 1px var(--color-primary);
  box-shadow: var(--shadow);
}

/* 运行时修改 */
document.documentElement.style.setProperty('--color-primary', '#ff6600');

4. CSS 动画

4.1 transition（过渡）

1
2
3
4
5
6
.button {
  background: #1e6fdc;
  transition: background 0.3s ease, transform 0.2s ease-out;
  /* transition: all 0.3s;  ← 不要用 all（性能差） */
}
.button:hover { background: #1857b8; transform: scale(1.05); }

timing function：

  • linear：匀速
  • ease：默认，慢-快-慢
  • ease-in：加速
  • ease-out：减速
  • ease-in-out：慢-快-慢
  • cubic-bezier(0.4, 0, 0.2, 1)：Material 标准
  • steps(4)：分步动画

4.2 @keyframes 动画

1
2
3
4
5
6
7
8
9
10
11
12
13
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

.box {
  animation: fadeInUp 0.6s ease-out forwards;
  /* animation: name duration timing-function delay iteration-count direction fill-mode; */
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-fill-mode: forwards;  /* 保持结束状态 */
  animation-play-state: running;
}

多动画：animation: fadeIn 0.3s, slideIn 0.5s 0.2s;

prefers-reduced-motion（无障碍）：

1
2
3
4
5
6
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

4.3 transform（变换）

1
2
3
4
5
6
7
8
9
.box {
  /* 2D */
  transform: translate(10px, 20px) rotate(45deg) scale(1.5) skew(10deg);
  transform-origin: center;        /* 变换原点 */
  /* 3D */
  transform: rotateY(45deg) translateZ(100px);
  transform-style: preserve-3d;
  perspective: 1000px;            /* 透视 */
}

性能优化：只动 transform 和 opacity（走合成层，不重排/重绘）。

5. 现代 CSS 特性

5.1 容器查询（@container）

根据父容器尺寸（不是视口）来响应式：

1
2
3
4
5
6
7
8
9
10
11
12
.card-container {
  container-type: inline-size;
  container-name: card;
}

@container card (min-width: 400px) {
  .card { display: grid; grid-template-columns: 1fr 2fr; gap: 16px; }
}

@container card (max-width: 399px) {
  .card { display: flex; flex-direction: column; }
}

5.2 @layer（层级管理）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
@layer reset, base, components, utilities;

@layer reset {
  * { margin: 0; padding: 0; box-sizing: border-box; }
}

@layer base {
  body { font-family: system-ui; line-height: 1.5; }
}

@layer components {
  .button { /* ... */ }
}

@layer utilities {
  .text-center { text-align: center; }
}

/* 后面写的 @layer 优先级低；同 layer 后写覆盖先写 */

5.3 :has()（父选择器）

1
2
3
4
5
6
7
8
/* 含已勾选 checkbox 的父元素 */
form:has(input[type="checkbox"]:checked) { background: green; }

/* 含无效输入的字段 */
.field:has(input:invalid) { border-color: red; }

/* 含图片的卡片 */
.card:has(img) { display: grid; grid-template-columns: 200px 1fr; }

5.4 :is() 和 :where()

1
2
3
/* 简化选择器列表 */
:is(h1, h2, h3) { line-height: 1.2; }  /* 优先级 = 最高那个 */
:where(h1, h2, h3) { line-height: 1.2; }  /* 优先级 = 0 */

5.5 aspect-ratio

1
2
.video { aspect-ratio: 16 / 9; }
.avatar { aspect-ratio: 1; border-radius: 50%; }

5.6 :focus-visible

1
2
.button:focus { outline: none; }              /* 永远不要这样！ */
.button:focus-visible { outline: 2px solid #1e6fdc; }  /* 键盘聚焦才显示 */

5.7 color-mix 和相对颜色

1
2
3
4
5
6
7
.button {
  --color: #1e6fdc;
  background: var(--color);
  /* 派生颜色 */
  border: 1px solid color-mix(in srgb, var(--color) 50%, white);
  box-shadow: 0 4px 12px color-mix(in srgb, var(--color) 30%, transparent);
}

6. 性能优化

6.1 GPU 加速

1
2
3
4
5
/* 触发合成层（独立渲染） */
.gpu {
  will-change: transform;        /* 提示浏览器会变化 */
  transform: translateZ(0);      /* 或直接提升 */
}

注意：不要滥用 will-change（会占用显存）。

6.2 避免触发布局

1
2
3
4
5
6
7
8
/* 触发布局（重排）- 慢 */
width, height, padding, margin, top, left, ...

/* 只触发重绘 - 中 */
color, background, box-shadow, ...

/* 只触发合成 - 快 */
transform, opacity, filter

6.3 content-visibility（跳过渲染）

1
2
3
4
.below-fold {
  content-visibility: auto;
  contain-intrinsic-size: 0 500px;  /* 估算高度，避免滚动条跳动 */
}

7. 现代 CSS 架构

7.1 BEM 命名

1
2
3
4
5
6
7
8
.block { }
.block__element { }
.block--modifier { }

.card { }
.card__title { }
.card__body { }
.card--featured { }

7.2 CSS Modules（构建时作用域）

1
2
3
/* Card.module.css */
.card { padding: 16px; }
.title { font-size: 1.2rem; }
1
2
3
4
import styles from './Card.module.css';
<div className={styles.card}>
  <h2 className={styles.title}>...</h2>
</div>

7.3 CSS-in-JS（运行时）

1
2
3
4
5
6
7
8
9
import styled from '@emotion/styled';

const Button = styled.button`
  background: ${props => props.primary ? '#1e6fdc' : 'white'};
  color: ${props => props.primary ? 'white' : '#333'};
  padding: 8px 16px;
`;

<Button primary>Click</Button>

7.4 Tailwind（实用类）

1
2
3
<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
  Click
</button>

8. 实战：响应式卡片网格

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<style>
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 24px;
  padding: 24px;
}

.card {
  container-type: inline-size;
  background: white;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  transition: transform 0.2s, box-shadow 0.2s;
}
.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.15);
}

@container (min-width: 400px) {
  .card-body { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
}
</style>

小结

概念 用法
Flexbox 一维布局，主轴 + 交叉轴
Grid 二维布局，rows + columns
自定义属性 CSS 变量，运行时可改
transition 状态过渡
@keyframes 关键帧动画
transform 性能最好的动画属性
@container 基于父容器大小的响应式
@layer 优先级管理
:has() 父选择器
will-change 提示 GPU 加速

下一节讲浏览器渲染原理：DOM / CSSOM / 重绘 / 回流 / 合成层。

展开全文 >>

FE-03-浏览器渲染原理

FE-03-浏览器渲染原理

本节目标：理解浏览器从 URL 输入到页面呈现的完整流程，掌握 DOM/CSSOM/渲染树/布局/绘制/合成的各个阶段，知道如何优化。

1. 浏览器架构

现代浏览器（以 Chromium 为例）是多进程架构：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
┌─────────────────────────────────────────────────┐
│                 Browser 进程                     │
│  UI、地址栏、书签、存储管理、网络请求协调        │
└─────────────────────────────────────────────────┘
        │              │             │
        ▼              ▼             ▼
┌──────────┐  ┌──────────────┐  ┌──────────────┐
│ 渲染进程 │  │  GPU 进程     │  │ 网络进程     │
│ (多个)   │  │              │  │              │
└──────────┘  └──────────────┘  └──────────────┘
        │
        ▼
┌──────────────────────────────────────────┐
│ V8 引擎、Blink 渲染、布局、绘制、合成     │
│ 每个 tab 一个渲染进程（沙箱）              │
└──────────────────────────────────────────┘

为什么多进程：

  • 稳定性：一个 tab 崩溃不影响其他
  • 安全性：渲染进程在沙箱里，权限受限
  • 性能：多个 tab 可并行

为什么有时合并进程：节省内存（多 tab 共用）。

2. URL 输入到页面呈现

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
URL 输入
   ↓
1. 导航 (Navigation)
   ├── DNS 解析
   ├── TCP 连接 (三次握手)
   ├── TLS 握手（HTTPS）
   └── HTTP 请求 / 响应
   ↓
2. 解析 (Parsing)
   ├── 字节流 → 字符（根据 charset）
   ├── 词法分析 → Token
   ├── 语法分析 → 节点 (Node)
   └── DOM 树
   ↓
3. 样式计算 (Style Calculation)
   ├── CSS 解析 → CSSOM
   ├── 合并继承 → Computed Style
   └── 标准化属性值
   ↓
4. 布局 (Layout / Reflow)
   ├── 计算每个节点的几何信息
   │   （位置、尺寸）
   └── 布局树 (Layout Tree)
   ↓
5. 分层 (Layerization)
   ├── 提升为合成层的元素
   └── 拆成多个层
   ↓
6. 绘制 (Paint)
   ├── 绘制指令（Draw Quad）
   └── 分块（Tile）
   ↓
7. 合成 (Compositing)
   ├── GPU 线程光栅化
   ├── 合成位图
   └── 显示到屏幕

3. 关键概念

3.1 DOM（文档对象模型）

HTML 解析成的树形结构：

1
2
3
4
5
6
7
8
<html>
  <body>
    <div class="container">
      <h1>标题</h1>
      <p>段落</p>
    </div>
  </body>
</html>
1
2
3
4
5
6
7
8
Document
  └── html
        └── body
              └── div.container
                    ├── h1
                    │     └── "标题" (文本节点)
                    └── p
                          └── "段落" (文本节点)

3.2 CSSOM（CSS 对象模型）

1
2
3
4
body { color: #333; }
.container { padding: 16px; }
h1 { font-size: 2rem; }
p { line-height: 1.5; }

CSSOM 树结构（也是树形）。

3.3 渲染树（Render Tree）

DOM + CSSOM 合并 = 渲染树（只包含可见元素）：

  • display: none 的元素不在渲染树
  • visibility: hidden 的元素在渲染树（占位但不可见）
  • <head>, <meta>, <script> 不在渲染树

3.4 布局树（Layout Tree）

渲染树 → 布局树，包含每个节点的盒模型信息（x, y, width, height, margin, padding 等）。

4. 重排（Reflow / Layout）

布局阶段计算元素几何信息的过程。DOM 变化、样式变化、读取某些属性都可能触发重排。

触发重排的操作：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// DOM 增删改
element.appendChild(child);
element.remove();
element.style.width = '100px';

// 读取 offset/scroll/client 等属性
element.offsetHeight;  // 强制重排（如果之前有未应用的变更）
window.scrollTo(0, 100);

// 修改 CSS 类
element.classList.add('active');

// 窗口变化
window.resize();

// 字体加载完成
document.fonts.ready;

重排开销：可能影响整个文档树（或子树）。

5. 重绘（Repaint）

绘制阶段把元素绘制到屏幕。几何信息没变，只改外观。

只触发重绘（不重排）：

  • color, background, border-color, box-shadow
  • visibility: hidden（元素仍占位）
  • outline

触发重排 + 重绘：

  • width, height, margin, padding
  • top, left, right, bottom（定位属性）
  • display, position, float
  • font-size, font-family, line-height

只触发合成（最便宜）：

  • transform: translate/scale/rotate
  • opacity
  • filter
  • will-change: transform

6. 性能优化原则

6.1 减少重排次数

批处理 DOM 变更：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// 错：3 次重排
const list = document.getElementById('list');
for (let i = 0; i < 100; i++) {
  const li = document.createElement('li');
  li.textContent = i;
  list.appendChild(li);  // 每次都触发重排
}

// 对：1 次重排
const frag = document.createDocumentFragment();
for (let i = 0; i < 100; i++) {
  const li = document.createElement('li');
  li.textContent = i;
  frag.appendChild(li);
}
list.appendChild(frag);

离线 DOM 操作：

1
2
3
4
5
6
7
8
9
10
11
// 错：每次循环都触发重排
for (let i = 0; i < 1000; i++) {
  element.style.left = i + 'px';
}

// 对：脱离文档流后修改
element.style.position = 'absolute';  // 或 display: none
for (let i = 0; i < 1000; i++) {
  element.style.left = i + 'px';
}
element.style.position = '';

避免强制同步布局：

1
2
3
4
5
6
7
8
9
10
11
// 错：连续读 offsetHeight 触发多次重排
boxes.forEach(box => {
  box.style.width = container.offsetWidth + 'px';  // 写
  const h = box.offsetHeight;                       // 读 → 强制同步布局
});

// 对：先读后写
const width = container.offsetWidth;  // 一次读
boxes.forEach(box => {
  box.style.width = width + 'px';     // 写
});

6.2 减少重绘范围

1
2
3
4
5
6
7
8
9
10
11
12
13
/* 用 transform 而不是 left/top */
.box {
  position: absolute;
  /* 错：left: 100px; 触发布局 */
  transform: translateX(100px);  /* 只触发合成 */
}

/* 用 opacity 而不是 visibility */
.box {
  /* 错：visibility: hidden 时切换会重绘 */
  opacity: 0;
  pointer-events: none;
}

6.3 提升合成层

触发层提升的属性：

1
2
3
4
5
6
7
.layer {
  transform: translateZ(0);     /* 或 will-change: transform */
  opacity: 0.99;                /* 老浏览器 hack */
  filter: blur(0);              /* 老 hack */
  position: fixed;              /* 也会提升 */
  will-change: transform, opacity;  /* 提示浏览器 */
}

注意：不要滥用层（每个层都占显存）。一般只对动画元素用。

7. 关键渲染路径（CRP）

Critical Rendering Path：从 HTML/CSS/JS 到首次绘制（First Paint）的过程。

优化目标：缩短关键渲染路径时间。

7.1 渲染阻塞资源

1
2
3
4
5
6
7
<head>
  <!-- CSS 默认是 render-blocking -->
  <link rel="stylesheet" href="style.css">

  <!-- JS 默认是 parser-blocking -->
  <script src="app.js"></script>
</head>

优化方法：

1
2
3
4
5
6
7
8
9
10
11
12
<!-- 关键 CSS 内联 -->
<style>/* 首屏关键样式 */</style>

<!-- 非关键 CSS 异步 -->
<link rel="preload" href="style.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="style.css"></noscript>

<!-- JS 加 defer（异步下载，DOM 解析完执行） -->
<script defer src="app.js"></script>

<!-- JS 加 async（异步下载，下载完立即执行） -->
<script async src="analytics.js"></script>

defer vs async：

  • defer：按顺序执行，DOMContentLoaded 前
  • async：下载完就执行，顺序不保证

7.2 资源加载优先级

1
2
3
4
5
6
7
8
9
10
11
12
13
<!-- 高优先级：阻塞渲染的关键资源 -->
<link rel="stylesheet" href="critical.css">

<!-- 预加载：关键但稍后用 -->
<link rel="preload" href="hero.jpg" as="image">
<link rel="preload" href="font.woff2" as="font" crossorigin>

<!-- 预取：下一页可能用 -->
<link rel="prefetch" href="/next-page.html">

<!-- 预连接：跨域资源 -->
<link rel="preconnect" href="https://api.example.com">
<link rel="dns-prefetch" href="//cdn.example.com">

8. 浏览器事件循环（Event Loop）

1
2
3
4
5
6
7
8
9
console.log('1');

setTimeout(() => console.log('2'), 0);

Promise.resolve().then(() => console.log('3'));

console.log('4');

// 输出：1 4 3 2

宏任务 vs 微任务：

  • 宏任务：setTimeout, setInterval, I/O, UI 渲染
  • 微任务：Promise.then, queueMicrotask, MutationObserver

事件循环：

1
2
3
4
5
6
7
执行栈 (Call Stack)  →  同步代码
        ↓ 栈空
微任务队列 (Microtask Queue)  →  全部执行完
        ↓
宏任务队列 (Task Queue / Macrotask)  →  取出第一个
        ↓
        回到 Call Stack

requestAnimationFrame 在下一次重绘前执行（不是微任务）。

9. 实战：性能优化清单

  • 减少 DOM 树深度
  • 用 CSS transform/opacity 做动画
  • 长列表用虚拟滚动（react-window、vue-virtual-scroller）
  • 图片用 loading="lazy" + decoding="async"
  • CSS 放在 <head>，JS 放 <body> 末尾或用 defer
  • 大 CSS 拆成关键路径 + 非关键（异步加载）
  • 用 content-visibility: auto 跳过视口外内容渲染
  • 字体用 font-display: swap 避免阻塞
  • 避免 layout thrashing（读写交错）
  • 用 Chrome DevTools Performance 面板分析

10. DevTools 实战

Performance 面板：

1
2
3
4
1. 录制操作
2. 看 Main 线程的 flame chart
3. 找长任务（黄色 = 脚本，紫色 = 渲染）
4. 看是否频繁重排/重绘

Layers 面板：

1
2
3
查看页面有多少合成层
每个层的大小、内存占用
找到不必要的层提升

Rendering 面板（实验性）：

1
2
3
- Paint flashing：重绘时高亮
- Layout shift regions：CLS 区域
- Frame rendering stats：FPS

小结

阶段 优化点
解析 减小 HTML/CSS 体积、关键 CSS 内联
样式 选择器高效（避免深嵌套）
布局 减少重排、批处理 DOM
绘制 减少重绘、缩小影响范围
合成 transform/opacity 动画
加载 preload/prefetch/async/defer

黄金法则：

  1. 优先 transform/opacity（合成层最快）
  2. 避免 layout thrashing（读写交错）
  3. 批处理 DOM 变更
  4. 关键资源优先，非关键资源异步
  5. 测量，不要猜（用 DevTools）

下一节讲 JavaScript 高级：闭包、原型链、异步、模块化。

展开全文 >>

FE-04-JavaScript 高级：闭包、原型链、异步、模块化

FE-04-JavaScript 高级：闭包、原型链、异步、模块化

本节目标：深入理解 JS 核心机制：作用域链、闭包、原型链、this 绑定、Promise/async-await、模块系统。

1. 执行上下文与作用域

执行上下文（Execution Context） 是 JS 引擎执行代码的环境：

1
2
3
4
5
6
7
8
9
10
var a = 1;
function foo() {
  var b = 2;
  function bar() {
    var c = 3;
    console.log(a, b, c);  // 1 2 3
  }
  bar();
}
foo();

三个层级：

  • 全局执行上下文（最外层）
  • 函数执行上下文（每个函数调用）
  • Eval 执行上下文（eval 内）

执行栈（Call Stack）：LIFO，最后调用的先返回。

2. 作用域链

1
2
3
4
5
6
7
8
9
10
11
const global = 'global';

function outer() {
  const outerVar = 'outer';

  function inner() {
    const innerVar = 'inner';
    console.log(global, outerVar, innerVar);  // 全能找到
  }
  inner();
}

作用域链：当前作用域 → 父作用域 → … → 全局。

let/const 的块级作用域：

1
2
3
4
5
6
7
8
{
  let x = 1;
  const y = 2;
  var z = 3;
}
console.log(x);  // ReferenceError
console.log(y);  // ReferenceError
console.log(z);  // 3（var 不受块作用域限制）

3. 闭包（Closure）

闭包 = 函数 + 其引用的词法环境：

1
2
3
4
5
6
7
8
9
10
11
12
function makeCounter() {
  let count = 0;
  return function() {
    count++;
    return count;
  };
}

const counter = makeCounter();
console.log(counter());  // 1
console.log(counter());  // 2
console.log(counter());  // 3

经典场景：

数据封装：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
function createWallet(initial) {
  let balance = initial;
  return {
    deposit: (amount) => balance += amount,
    withdraw: (amount) => {
      if (amount > balance) throw new Error('余额不足');
      balance -= amount;
    },
    getBalance: () => balance,
  };
}
const w = createWallet(100);
w.deposit(50);
console.log(w.getBalance());  // 150
// balance 外部访问不到

循环中的闭包陷阱：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// 错：所有输出 3
for (var i = 0; i < 3; i++) {
  setTimeout(() => console.log(i), 100);
}

// 对：let 有块作用域
for (let i = 0; i < 3; i++) {
  setTimeout(() => console.log(i), 100);
}

// 对：IIFE
for (var i = 0; i < 3; i++) {
  (function(j) {
    setTimeout(() => console.log(j), 100);
  })(i);
}

4. 原型链

**每个 JS 对象都有一个隐藏的 [[Prototype]]**（通过 __proto__ 或 Object.getPrototypeOf() 访问）。

1
2
3
4
5
const obj = { a: 1 };
console.log(obj.__proto__ === Object.prototype);  // true

// 原型链查找
obj.toString();  // 自身没找到，沿着 __proto__ 找到 Object.prototype.toString

构造函数 + prototype：

1
2
3
4
5
6
7
8
9
10
function Person(name) {
  this.name = name;
}
Person.prototype.greet = function() {
  return `Hello, ${this.name}`;
};

const alice = new Person('Alice');
console.log(alice.greet());  // Hello, Alice
console.log(alice.__proto__ === Person.prototype);  // true

原型链：

1
2
3
4
alice (实例)
  → Person.prototype
  → Object.prototype
  → null

ES6 class 语法糖：

1
2
3
4
5
6
7
8
9
class Person {
  constructor(name) {
    this.name = name;
  }
  greet() {
    return `Hello, ${this.name}`;
  }
}
// 实际就是构造函数 + prototype

继承：

1
2
3
4
5
6
7
8
9
10
11
class Animal {
  constructor(name) { this.name = name; }
  speak() { return `${this.name} makes a sound`; }
}

class Dog extends Animal {
  speak() { return `${this.name} barks`; }
}

const d = new Dog('Rex');
console.log(d.speak());  // Rex barks

5. this 绑定

this 的值取决于调用方式，不是定义位置。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
// 1. 默认绑定（独立函数调用）
function f() { console.log(this); }
f();  // window（严格模式下 undefined）

// 2. 隐式绑定（作为方法调用）
const obj = {
  name: 'Alice',
  greet() { console.log(this.name); },
};
obj.greet();  // 'Alice'

// 3. 显式绑定（call/apply/bind）
function greet() { console.log(this.name); }
const obj = { name: 'Alice' };
greet.call(obj);     // 'Alice'
greet.apply(obj);    // 'Alice'
const bound = greet.bind(obj);
bound();             // 'Alice'

// 4. new 绑定（构造函数）
function Person(name) {
  this.name = name;
}
const p = new Person('Alice');  // this 指向新创建的实例

优先级：new > 显式 > 隐式 > 默认

箭头函数没有自己的 this（继承外层）：

1
2
3
4
5
6
7
8
9
10
const obj = {
  name: 'Alice',
  greet: () => console.log(this.name),  // this 来自定义时的外层（这里是全局）
  greet2() {
    const f = () => console.log(this.name);  // 继承 greet2 的 this
    f();
  },
};
obj.greet();   // undefined
obj.greet2();  // 'Alice'

6. 异步编程

6.1 回调函数（Callback）

1
2
3
4
fs.readFile('a.txt', (err, data) => {
  if (err) return console.error(err);
  console.log(data);
});

回调地狱：

1
2
3
4
5
6
7
fs.readFile('a', (err, a) => {
  fs.readFile('b', (err, b) => {
    fs.readFile('c', (err, c) => {
      // 嵌套太深，难以维护
    });
  });
});

6.2 Promise

1
2
3
4
5
6
7
const p = new Promise((resolve, reject) => {
  setTimeout(() => resolve('done'), 1000);
});

p.then(v => console.log(v))      // done
 .catch(e => console.error(e))
 .finally(() => console.log('end'));

链式调用：

1
2
3
4
5
6
fetch('/api/user')
  .then(res => res.json())
  .then(user => fetch(`/api/posts/${user.id}`))
  .then(res => res.json())
  .then(posts => console.log(posts))
  .catch(err => console.error(err));

静态方法：

1
2
3
4
Promise.all([p1, p2, p3])    // 全部成功才成功
Promise.race([p1, p2, p3])  // 第一个完成
Promise.allSettled([p1, p2])  // 全部完成（不论成功失败）
Promise.any([p1, p2, p3])   // 第一个成功

6.3 async/await

async function 返回 Promise，await 等待 Promise resolve：

1
2
3
4
5
6
7
8
9
10
11
async function loadUser(id) {
  try {
    const user = await fetch(`/api/users/${id}`).then(r => r.json());
    const posts = await fetch(`/api/posts/${user.id}`).then(r => r.json());
    return { user, posts };
  } catch (err) {
    console.error(err);
  }
}

const result = await loadUser(1);

并发 vs 串行：

1
2
3
4
5
6
// 串行：依次等待
const a = await fetchA();
const b = await fetchB(a.id);

// 并发：同时发起
const [a, b] = await Promise.all([fetchA(), fetchB()]);

6.4 手写 Promise

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
class MyPromise {
  constructor(executor) {
    this.state = 'pending';
    this.value = undefined;
    this.callbacks = [];

    const resolve = (value) => {
      if (this.state !== 'pending') return;
      this.state = 'fulfilled';
      this.value = value;
      this.callbacks.forEach(cb => cb.onFulfilled(value));
    };
    const reject = (reason) => {
      if (this.state !== 'pending') return;
      this.state = 'rejected';
      this.value = reason;
      this.callbacks.forEach(cb => cb.onRejected(reason));
    };

    try {
      executor(resolve, reject);
    } catch (err) {
      reject(err);
    }
  }

  then(onFulfilled, onRejected) {
    return new MyPromise((resolve, reject) => {
      const handle = () => {
        try {
          if (this.state === 'fulfilled') {
            const result = onFulfilled(this.value);
            resolve(result);
          } else if (this.state === 'rejected') {
            const result = onRejected(this.value);
            resolve(result);
          } else {
            this.callbacks.push({
              onFulfilled: (v) => {
                try {
                  resolve(onFulfilled(v));
                } catch (e) { reject(e); }
              },
              onRejected: (e) => {
                try {
                  resolve(onRejected(e));
                } catch (err) { reject(err); }
              },
            });
          }
        } catch (err) {
          reject(err);
        }
      };
      handle();
    });
  }
}

7. 模块化

7.1 演进历史

  • IIFE（ES5 之前）
  • CommonJS（Node.js）
  • AMD（RequireJS，已淘汰）
  • UMD（兼容 CommonJS 和 AMD）
  • ES Modules（ES6+，浏览器原生）

7.2 CommonJS（Node.js）

1
2
3
4
5
6
7
// math.js
function add(a, b) { return a + b; }
module.exports = { add };

// app.js
const { add } = require('./math');
console.log(add(1, 2));  // 3

特点：

  • 同步加载
  • 运行时解析
  • 缓存已加载模块

7.3 ES Modules

1
2
3
4
5
6
7
// math.js
export function add(a, b) { return a + b; }
export default class Calculator {}

// app.js
import { add } from './math.js';
import Calculator from './math.js';

特点：

  • 静态分析（编译时优化）
  • 异步加载
  • 浏览器原生支持
  • Tree-shakable

7.4 动态导入

1
2
3
4
5
6
7
8
9
10
// 按需加载
const { default: Chart } = await import('./chart.js');

// 路由懒加载
const routes = [
  {
    path: '/admin',
    component: () => import('./AdminView.vue'),
  },
];

7.5 CommonJS vs ESM 互操作

1
2
3
4
5
6
7
8
// ESM 引入 CJS
import cjs from './cjs-module';  // default import = module.exports

// CJS 引入 ESM（不支持！必须用动态 import）
// require() 不能加载 ESM
(async () => {
  const { foo } = await import('./esm-module.mjs');
})();

8. 防抖与节流

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
// 防抖（debounce）：N 秒内只执行最后一次
function debounce(fn, delay) {
  let timer;
  return function(...args) {
    clearTimeout(timer);
    timer = setTimeout(() => fn.apply(this, args), delay);
  };
}

// 节流（throttle）：N 秒内最多执行一次
function throttle(fn, delay) {
  let last = 0;
  return function(...args) {
    const now = Date.now();
    if (now - last >= delay) {
      last = now;
      fn.apply(this, args);
    }
  };
}

// 用法
window.addEventListener('resize', debounce(handleResize, 200));
window.addEventListener('scroll', throttle(handleScroll, 100));

9. 深拷贝

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// 浅拷贝
const a = { x: 1, y: { z: 2 } };
const b = { ...a };          // 第一层独立，y 仍共享
const c = Object.assign({}, a);

// 深拷贝
const d = structuredClone(a);  // 现代浏览器/Node 17+ 原生
// 老的 polyfill：
function deepClone(obj) {
  if (obj === null || typeof obj !== 'object') return obj;
  if (obj instanceof Date) return new Date(obj);
  if (obj instanceof RegExp) return new RegExp(obj);
  if (Array.isArray(obj)) return obj.map(deepClone);
  return Object.fromEntries(
    Object.entries(obj).map(([k, v]) => [k, deepClone(v)])
  );
}

JSON.parse(JSON.stringify(obj)) 的问题：

  • 丢失函数、undefined、Symbol
  • Date 变字符串
  • 循环引用会爆栈

10. JS 内存管理

内存生命周期：

  1. 分配（声明变量、对象）
  2. 使用（读写）
  3. 释放（GC）

GC 算法：现代浏览器用标记-清除（Mark-Sweep）：

  • 定期从根对象（window）开始遍历
  • 不可达的对象标记为可回收
  • 在适当时机清除

内存泄漏常见原因：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
// 1. 意外的全局变量
function leak() {
  x = 'leak';  // 没有 var/let/const → 全局
}

// 2. 忘记清除定时器
const timer = setInterval(...);
// 忘记 clearInterval(timer);

// 3. 闭包引用大对象
function attach() {
  const big = new Array(1000000);
  return function() {
    console.log(big[0]);  // 闭包保持 big 引用
  };
}

// 4. DOM 引用
const el = document.getElementById('x');
el.remove();  // DOM 删了，但 JS 变量还引用着
// el = null;  ← 必须显式置空

// 5. 事件监听未移除
element.addEventListener('click', handler);
// 忘记 removeEventListener

检测内存：

  • Chrome DevTools → Memory → Heap snapshot
  • performance.memory.usedJSHeapSize（Chrome only）

小结

概念 关键点
作用域 全局/函数/块级
闭包 函数 + 词法环境，封装数据
原型链 __proto__ 链，方法查找路径
this 调用时决定，不是定义时
Promise 三态、then/catch/finally
async/await 同步写法 + 异步语义
模块化 ESM 是未来，CJS 是历史
内存 标记清除 GC，避免泄漏

下一节讲 TypeScript 进阶：泛型、条件类型、类型体操。

展开全文 >>

FE-05-TypeScript 进阶：泛型、条件类型与类型体操

FE-05-TypeScript 进阶：泛型、条件类型与类型体操

本节目标：掌握 TypeScript 的高级类型系统：泛型、条件类型、映射类型、模板字面量类型，能读懂和编写类型工具。

1. TS 基础回顾

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
// 基本类型
let x: number = 42;
let s: string = 'hello';
let arr: number[] = [1, 2, 3];
let tuple: [string, number] = ['age', 25];

// 接口
interface User {
  id: number;
  name: string;
  email?: string;     // 可选
  readonly created: Date;  // 只读
}

// 类型别名
type ID = string | number;
type Status = 'pending' | 'success' | 'failed';

// 联合类型
type Result = { ok: true; value: number } | { ok: false; error: string };

// 交叉类型
type A = { x: number };
type B = { y: string };
type C = A & B;  // { x: number; y: string }

2. 泛型（Generics）

核心思想：类型参数化，让函数/接口/类支持多种类型而不丢失类型信息。

2.1 泛型函数

1
2
3
4
5
6
7
function identity<T>(value: T): T {
  return value;
}

const a = identity(42);        // T = number, 返回 number
const b = identity('hello');   // T = string, 返回 string
const c = identity<number>(42); // 显式指定

2.2 泛型约束

1
2
3
4
5
6
7
8
9
10
11
// 约束必须有 length 属性
interface Lengthwise { length: number }

function logLength<T extends Lengthwise>(arg: T): T {
  console.log(arg.length);
  return arg;
}

logLength('hello');  // 5
logLength([1, 2]);   // 2
// logLength(42);    // Error: number 没有 length

2.3 多泛型参数

1
2
3
4
5
function pair<K, V>(key: K, value: V): [K, V] {
  return [key, value];
}

const p = pair('age', 25);  // [string, number]

2.4 泛型接口

1
2
3
4
5
6
7
8
interface ApiResponse<T> {
  code: number;
  data: T;
  message: string;
}

const userRes: ApiResponse<User> = await fetch('/api/user').then(r => r.json());
const listRes: ApiResponse<User[]> = await fetch('/api/users').then(r => r.json());

2.5 泛型类

1
2
3
4
5
6
7
8
9
10
11
class Stack<T> {
  private items: T[] = [];

  push(item: T) { this.items.push(item); }
  pop(): T | undefined { return this.items.pop(); }
}

const stack = new Stack<number>();
stack.push(1);
stack.push(2);
console.log(stack.pop());  // 2

2.6 默认类型参数

1
2
3
4
5
6
interface Container<T = string> {
  value: T;
}

const a: Container = { value: 'hello' };  // T 默认 string
const b: Container<number> = { value: 42 };

3. 条件类型（Conditional Types）

1
T extends U ? X : Y
1
2
3
4
type IsString<T> = T extends string ? true : false;

type A = IsString<string>;   // true
type B = IsString<number>;   // false

3.1 infer 关键字

在条件类型中推断类型：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// 提取函数返回值类型（手写 ReturnType）
type MyReturnType<T> = T extends (...args: any[]) => infer R ? R : never;

function foo() { return 42; }
type FooReturn = MyReturnType<typeof foo>;  // number

// 提取 Promise 内部类型
type UnwrapPromise<T> = T extends Promise<infer U> ? U : T;

type A = UnwrapPromise<Promise<string>>;  // string
type B = UnwrapPromise<number>;          // number（不匹配，返回原类型）

// 提取数组元素类型
type ElementOf<T> = T extends (infer E)[] ? E : never;

type C = ElementOf<string[]>;  // string

3.2 分布式条件类型

当 T 是联合类型时，条件类型会分发：

1
2
3
4
5
type ToArray<T> = T extends any ? T[] : never;

type A = ToArray<string | number>;
// 等价于 (string extends any ? string[] : never) | (number extends any ? number[] : never)
// = string[] | number[]

阻止分发：用 [] 包一层

1
2
3
4
type ToArrayNonDist<T> = [T] extends [any] ? T[] : never;

type B = ToArrayNonDist<string | number>;
// = (string | number)[]  ← 不分发了

4. 映射类型（Mapped Types）

1
2
3
4
5
6
7
8
9
10
11
type Readonly<T> = {
  readonly [K in keyof T]: T[K];
};

type Optional<T> = {
  [K in keyof T]?: T[K];
};

interface User { id: number; name: string; }
type ReadonlyUser = Readonly<User>;
// { readonly id: number; readonly name: string; }

4.1 keyof 操作符

1
2
interface User { id: number; name: string; email: string; }
type UserKeys = keyof User;  // 'id' | 'name' | 'email'

4.2 内置映射类型

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
// Partial<T>    - 所有属性可选
// Required<T>  - 所有属性必填
// Readonly<T>  - 所有属性只读
// Pick<T, K>   - 选取部分属性
// Omit<T, K>   - 排除部分属性
// Record<K, V> - 构造键值对类型

interface User { id: number; name: string; email: string; age: number; }

type UserPreview = Pick<User, 'id' | 'name'>;
// { id: number; name: string }

type UserWithoutEmail = Omit<User, 'email'>;
// { id: number; name: string; age: number }

type UserOptional = Partial<User>;
// { id?: number; name?: string; email?: string; age?: number; }

type UserRequired = Required<UserOptional>;
// { id: number; name: string; email: string; age: number; }

type RoleMap = Record<'admin' | 'user' | 'guest', string[]>;
// { admin: string[]; user: string[]; guest: string[]; }

4.3 高级映射

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// 映射并改名
type Getters<T> = {
  [K in keyof T as `get${Capitalize<string & K>}`]: () => T[K];
};

interface User { id: number; name: string; }
type UserGetters = Getters<User>;
// { getId: () => number; getName: () => string }

// 过滤属性
type FilterByType<T, U> = {
  [K in keyof T as T[K] extends U ? K : never]: T[K];
};

type NumberFields = FilterByType<User, number>;
// { id: number }

5. 模板字面量类型

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
type World = "world";
type Greeting = `hello ${World}`;  // "hello world"

type EventName<T extends string> = `on${Capitalize<T>}`;
type ClickEvent = EventName<'click'>;  // "onClick"
type ChangeEvent = EventName<'change'>;  // "onChange"

// 联合类型展开
type Event = EventName<'click' | 'focus' | 'blur'>;
// "onClick" | "onFocus" | "onBlur"

// 实战：类型安全的事件 emitter
class Emitter<Events extends Record<string, any[]>> {
  on<K extends keyof Events>(event: K, listener: (...args: Events[K]) => void) {
    // ...
  }
}

interface MyEvents {
  click: [x: number, y: number];
  change: [value: string];
}

const e = new Emitter<MyEvents>();
e.on('click', (x, y) => console.log(x, y));  // 类型正确
e.on('change', (value) => console.log(value));
// e.on('click', (x: string) => {});  // Error: 类型不匹配

6. 类型守卫（Type Guards）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
function process(value: string | number) {
  // typeof 守卫
  if (typeof value === 'string') {
    return value.toUpperCase();  // 这里 value 是 string
  }
  return value.toFixed(2);  // 这里 value 是 number
}

// instanceof 守卫
class Dog { bark() {} }
class Cat { meow() {} }
function speak(animal: Dog | Cat) {
  if (animal instanceof Dog) {
    animal.bark();
  } else {
    animal.meow();
  }
}

// in 守卫
interface Bird { fly(): void; layEggs(): void; }
interface Fish { swim(): void; layEggs(): void; }
function move(animal: Bird | Fish) {
  if ('fly' in animal) {
    animal.fly();
  } else {
    animal.swim();
  }
}

// 自定义类型谓词
function isString(value: unknown): value is string {
  return typeof value === 'string';
}

7. 类型工具函数实战

7.1 DeepPartial

1
2
3
4
5
6
7
8
9
10
type DeepPartial<T> = T extends object
  ? { [K in keyof T]?: DeepPartial<T[K]> }
  : T;

interface Config {
  server: { port: number; host: string };
  db: { url: string; pool: { min: number; max: number } };
}
type PartialConfig = DeepPartial<Config>;
// 所有嵌套属性都变可选

7.2 DeepReadonly

1
2
3
4
5
type DeepReadonly<T> = T extends (infer U)[]
  ? ReadonlyArray<DeepReadonly<U>>
  : T extends object
  ? { readonly [K in keyof T]: DeepReadonly<T[K]> }
  : T;

7.3 NonNullable 深层

1
2
3
4
5
type DeepNonNullable<T> = T extends null | undefined
  ? never
  : T extends object
  ? { [K in keyof T]: DeepNonNullable<T[K]> }
  : T;

7.4 函数参数类型提取

1
2
3
4
5
6
7
8
9
type MyParameters<T> = T extends (...args: infer P) => any ? P : never;
type MyReturnType<T> = T extends (...args: any[]) => infer R ? R : never;

function greet(name: string, age: number): string {
  return `Hello ${name}, ${age}`;
}

type P = MyParameters<typeof greet>;  // [string, number]
type R = MyReturnType<typeof greet>;  // string

8. 类型断言与转换

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// 类型断言（编译时，运行时无影响）
const value = obj as User;        // 强制断言
const value2 = <User>obj;          // JSX 中不用 as

// const 断言（保留字面量类型）
const config = {
  url: 'https://api.example.com',
  method: 'POST',
} as const;
// type: { readonly url: "https://..."; readonly method: "POST" }

// satisfies：检查类型但不丢失具体类型
const colors = {
  red: '#ff0000',
  green: '#00ff00',
} satisfies Record<string, string>;
// colors.red 的类型仍是 '#ff0000'，不是 string

9. 装饰器（实验性）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
// tsconfig: "experimentalDecorators": true

function log(target: any, key: string, descriptor: PropertyDescriptor) {
  const original = descriptor.value;
  descriptor.value = function(...args: any[]) {
    console.log(`Calling ${key}(${args.join(', ')})`);
    return original.apply(this, args);
  };
}

class Calculator {
  @log
  add(a: number, b: number) {
    return a + b;
  }
}

new Calculator().add(1, 2);
// "Calling add(1, 2)"
// 3

10. 实战：类型安全的事件总线

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
type EventMap = {
  'user:login': { userId: string };
  'user:logout': void;
  'cart:update': { itemId: string; quantity: number };
};

class EventBus<Events extends Record<string, any>> {
  private listeners: { [K in keyof Events]?: Array<(p: Events[K]) => void> } = {};

  on<K extends keyof Events>(event: K, listener: (payload: Events[K]) => void) {
    if (!this.listeners[event]) this.listeners[event] = [];
    this.listeners[event]!.push(listener);
  }

  emit<K extends keyof Events>(event: K, payload: Events[K]) {
    this.listeners[event]?.forEach(fn => fn(payload));
  }
}

const bus = new EventBus<EventMap>();
bus.on('user:login', (p) => console.log(p.userId));  // 类型安全
bus.emit('user:login', { userId: '123' });          // OK
// bus.emit('user:login', { wrong: 'field' });     // Error

小结

概念 关键点
泛型 类型参数化，保留类型信息
约束 <T extends X> 限制 T 的范围
条件类型 T extends U ? X : Y
infer 在条件类型中提取子类型
映射类型 { [K in keyof T]: ... }
模板字面量 构造字符串联合类型
类型守卫 运行时检查 + 编译时收窄
satisfies 检查类型但保留具体信息

核心建议：

  • 别为了用类型而用类型（项目先跑起来）
  • 优先用内建工具类型（Partial、Pick、Omit、Record）
  • 复杂类型推导不了时，用 as 显式标注
  • 用 // @ts-expect-error 标注已知问题（不是忽略）

下一节讲 ES6+ 与现代 ECMAScript 演进。

展开全文 >>

FE-06-ES6+ 与 ECMAScript 新特性演进

FE-06-ES6+ 与 ECMAScript 新特性演进

本节目标：系统梳理 ES6 (2015) 到 ES2024 的关键新特性，掌握现代 JS 写法的”为什么”和”怎么用”。

1. ES 演进时间线

版本 年份 关键特性
ES5 2009 strict mode、JSON、Array methods
ES6/ES2015 2015 let/const、箭头函数、Promise、class、模块
ES2016 2016 ** 指数、Array.includes
ES2017 2017 async/await、Object spread、Object.values
ES2018 2018 Rest/Spread、async iteration、Promise.finally
ES2019 2019 Array.flat、Object.fromEntries、String.trimStart/End
ES2020 2020 ??、?.、BigInt、Promise.allSettled
ES2021 2021 逻辑赋值（`
ES2022 2022 class 字段、顶层 await、Array.at、Error cause
ES2023 2023 Array.findLast、Array.toSorted、hashbang 语法
ES2024 2024 Array.groupBy、Promise.withResolvers、Well-formed Unicode

2. ES6/2015：现代 JS 起点

2.1 let / const

1
2
3
4
5
6
7
8
9
10
11
// 块级作用域
{
  let x = 1;
  const y = 2;
}
// x 和 y 不可见

// const 不是"常量对象"，是"常量引用"
const obj = { a: 1 };
obj.a = 2;  // 允许
// obj = {}  // 错

2.2 解构赋值

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// 数组
const [a, b, c] = [1, 2, 3];
const [first, ...rest] = [1, 2, 3, 4];  // first=1, rest=[2,3,4]
const [, second] = [1, 2];  // 跳过

// 对象
const { name, age } = { name: 'Alice', age: 25 };
const { name: n, age: a } = { name: 'Alice', age: 25 };  // 重命名
const { name, age = 18 } = { name: 'Alice' };  // 默认值

// 嵌套
const { address: { city } } = { address: { city: 'Beijing' } };

// 函数参数
function greet({ name, age }) { /* ... */ }
greet({ name: 'Alice', age: 25 });

2.3 模板字符串

1
2
3
4
5
6
7
8
9
10
11
12
const name = 'Alice';
const greeting = `Hello, ${name}!`;
const multi = `
  第一行
  第二行
`;

// 标签模板
function highlight(strings, ...values) {
  return strings.reduce((acc, s, i) => acc + s + (values[i] ? `**${values[i]}**` : ''), '');
}
highlight`Hello, ${name}!`;  // "Hello, **Alice**!"

2.4 箭头函数

1
2
3
4
5
6
const add = (a, b) => a + b;
const square = x => x * x;
const print = () => console.log('hi');

// 隐式返回对象（要加圆括号）
const make = (x, y) => ({ x, y });

2.5 默认参数、Rest、Spread

1
2
3
4
5
6
7
8
9
10
11
12
// 默认参数
function greet(name = 'World', message = `Hello, ${name}`) { /* ... */ }

// Rest
function sum(...nums) { return nums.reduce((a, b) => a + b, 0); }

// Spread
const arr = [1, 2, 3];
const arr2 = [...arr, 4, 5];

const obj = { a: 1 };
const obj2 = { ...obj, b: 2 };

2.6 Map / Set / WeakMap / WeakSet

1
2
3
4
5
6
7
8
9
10
11
12
13
14
const map = new Map();
map.set('key', 'value');
map.get('key');
map.has('key');
map.size;
map.delete('key');

const set = new Set([1, 2, 3, 3, 3]);  // {1, 2, 3}

// WeakMap/WeakSet：键必须是对象，不阻止 GC
const wm = new WeakMap();
const key = {};
wm.set(key, 'value');
// key 被回收时，wm 里也自动删

2.7 Promise（见 FE-04）

2.8 class

1
2
3
4
5
6
7
8
class Animal {
  constructor(name) { this.name = name; }
  speak() { return `${this.name} makes a sound`; }
}

class Dog extends Animal {
  speak() { return `${this.name} barks`; }
}

2.9 模块化（见 FE-04）

2.10 Symbol / Iterator / Generator

1
2
3
4
5
6
7
8
9
10
const sym = Symbol('id');
const obj = { [sym]: 42 };

function* gen() {
  yield 1;
  yield 2;
  yield 3;
}
const it = gen();
it.next();  // { value: 1, done: false }

2.11 Proxy / Reflect

1
2
3
4
5
6
7
8
9
10
11
12
13
const handler = {
  get(target, key) {
    return key in target ? target[key] : 'default';
  },
  set(target, key, value) {
    target[key] = value;
    return true;
  },
};
const p = new Proxy({}, handler);
p.foo = 1;
p.foo;     // 1
p.missing; // 'default'

3. ES2016-2017：稳定期

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// ES2016
console.log(2 ** 3);  // 8
[1, 2, 3].includes(2);  // true

// ES2017
async function f() { return 1; }
const arr = [3, 1, 2];
const obj = { a: 1, b: 2 };
Object.values(obj);  // [1, 2]
Object.entries(obj); // [['a', 1], ['b', 2]]
// 字符串填充
'5'.padStart(3, '0');  // '005'
'5'.padEnd(3, '0');    // '500'
// async/await（见 FE-04）

4. ES2018-2019：迭代与对象

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
// ES2018
// 对象 rest/spread
const { a, ...rest } = { a: 1, b: 2, c: 3 };  // rest = { b: 2, c: 3 }

// async 迭代
async function* gen() { yield 1; yield 2; }
for await (const v of gen()) { console.log(v); }

// Promise.finally
fetch('/api').then(r => r.json()).finally(() => hideLoading());

// ES2019
// Array.flat / flatMap
[1, [2, 3], [4, [5]]].flat(2);     // [1, 2, 3, 4, 5]
[1, 2, 3].flatMap(x => [x, x*2]);  // [1, 2, 2, 4, 3, 6]

// Object.fromEntries
const entries = [['a', 1], ['b', 2]];
const obj = Object.fromEntries(entries);  // { a: 1, b: 2 }

// 可选 catch
try { /* ... */ } catch { /* err 已绑定 */ }

// JSON 增强
JSON.stringify({ a: 1 }, null, 2);  // 缩进

5. ES2020：可空性 + BigInt

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
// 可选链 ?.
const street = user?.address?.street;
const result = obj.method?.();  // 方法可能不存在
const arr = obj.list?.[0];

// 空值合并 ??
const port = config.port ?? 8080;       // null/undefined 才用默认值
const port2 = config.port || 8080;      // 0/''/false 也会用默认值（不要用）

// BigInt
const big = 9007199254740993n;       // 字面量
const big2 = BigInt('9007199254740993');
big + 1n;  // 9007199254740994n
// 不能和 Number 混算

// Promise.allSettled
const results = await Promise.allSettled([p1, p2, p3]);
results.forEach(r => {
  if (r.status === 'fulfilled') console.log(r.value);
  else console.log(r.reason);
});

// 动态 import
const { default: Chart } = await import('./chart.js');

// globalThis
globalThis.fetch = myFetch;  // 跨环境通用

6. ES2021：逻辑赋值与便利

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
// 逻辑赋值
a ||= b;   // a = a || b
a &&= b;   // a = a && b
a ??= b;   // a = a ?? b

// 数字分隔符（提高可读性）
const billion = 1_000_000_000;
const hex = 0xFF_FF_FF;

// String.replaceAll
'hello world'.replaceAll('o', '0');  // 'hell0 w0rld'

// Promise.any（第一个成功）
const result = await Promise.any([p1, p2, p3]);

// WeakRef / FinalizationRegistry（高级）
const ref = new WeakRef(obj);
// ref.deref() 可能返回 obj（如果还没 GC）

// 简化逻辑（Logical OR assignment）
function foo(opts) {
  opts.timeout ||= 5000;     // 没设就用 5000
  opts.retry ??= 3;          // null/undefined 才设
}

7. ES2022：class 升级 + 顶层 await

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
// class 公有字段
class Counter {
  count = 0;             // 实例字段
  static instances = 0;   // 静态字段
  #private = 'secret';   // 真正的私有字段（# 前缀）

  constructor() {
    Counter.instances++;
  }

  increment() {
    this.count++;
  }
}

// class 静态块
class MyClass {
  static {
    // 类加载时执行一次
    console.log('MyClass loaded');
  }
}

// 顶层 await（ESM 模块）
// 以前：必须包在 async function 里
const data = await fetch('/api/config').then(r => r.json());

// Array.at
[1, 2, 3, 4, 5].at(-1);  // 5
[1, 2, 3, 4, 5].at(0);   // 1

// Error cause
try {
  doSomething();
} catch (err) {
  throw new Error('Failed to do something', { cause: err });
}

// Object.hasOwn
const obj = { a: 1 };
Object.hasOwn(obj, 'a');  // true

8. ES2023：findLast + hashbang

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
// Array.findLast / findLastIndex
const arr = [1, 2, 3, 4, 5];
arr.findLast(x => x < 4);   // 3
arr.findLastIndex(x => x < 4); // 2

// toSorted / toReversed / toSpliced / with（非破坏性）
const a = [3, 1, 2];
const b = a.toSorted();           // [1, 2, 3]，a 不变
const c = a.with(0, 100);         // [100, 1, 2]
const d = a.toSpliced(1, 1, 99);  // [3, 99, 2]

// hashbang（shebang）
#!/usr/bin/env node
// 允许在 .js 顶层用 #! 开头（仅 ESM）

// Symbol 作为 WeakMap key
const sym = Symbol('id');
const wm = new WeakMap();
wm.set(sym, 'value');  // 现在支持

9. ES2024：分组 + Promise.withResolvers

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
// Array.groupBy / groupByMap
const people = [
  { name: 'Alice', age: 25 },
  { name: 'Bob', age: 25 },
  { name: 'Carol', age: 30 },
];
const byAge = people.groupBy(p => p.age);
// { 25: [Alice, Bob], 30: [Carol] }

const byAgeMap = people.groupByMap(p => p.age);
// Map(2) { 25 => [Alice, Bob], 30 => [Carol] }

// Promise.withResolvers
const { promise, resolve, reject } = Promise.withResolvers();
// 不再需要 new Promise 包一层

// Well-formed Unicode
// 字符串方法现在正确处理"孤立"的 surrogate pair

// RegExp v flag（设置 + 匹配 unicode 属性）
const re = /\p{RGI_Emoji}/v;
re.test('😀');  // true

10. 实战：现代 JS 写一个 Promise 并发控制器

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
// 限制并发数的 Promise 调度器
class PromisePool {
  constructor(max) { this.max = max; this.active = 0; this.queue = []; }

  add(fn) {
    return new Promise((resolve, reject) => {
      this.queue.push({ fn, resolve, reject });
      this.#next();
    });
  }

  #next() {
    if (this.active >= this.max || this.queue.length === 0) return;
    const { fn, resolve, reject } = this.queue.shift();
    this.active++;
    fn().then(resolve, reject).finally(() => {
      this.active--;
      this.#next();
    });
  }
}

// 用法
const pool = new PromisePool(3);
const urls = [...];  // 100 个 URL
await Promise.all(urls.map(url =>
  pool.add(() => fetch(url).then(r => r.json()))
));

小结

ES6/2015 是分水岭——之后的版本大多是”补丁和便利”，核心范式在 ES6 就定下了。

推荐的学习路径：

  1. 熟练 ES6（let/const、解构、箭头、Promise、class、模块）
  2. 熟悉 ES2017（async/await）
  3. 了解 ES2020（??、?.、BigInt）
  4. 偶尔看看新版本（按需）

Polyfill 策略：

  • 现代项目：browserslist 配 "last 2 versions"，新特性直接用
  • 兼容性项目：用 core-js、Babel 转译
  • Node.js：LTS 版本支持到 ES2022 左右

下一节讲前端工程化：Webpack / Vite / Rollup / esbuild。

展开全文 >>

FE-07-前端工程化：Webpack、Vite、Rollup 与 esbuild

FE-07-前端工程化：Webpack、Vite、Rollup 与 esbuild

本节目标：理解前端构建工具的原理，掌握主流工具（Vite、Webpack）的使用和选型，能调试构建问题。

1. 为什么要构建

原始 JS/TS 不能直接在浏览器跑：

  • ES2024+ 语法需要转译（Babel/SWC）
  • TypeScript 需要编译
  • JSX/Vue SFC 需要转换
  • CSS 预处理器（Less/Sass/PostCSS）需要编译
  • 代码压缩、Tree-shaking、代码分割
  • 资源处理（图片压缩、字体子集化）
  • 注入环境变量、定义全局常量

构建工具的核心职责：把源码变成可部署的产物。

2. 构建工具演进

1
2
3
4
5
6
7
8
9
10
11
2009  r.js (RequireJS)
2012  Grunt（任务流）
2013  Gulp（流式）
2012  Browserify（Node 模块 → 浏览器）
2015  Webpack 1.0（统治十年）
2016  Rollup（库打包，更好的 tree-shake）
2018  Parcel（零配置）
2020  Vite（基于 esbuild + Rollup）
2020  esbuild（Go 写的超快打包）
2022  SWC（Rust 写的转译器）
2023  Turbopack（Vercel 出的，Rust）

3. Webpack

最成熟、插件生态最丰富。

3.1 核心概念

1
2
3
4
5
Entry：入口文件
Output：输出配置
Loader：转换非 JS 模块（CSS、图片）
Plugin：执行更广泛的任务（HtmlWebpackPlugin、DefinePlugin）
Mode：development / production

3.2 基本配置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
// webpack.config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  mode: 'production',
  entry: './src/main.tsx',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].[contenthash:8].js',
    chunkFilename: '[name].[contenthash:8].chunk.js',
    publicPath: '/',
    clean: true,
  },
  resolve: {
    extensions: ['.ts', '.tsx', '.js', '.jsx'],
    alias: { '@': path.resolve(__dirname, 'src') },
  },
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: 'ts-loader',  // 或 babel-loader
        exclude: /node_modules/,
      },
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader', 'postcss-loader'],
      },
      {
        test: /\.(png|jpg|svg)$/,
        type: 'asset/resource',
        generator: { filename: 'images/[hash][ext]' },
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({ template: './public/index.html' }),
  ],
  optimization: {
    splitChunks: {
      chunks: 'all',
      cacheGroups: {
        vendor: {
          test: /[\\/]node_modules[\\/]/,
          name: 'vendors',
          priority: 10,
        },
      },
    },
  },
};

3.3 常用 Loader 和 Plugin

Loader：

  • babel-loader / swc-loader / esbuild-loader：转译 JS/TS
  • ts-loader：TypeScript
  • style-loader / css-loader / sass-loader：CSS
  • file-loader / asset modules：图片/字体
  • vue-loader：Vue SFC

Plugin：

  • HtmlWebpackPlugin：生成 HTML
  • MiniCssExtractPlugin：CSS 单独提取
  • DefinePlugin：注入全局变量
  • CompressionPlugin：gzip/brotli 压缩
  • BundleAnalyzerPlugin：可视化 bundle 大小
  • CopyWebpackPlugin：复制静态资源

4. Vite（推荐）

Vite = 开发用 esbuild（快），生产用 Rollup（稳）。

4.1 为什么 Vite 快

  • ESM 原生：开发时不打包，浏览器直接加载 ESM
  • esbuild 预构建依赖：比 JS 写的打包器快 10-100 倍
  • HMR 按需：只更新改动的模块，不重载整页

4.2 创建项目

1
2
3
4
npm create vite@latest my-app -- --template react-ts
cd my-app
npm install
npm run dev    # 启动 dev server

4.3 配置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
// vite.config.ts
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import path from 'path';

export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: { '@': path.resolve(__dirname, './src') },
  },
  server: {
    port: 3000,
    open: true,
    proxy: {
      '/api': {
        target: 'http://localhost:8080',
        changeOrigin: true,
        rewrite: path => path.replace(/^\/api/, ''),
      },
    },
  },
  build: {
    outDir: 'dist',
    target: 'es2020',
    minify: 'esbuild',
    cssCodeSplit: true,
    rollupOptions: {
      output: {
        manualChunks: {
          react: ['react', 'react-dom'],
          router: ['react-router-dom'],
        },
      },
    },
  },
});

4.4 环境变量

1
2
3
4
5
6
7
8
// .env
VITE_API_URL=https://api.example.com
VITE_DEBUG=true

// src/main.ts
console.log(import.meta.env.VITE_API_URL);
console.log(import.meta.env.MODE);    // 'development' | 'production'
console.log(import.meta.env.DEV);     // boolean

5. Rollup（库打包首选）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// rollup.config.js
import typescript from '@rollup/plugin-typescript';
import resolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';

export default {
  input: 'src/index.ts',
  output: [
    { file: 'dist/index.cjs.js', format: 'cjs', exports: 'named', sourcemap: true },
    { file: 'dist/index.esm.js', format: 'esm', sourcemap: true },
  ],
  plugins: [resolve(), commonjs(), typescript()],
  external: ['react', 'react-dom'],  // 不打包 peerDependencies
};

特点：

  • Tree-shaking 极强（基于 ES Module 静态分析）
  • 输出代码可读
  • 适合库打包（不打包依赖，减小体积）

6. esbuild（超快转译）

1
2
3
4
5
6
7
8
9
10
11
// esbuild.config.js
require('esbuild').build({
  entryPoints: ['src/main.ts'],
  bundle: true,
  minify: true,
  sourcemap: true,
  target: ['es2020', 'chrome90', 'firefox90', 'safari14'],
  outfile: 'dist/bundle.js',
  loader: { '.png': 'file', '.svg': 'text' },
  define: { 'process.env.NODE_ENV': '"production"' },
}).catch(() => process.exit(1));

特点：

  • Go 写的，10-100x faster than JS-based bundlers
  • 支持 bundling、minify、TS、JSX
  • 通常作为 Vite 内部使用
  • API 简单，适合脚本/CI 场景

7. SWC（Rust 转译器）

1
2
3
4
5
6
7
8
9
// .swcrc
{
  "jsc": {
    "parser": { "syntax": "typescript", "tsx": true },
    "target": "es2020",
    "transform": { "react": { "runtime": "automatic" } }
  },
  "module": { "type": "es6" }
}

Next.js 13+ 默认用 SWC。

8. 选型建议

场景 推荐工具 理由
大型业务项目 Vite 快、生态好、配置简单
老项目迁移 Webpack 文档多、解决方案成熟
库/SDK Rollup tree-shake 好，输出可读
脚本/CI esbuild API 简单，毫秒级
大型 React/Next.js Next.js (内置) 不用选
微前端 Module Federation 跨构建工具共享

9. 关键优化技巧

9.1 代码分割

1
2
3
4
5
6
7
8
9
10
// 路由懒加载
const Home = lazy(() => import('./pages/Home'));
const About = lazy(() => import('./pages/About'));

<Suspense fallback={<Loading />}>
  <Routes>
    <Route path="/" element={<Home />} />
    <Route path="/about" element={<About />} />
  </Routes>
</Suspense>

9.2 Tree-shaking

确保导入是 ESM 风格：

1
2
3
4
5
6
// ✓ 静态导入，可被 tree-shake
import { debounce } from 'lodash-es';

// ✗ 动态属性访问，不能被 tree-shake
import _ from 'lodash';
_.debounce(...);

9.3 Bundle 分析

1
2
3
4
5
# Vite
npx vite-bundle-visualizer

# Webpack
npx webpack-bundle-analyzer dist/stats.json

9.4 缓存

1
2
3
4
// vite.config.ts
build: {
  cache: true,  // 默认开启
}

10. 调试技巧

Source Map：

  • devtool: 'eval-cheap-module-source-map'（开发）
  • devtool: 'source-map'（生产，要上传 .map 到 Sentry）

分析模块大小：

1
2
3
4
5
# Vite
vite build --mode analyze  # 需要装 rollup-plugin-visualizer

# 找大依赖
npx vite-bundle-visualizer

常见问题：

  • 循环依赖：A import B，B import A → 解包不完整。检查 import 路径
  • CSS 顺序：CSS 模块的 import 顺序决定样式优先级
  • 环境变量 undefined：VITE_ 前缀忘了（Vite）/ REACT_APP_（CRA）
  • Tree-shake 失效：用了副作用 import（import 'lib/dist/style.css'）

小结

工具 速度 配置 生态 场景
Webpack 慢 复杂 极丰富 老项目
Vite 极快 简单 较丰富 新项目首选
Rollup 中 简单 库 库打包
esbuild 最快 API 一般 脚本/CI
SWC 很快 配置文件 Next 内置 Next.js
Turbopack 很快 Next 内置 新 Next.js 14+

2026 年建议：

  • 新项目：Vite（React/Vue/Svelte）
  • 库：Rollup 或 tsup（基于 esbuild）
  • 大型企业应用：Vite + 适当自定义
  • SSR/全栈：Next.js、Nuxt、SvelteKit
  • 不用 Webpack 写新项目了

下一节讲包管理与 monorepo：pnpm、yarn、workspaces。

展开全文 >>

FE-08-包管理与 monorepo：pnpm、yarn、workspaces

FE-08-包管理与 monorepo：pnpm、yarn、workspaces

本节目标：掌握现代包管理器（pnpm）的优势，理解 monorepo 模式，能用 pnpm workspaces 搭建多包项目。

1. 包管理器演进

1
2
3
4
5
6
7
2009  npm（Node 官方）
2013  Bower（前端专用，已淘汰）
2016  yarn（Facebook，改进 npm）
2017  yarn workspaces（monorepo）
2018  pnpm（节省磁盘、速度快）
2020  pnpm workspaces（推荐 monorepo 方案）
2022  bun（Zig 写的，全功能）

2. npm 的痛点

phantom dependencies（幽灵依赖）：

1
2
3
4
5
6
my-project/
  node_modules/
    package-a/  (依赖 lodash)
    lodash/     ← 在！可以直接 import
  src/index.js
    import _ from 'lodash'  // ← 能跑，但 package.json 里没声明 lodash

node_modules 嵌套地狱：

1
2
3
my-project/node_modules/
  package-a/node_modules/lodash
  package-b/node_modules/lodash  ← 重复！

磁盘浪费：100 个项目 × 100 个相同依赖 = 1 万份副本。

3. pnpm 优势

3.1 硬链接 + 软链接

1
2
3
4
5
6
7
8
~/.local/share/pnpm/store/  ← 真实存储（每个版本只一份）
                              ↓ 硬链接
my-project/
  node_modules/
    .pnpm/                    ← 虚拟 store（按依赖关系组织）
      lodash@4.17.21/         ← 软链接到 store
    package-a -> .pnpm/package-a@1.0.0/node_modules/package-a
    lodash -> .pnpm/lodash@4.17.21/node_modules/lodash

好处：

  • 快：硬链接是文件系统操作，几乎零成本
  • 省空间：所有项目共享 store
  • 无幽灵依赖：只有 dependencies 里声明的包才能 import

3.2 安装速度对比

1
2
3
4
5
小项目（~100 包）：
  npm: 30s   yarn: 20s   pnpm: 5s   bun: 0.3s

中项目（~1000 包）：
  npm: 2min  yarn: 1min  pnpm: 15s  bun: 1s

3.3 常用命令

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
# 安装
pnpm install                 # 全量安装
pnpm add lodash              # 装到 dependencies
pnpm add -D typescript        # devDependencies
pnpm add -g pnpm              # 全局

# 移除
pnpm remove lodash

# 升级
pnpm update                  # 升级所有
pnpm update lodash --latest  # 升级到最新

# 运行脚本
pnpm dev
pnpm build
pnpm test

# 其他
pnpm outdated                # 看哪些可升级
pnpm why lodash              # 依赖树
pnpm list                    # 已装的包

4. workspace（monorepo）

monorepo = 一个仓库管理多个项目。

4.1 优势

  • 共享代码、类型、配置
  • 统一依赖管理
  • 一次 PR 改多个包，原子提交
  • 跨包重构容易

4.2 pnpm workspace 配置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
my-monorepo/
├── pnpm-workspace.yaml       ← workspace 定义
├── package.json               ← 根 package.json
├── packages/
│   ├── ui/                    ← UI 组件库
│   │   ├── package.json
│   │   └── src/
│   ├── utils/                 ← 工具函数
│   │   ├── package.json
│   │   └── src/
│   ├── app/                   ← 主应用
│   │   ├── package.json
│   │   └── src/
│   └── docs/                  ← 文档站
│       ├── package.json
│       └── src/
└── tooling/                   ← 共享配置
    ├── tsconfig/
    ├── eslint-config/
    └── vite-config/
1
2
3
4
# pnpm-workspace.yaml
packages:
  - 'packages/*'
  - 'tooling/*'
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// 根 package.json
{
  "name": "my-monorepo",
  "private": true,
  "scripts": {
    "dev": "pnpm -r --parallel run dev",
    "build": "pnpm -r run build",
    "test": "pnpm -r run test",
    "lint": "pnpm -r run lint"
  },
  "devDependencies": {
    "typescript": "^5.0.0",
    "prettier": "^3.0.0"
  }
}

4.3 共享依赖

1
2
3
4
5
6
7
8
9
10
11
// packages/ui/package.json
{
  "name": "@my-org/ui",
  "version": "0.1.0",
  "dependencies": {
    "react": "^18.0.0"  // ← 每个子包可以单独声明
  },
  "devDependencies": {
    "@my-org/eslint-config": "workspace:*"  // ← 引用 workspace 包
  }
}

workspace 协议：

  • "workspace:*"：用 workspace 里的最新版本
  • "workspace:^1.0.0"：匹配版本
  • "workspace:1.0.0"：固定版本

4.4 共享配置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
// tooling/tsconfig/base.json
{
  "compilerOptions": {
    "target": "ES2020",
    "module": "ESNext",
    "moduleResolution": "Bundler",
    "strict": true,
    "esModuleInterop": true
  }
}

// packages/ui/tsconfig.json
{
  "extends": "@my-org/tsconfig/base.json",
  "compilerOptions": {
    "jsx": "react-jsx"
  }
}

4.5 Changesets（版本管理）

1
2
pnpm add -Dw @changesets/cli
pnpm changeset init
1
2
3
4
# 改了代码后
pnpm changeset
# 选 affected packages + semver bump
# 自动生成 .md 文件记录变更
1
2
3
# 发版时
pnpm changeset version  # 更新 package.json 版本 + 生成 CHANGELOG
pnpm publish -r         # 发布到 npm

5. Turborepo（增量构建）

痛点：monorepo 里改了一个包，要重新构建所有依赖它的包。

Turborepo 缓存构建结果，只重做必要的：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
// turbo.json
{
  "$schema": "https://turbo.build/schema.json",
  "tasks": {
    "build": {
      "dependsOn": ["^build"],
      "outputs": ["dist/**"]
    },
    "test": {
      "dependsOn": ["build"],
      "outputs": ["coverage/**"]
    },
    "lint": {},
    "dev": {
      "cache": false,
      "persistent": true
    }
  }
}
1
2
3
turbo run build      # 智能构建（用缓存）
turbo run test       # 测试
turbo run dev        # 并行开发

6. 实战：搭建 monorepo

6.1 初始化

1
2
3
mkdir my-monorepo && cd my-monorepo
pnpm init
mkdir -p packages apps tooling

6.2 workspace 配置

1
2
3
4
5
# pnpm-workspace.yaml
packages:
  - 'apps/*'
  - 'packages/*'
  - 'tooling/*'

6.3 创建子包

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
# UI 组件库
mkdir -p packages/ui/src
cat > packages/ui/package.json <<EOF
{
  "name": "@my-org/ui",
  "version": "0.0.1",
  "main": "./src/index.ts",
  "type": "module",
  "scripts": {
    "build": "tsc",
    "dev": "tsc --watch",
    "lint": "eslint src"
  },
  "peerDependencies": {
    "react": "^18.0.0"
  }
}
EOF
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
# 主应用
mkdir -p apps/web/src
cat > apps/web/package.json <<EOF
{
  "name": "@my-org/web",
  "version": "0.0.1",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build"
  },
  "dependencies": {
    "@my-org/ui": "workspace:*"
  }
}
EOF

6.4 引用 workspace 包

1
2
3
4
5
6
// apps/web/src/main.tsx
import { Button } from '@my-org/ui';

function App() {
  return <Button>Click me</Button>;
}

7. pnpm vs npm vs yarn 选型

特性 npm yarn pnpm bun
速度 慢 中 快 最快
磁盘占用 大 中 小（store） 小
严格依赖 ❌ ❌ ✅ ✅
monorepo workspaces workspaces workspaces workspaces
稳定性 ✅ ✅ ✅ ⚠️ 新
Node 兼容 ✅ ✅ ✅ 部分

2026 推荐：

  • 新项目：pnpm（默认）
  • 脚本/工具：bun（如可接受新生态）
  • 现有项目：保持现状

8. 依赖管理最佳实践

1. 固定版本还是浮动版本：

1
2
3
4
5
// 严格（推荐生产）
"react": "18.2.0"

// 浮动（库用）
"react": "^18.2.0"

2. 区分 dependencies / devDependencies / peerDependencies：

  • dependencies：运行时必需
  • devDependencies：开发/构建时
  • peerDependencies：库专用，让使用方装

3. lock 文件：永远提交 pnpm-lock.yaml！

4. 漏洞扫描：

1
2
pnpm audit
pnpm audit --fix

5. License 检查：

1
npx license-checker --summary

9. CI/CD 缓存

1
2
3
4
5
6
7
8
9
10
11
12
13
# GitHub Actions
- uses: pnpm/action-setup@v4
  with:
    version: 9

- name: Get pnpm store path
  id: pnpm-cache
  run: echo "STORE_PATH=$(pnpm store path)" >> $GITHUB_OUTPUT

- uses: actions/cache@v4
  with:
    path: ${{ steps.pnpm-cache.outputs.STORE_PATH }}
    key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}

10. 常见问题

Q: pnpm install 失败 ERR_PNPM_PEER_DEP_ISSUES
A: 加 --no-strict-peer-dependencies 或修复 peer dep 声明。

Q: workspace 包找不到
A: 检查 pnpm-workspace.yaml 路径 pattern；运行 pnpm install 重新链接。

Q: 幽灵依赖（用了未声明的包）
A: pnpm 默认严格，如果一定要用，添加到 package.json 或用 .npmrc 的 shamefully-hoist=true（不推荐）。

Q: lock 文件冲突
A: pnpm install --no-frozen-lockfile 更新，或手动 merge。

小结

工具 选型建议
pnpm 新项目首选，速度快、严格、磁盘省
npm 保守选择，最稳定
yarn 现有 yarn 项目保持
bun 工具/脚本，性能极致
pnpm workspaces monorepo 首选
Turborepo 增量构建、缓存
Changesets 版本管理 + Changelog

核心原则：

  1. 永远提交 pnpm-lock.yaml
  2. workspace 包用 workspace:* 协议
  3. CI 缓存 store 目录
  4. peerDependencies 正确声明
  5. 定期 pnpm audit 修漏洞

下一节讲 React 高级：Hooks 原理、并发渲染、Server Components。

展开全文 >>

FE-09-React 高级：Hooks 原理、并发渲染、Server Components

FE-09-React 高级：Hooks 原理、并发渲染、Server Components

本节目标：理解 React Hooks 的底层原理（链表、闭包）、Concurrent Mode、Server Components，掌握 React 19 新特性。

1. React 思维模型

核心思想：

  • 声明式 UI：描述”是什么”而不是”怎么改”
  • 组件化：UI = 组件树
  • 单向数据流：props down, events up
  • 虚拟 DOM：JS 对象描述 UI，diff 后最小化更新真实 DOM
1
2
3
4
5
6
7
8
9
10
function App() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <h1>Count: {count}</h1>
      <button onClick={() => setCount(count + 1)}>+</button>
    </div>
  );
}

2. Hooks 规则与原理

2.1 Hooks 的两条铁律

  1. 只在最顶层调用（不要在循环/条件/嵌套函数里）
  2. 只在 React 函数里调用（组件函数或其他 Hook）

2.2 为什么？

React 内部用链表存储每个组件的 Hooks：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
// 简化源码
const hooks = [];      // 组件的 hooks 链表
let hookIndex = 0;     // 当前 hook 位置

function useState(initial) {
  const hook = hooks[hookIndex] || { state: initial, queue: [] };
  hookIndex++;

  hook.queue.forEach(action => {
    hook.state = typeof action === 'function' ? action(hook.state) : action;
  });
  hook.queue = [];

  const setState = (action) => {
    hook.queue.push(action);
    triggerUpdate();  // 触发 React 重新渲染
  };

  hooks[hookIndex - 1] = hook;
  return [hook.state, setState];
}

function Counter() {
  const [count, setCount] = useState(0);  // hookIndex 0
  const [name, setName] = useState('A');  // hookIndex 1
  // ...
}

如果在条件里调用 Hook：

1
2
3
4
5
6
7
8
function Counter({ cond }) {
  const [count, setCount] = useState(0);  // hookIndex 0
  if (cond) {
    const [name, setName] = useState('A');  // hookIndex 1（有时）
  }
  const [flag, setFlag] = useState(false);  // hookIndex 1 or 2
  // ← 两次渲染 hookIndex 错位，state 串了！
}

所以 ESLint 插件 eslint-plugin-react-hooks 会强制要求 Hooks 顺序稳定。

3. 核心 Hooks 深入

3.1 useState

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
const [count, setCount] = useState(0);
const [user, setUser] = useState({ name: 'Alice', age: 25 });

// 函数式更新（推荐）
setCount(c => c + 1);
setUser(u => ({ ...u, age: u.age + 1 }));

// 惰性初始化
const [data, setData] = useState(() => expensiveCompute());

// 批量更新（在 React 18+ 自动批处理）
const handleClick = () => {
  setCount(c => c + 1);
  setFlag(f => !f);
  // 只触发一次 re-render
};

3.2 useEffect

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
useEffect(() => {
  // 副作用
  const sub = api.subscribe(handleMessage);
  return () => sub.unsubscribe();  // 清理函数
}, [count]);  // 依赖项

// 空依赖：只在 mount/unmount 执行
useEffect(() => {
  console.log('mounted');
  return () => console.log('unmounted');
}, []);

// 无依赖：每次 render 都执行（罕见）
useEffect(() => {
  console.log('every render');
});

执行时机：

  1. 组件挂载后
  2. 依赖项变化后，先清理再执行
  3. 组件卸载前清理

3.3 useLayoutEffect

同步版本，在 DOM 更新后、浏览器绘制前执行：

1
2
3
4
5
6
7
8
9
useLayoutEffect(() => {
  // DOM 已更新，但浏览器还没绘制
  // 适合读 DOM 并同步修改（避免闪烁）
  ref.current.style.opacity = '0';
  // 强制 reflow
  ref.current.offsetHeight;
  ref.current.style.transition = 'opacity 0.3s';
  ref.current.style.opacity = '1';
}, []);

对比：

  • useEffect：异步，浏览器已绘制
  • useLayoutEffect：同步，浏览器未绘制
  • 99% 用 useEffect，DOM 测量/同步修改用 useLayoutEffect

3.4 useMemo / useCallback

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// useMemo：缓存计算结果
const sorted = useMemo(() => {
  return items.sort((a, b) => a.price - b.price);
}, [items]);

// useCallback：缓存函数引用
const handleClick = useCallback((id) => {
  setSelected(id);
}, []);

// 何时用？
// ✓ 传给依赖 React.memo 的子组件
// ✓ 传给 useEffect/useMemo 作为依赖
// ✗ 不要为了"优化"乱用（hook 本身有开销）

经验法则：先不优化，profile 后再决定。

3.5 useRef

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
const ref = useRef(null);
// ref.current 指向 DOM 节点
// 改变 ref.current 不会触发 re-render

// 三种用途：
// 1. 访问 DOM
<input ref={inputRef} />

// 2. 保存"不参与渲染的可变值"
const timerRef = useRef(null);
timerRef.current = setInterval(...);

// 3. 回调 ref（更灵活）
const measuredRef = useCallback((node) => {
  if (node) {
    const { width, height } = node.getBoundingClientRect();
    setSize({ width, height });
  }
}, []);

3.6 useReducer

1
2
3
4
5
6
7
8
9
10
11
12
13
const initial = { count: 0 };

function reducer(state, action) {
  switch (action.type) {
    case 'increment': return { count: state.count + 1 };
    case 'decrement': return { count: state.count - 1 };
    case 'reset': return initial;
  }
}

const [state, dispatch] = useReducer(reducer, initial);

<button onClick={() => dispatch({ type: 'increment' })}>+</button>

何时用 useReducer：

  • 状态逻辑复杂（多个子值相互依赖）
  • 下一状态取决于前状态
  • 想集中管理 action 类型

3.7 useContext

1
2
3
4
5
6
7
8
9
10
11
12
13
14
const ThemeContext = createContext('light');

function App() {
  return (
    <ThemeContext.Provider value="dark">
      <Toolbar />
    </ThemeContext.Provider>
  );
}

function Toolbar() {
  const theme = useContext(ThemeContext);
  return <div className={theme}>...</div>;
}

注意：context 变化会导致所有消费者 re-render，大型应用慎用。

3.8 自定义 Hook

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// useLocalStorage.ts
function useLocalStorage<T>(key: string, initial: T) {
  const [value, setValue] = useState<T>(() => {
    const stored = localStorage.getItem(key);
    return stored ? JSON.parse(stored) : initial;
  });

  useEffect(() => {
    localStorage.setItem(key, JSON.stringify(value));
  }, [key, value]);

  return [value, setValue] as const;
}

// 用法
const [theme, setTheme] = useLocalStorage('theme', 'light');

4. 性能优化

4.1 React.memo

浅比较 props，没变就不重渲染：

1
2
3
const Button = React.memo(function Button({ onClick, children }) {
  return <button onClick={onClick}>{children}</button>;
});

配合 useCallback / useMemo：

1
2
3
4
5
6
7
8
9
function Parent() {
  const [count, setCount] = useState(0);

  // 没 useCallback：每次 Parent render，handleClick 都是新引用
  //   → Button 的 props 变化 → Button 也 render
  const handleClick = useCallback(() => console.log('clicked'), []);

  return <Button onClick={handleClick} />;
}

4.2 列表 key

1
2
3
4
5
6
7
8
// ✓ 稳定的、唯一的 key
{items.map(item => <Item key={item.id} {...item} />)}

// ✗ 用 index（增删时会错位）
{items.map((item, i) => <Item key={i} {...item} />)}

// ✗ 随机数（每次 render 都变）
{items.map(item => <Item key={Math.random()} {...item} />)}

4.3 状态提升 vs 下放

1
2
3
4
5
6
7
8
9
10
// ✓ 状态尽量下放
function App() {
  return (
    <>
      <Header />        {/* 不需要 count */}
      <Counter />       {/* count 状态在内部 */}
      <Footer />        {/* 不需要 count */}
    </>
  );
}

4.4 虚拟列表（长列表）

1
npm install react-window
1
2
3
4
5
6
7
8
9
10
import { FixedSizeList } from 'react-window';

<FixedSizeList
  height={600}
  itemCount={10000}
  itemSize={50}
  width="100%"
>
  {({ index, style }) => <div style={style}>Row {index}</div>}
</FixedSizeList>

5. Concurrent 模式（React 18+）

核心能力：可中断的渲染。

5.1 自动批处理

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
// React 18 之前：只在事件处理器中批处理
// React 18+：所有地方都批处理
function App() {
  const [count, setCount] = useState(0);
  const [flag, setFlag] = useState(false);

  // setTimeout、Promise、原生事件都自动批处理
  setTimeout(() => {
    setCount(c => c + 1);
    setFlag(f => !f);
    // 只触发 1 次 render
  }, 1000);

  fetch().then(() => {
    setCount(c => c + 1);
    setFlag(f => !f);
    // 也只触发 1 次
  });
}

5.2 useTransition

标记非紧急更新，可被紧急更新打断：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
import { useTransition } from 'react';

function Search() {
  const [query, setQuery] = useState('');
  const [results, setResults] = useState([]);
  const [isPending, startTransition] = useTransition();

  const handleChange = (e) => {
    setQuery(e.target.value);  // 紧急：输入框立即更新

    startTransition(() => {
      // 非紧急：可以被打断
      setResults(filterBigList(e.target.value));
    });
  };

  return (
    <>
      <input value={query} onChange={handleChange} />
      {isPending && <Spinner />}
      <ResultList results={results} />
    </>
  );
}

5.3 useDeferredValue

延迟某个值的更新：

1
2
3
4
5
6
7
8
9
10
11
12
import { useDeferredValue } from 'react';

function Search({ query }) {
  const deferredQuery = useDeferredValue(query);

  return (
    <>
      <input value={query} />
      <SlowList query={deferredQuery} />  {/* 慢操作使用 deferred */}
    </>
  );
}

5.4 Suspense

等待异步组件，渲染 fallback：

1
2
3
4
5
6
7
import { Suspense, lazy } from 'react';

const Heavy = lazy(() => import('./Heavy'));

<Suspense fallback={<Loading />}>
  <Heavy />
</Suspense>

数据获取（搭配 React Query / SWR）：

1
2
3
<Suspense fallback={<Skeleton />}>
  <UserDetail userId={id} />  {/* 内部用 use() 抛 Promise */}
</Suspense>

6. Server Components（RSC）

React 的新范式：组件在服务器渲染，不发到客户端。

6.1 优势

  • bundle size 减小：服务器组件的代码不发到浏览器
  • 直接访问后端：DB、文件系统、内部服务
  • 首屏更快：HTML 流式响应
  • SEO 友好

6.2 用法（Next.js 13+ App Router）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// app/page.tsx（默认 Server Component）
import { getData } from './db';

export default async function Page() {
  const data = await getData();  // 直接 await，服务器端执行
  return <div>{data.title}</div>;
}

// app/ClientComponent.tsx（要交互的，加 'use client'）
'use client';
import { useState } from 'react';

export default function Counter() {
  const [count, setCount] = useState(0);
  return <button onClick={() => setCount(c => c + 1)}>{count}</button>;
}

6.3 何时用 Server vs Client

用 Server 用 Client
静态内容、SEO 用户交互（onClick, onChange）
数据获取、DB 查询 浏览器 API（localStorage, fetch 的浏览器版本）
大型依赖（marked, sharp） 状态管理（useState, useReducer）
敏感逻辑（API keys） 动画、过渡效果

7. React 19 新特性

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
// 1. use() Hook：读取 Promise/Context
function User({ userPromise }) {
  const user = use(userPromise);  // 自动 Suspense
  return <div>{user.name}</div>;
}

// 2. Form Actions
function Form() {
  async function action(formData) {
    'use server';
    await saveToDB(formData);
  }
  return <form action={action}><button>Submit</button></form>;
}

// 3. useOptimistic（乐观更新）
function Like({ likes }) {
  const [optimisticLikes, addOptimisticLike] = useOptimistic(likes);
  async function handleLike() {
    addOptimisticLike(likes + 1);  // 立即更新 UI
    await api.like();               // 后台同步
  }
  return <button onClick={handleLike}>❤️ {optimisticLikes}</button>;
}

// 4. useActionState
function Form() {
  const [state, formAction, isPending] = useActionState(action, initial);
  return <form action={formAction}>...</form>;
}

// 5. ref 作为 prop（不再需要 forwardRef）
function Input({ ref, ...props }) {
  return <input ref={ref} {...props} />;
}

8. 状态管理选型

方案 适用场景 缺点
useState + Context 小应用、跨组件共享 频繁更新性能差
Redux Toolkit 大型应用、复杂状态 学习曲线
Zustand 中小型应用、轻量级 生态较小
Jotai 原子化状态 生态较小
Recoil Meta 风格（已不推荐） 维护减少
TanStack Query 服务端状态 不是 UI 状态

Zustand 示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
import { create } from 'zustand';

interface BearState {
  bears: number;
  increase: (by: number) => void;
  reset: () => void;
}

const useBearStore = create<BearState>((set) => ({
  bears: 0,
  increase: (by) => set((s) => ({ bears: s.bears + by })),
  reset: () => set({ bears: 0 }),
}));

// 用法
function BearCounter() {
  const bears = useBearStore((s) => s.bears);
  const increase = useBearStore((s) => s.increase);
  return <button onClick={() => increase(1)}>{bears}</button>;
}

9. 测试

React Testing Library（推荐）：

1
2
3
4
5
6
7
8
9
import { render, screen, fireEvent } from '@testing-library/react';
import Counter from './Counter';

test('increments counter', () => {
  render(<Counter />);
  const button = screen.getByRole('button');
  fireEvent.click(button);
  expect(button).toHaveTextContent('1');
});

Vitest（更快的 Jest 替代）：

1
2
3
4
5
6
7
8
9
import { describe, it, expect } from 'vitest';
import { render } from '@testing-library/react';

describe('Counter', () => {
  it('renders', () => {
    const { getByText } = render(<Counter />);
    expect(getByText('Count: 0')).toBeInTheDocument();
  });
});

小结

概念 关键点
Hooks 链表存储，必须顶层调用
渲染 函数式组件返回 JSX
状态 useState/useReducer，state 不可变
副作用 useEffect（异步）vs useLayoutEffect（同步）
性能 memo、useCallback、useMemo、下放状态
并发 useTransition、useDeferredValue、Suspense
RSC 默认在服务器，要交互加 ‘use client’
React 19 use()、Form Actions、useOptimistic

2026 React 生态推荐：

  • 新项目：Next.js 14+ App Router（默认 RSC）
  • 库：Vite + React 19
  • 状态：Zustand（小）/ Redux Toolkit（大）
  • 数据：TanStack Query (React Query)
  • 样式：Tailwind CSS / CSS Modules
  • 测试：Vitest + React Testing Library + Playwright

下一节讲 Vue 3 进阶：响应式原理、Composition API、性能优化。

展开全文 >>

FE-10-Vue 3 进阶：响应式原理、Composition API 与性能

FE-10-Vue 3 进阶：响应式原理、Composition API 与性能

本节目标：深入理解 Vue 3 的响应式系统（Proxy vs defineProperty）、Composition API、生命周期、性能优化。

1. Vue 3 vs Vue 2

特性 Vue 2 Vue 3
响应式实现 Object.defineProperty Proxy
API 风格 Options API 为主 Composition API + Options
TypeScript 凑合 一流
包大小 较大 Tree-shakable，按需引入
Fragment 不支持 支持（多根节点）
Teleport 第三方 内置
Suspense 无 内置
性能 一般 1.3-2x 提升

2. 响应式原理：Proxy

2.1 Vue 2 的痛点

1
2
3
4
5
// Vue 2 用 Object.defineProperty
Object.defineProperty(obj, 'count', {
  get() { return this._count; },
  set(val) { this._count = val; /* 通知 watcher */ },
});

问题：

  • 不能监听新增/删除属性（要 Vue.set/Vue.delete）
  • 不能监听数组下标（要重写 7 个方法）
  • 初始化时遍历所有属性，大对象慢

2.2 Vue 3 的 Proxy

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// Vue 3 用 Proxy
const obj = new Proxy(target, {
  get(target, key, receiver) {
    track(target, key);  // 依赖收集
    return Reflect.get(target, key, receiver);
  },
  set(target, key, value, receiver) {
    const result = Reflect.set(target, key, value, receiver);
    trigger(target, key);  // 触发更新
    return result;
  },
  deleteProperty(target, key) {
    const result = Reflect.deleteProperty(target, key);
    trigger(target, key);
    return result;
  },
});

优势：

  • 监听新增/删除属性自然支持
  • 数组下标、length 变化都监听
  • 懒代理（访问时才包装）

2.3 依赖收集与派发

1
2
3
4
5
6
7
8
9
render() 被调用
   ↓
访问 obj.count 触发 get
   ↓
track('count', currentEffect)  // 把当前 effect 加到 count 的依赖列表
   ↓
obj.count 变化时
   ↓
trigger('count')  // 重新执行所有依赖 effect

3. Composition API

核心组合式函数：ref、reactive、computed、watch、watchEffect、生命周期钩子。

3.1 ref

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
import { ref } from 'vue';

// 基本类型
const count = ref(0);
count.value++;          // JS 中
// <div>{{ count }}</div>  // 模板中自动解包

// 对象（推荐用 reactive）
const user = ref({ name: 'Alice', age: 25 });
user.value.name = 'Bob';

// 解构（会失去响应性）
const { name } = user.value;  // ❌ 静态值
// 用 toRefs
const { name } = toRefs(user.value);  // ✅

3.2 reactive

1
2
3
4
5
6
7
8
9
10
11
12
13
import { reactive } from 'vue';

const state = reactive({
  count: 0,
  user: { name: 'Alice', age: 25 },
});

state.count++;  // 直接修改，触发更新

// 解构
const { count, user } = state;  // ❌ 失去响应性
// 用 toRefs
const { count, user } = toRefs(state);  // ✅

ref vs reactive 选型：

  • 基本类型：ref
  • 对象：reactive（更直观）
  • 混合：都可以，看团队习惯

3.3 computed

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
import { ref, computed } from 'vue';

const firstName = ref('Alice');
const lastName = ref('Smith');

const fullName = computed(() => `${firstName.value} ${lastName.value}`);
// fullName.value

// 可写 computed
const fullName = computed({
  get: () => `${firstName.value} ${lastName.value}`,
  set: (v) => {
    [firstName.value, lastName.value] = v.split(' ');
  },
});

computed vs methods：

  • computed：有缓存，依赖不变就不重新算
  • methods：每次调用都执行

3.4 watch

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
import { ref, watch } from 'vue';

const count = ref(0);

// 监听 ref
watch(count, (newVal, oldVal) => {
  console.log(`count: ${oldVal} -> ${newVal}`);
});

// 监听多个
watch([count, name], ([newCount, newName], [oldCount, oldName]) => {
  // ...
});

// 监听 reactive 的属性
const state = reactive({ count: 0, name: 'A' });
watch(() => state.count, (newVal) => { /* ... */ });

// 立即执行
watch(source, callback, { immediate: true });

// 深度监听（默认 reactive 自动深度）
watch(state, (newVal) => { /* ... */ }, { deep: true });

3.5 watchEffect

自动收集依赖：

1
2
3
4
5
6
7
8
9
10
import { watchEffect } from 'vue';

const count = ref(0);
const name = ref('A');

// 自动追踪 count 和 name
watchEffect(() => {
  console.log(`${name.value}: ${count.value}`);
});
// 立即执行一次 + count/name 变化时执行

watch vs watchEffect：

  • watch：显式指定依赖
  • watchEffect：自动收集

3.6 生命周期

1
2
3
4
5
6
7
8
9
10
11
import { onMounted, onUpdated, onUnmounted, onBeforeMount, onBeforeUnmount } from 'vue';

onMounted(() => {
  console.log('mounted');
  // 访问 DOM
  document.querySelector('.el');
});

onUnmounted(() => {
  console.log('unmounted');
});

Vue 3 生命周期对照：

Vue 2 Vue 3
beforeCreate （无，setup 是替代）
created （无，setup 是替代）
beforeMount onBeforeMount
mounted onMounted
beforeUpdate onBeforeUpdate
updated onUpdated
beforeDestroy onBeforeUnmount
destroyed onUnmounted
errorCaptured onErrorCaptured

Composition API 用 onXxx 注册，必须在 setup 同步执行。

4. 组件通信

4.1 Props / Emits

1
2
3
4
5
6
7
8
9
10
11
// 父
const count = ref(0);
<Child :count="count" @update="handleUpdate" />

// 子
const props = defineProps<{ count: number }>();
const emit = defineEmits<{
  (e: 'update', value: number): void;
}>();

emit('update', props.count + 1);

4.2 Provide / Inject

跨层级传值（替代 Event Bus）：

1
2
3
4
5
6
7
8
9
10
// 祖先
import { provide, ref } from 'vue';

const theme = ref('dark');
provide('theme', theme);

// 后代
import { inject } from 'vue';

const theme = inject<Ref<string>>('theme', ref('light'));

最佳实践：用 Symbol 作 key 避免冲突 + provide 类型

1
2
3
// keys.ts
import type { InjectionKey, Ref } from 'vue';
export const ThemeKey: InjectionKey<Ref<string>> = Symbol('theme');

4.3 v-model 升级

Vue 3 的 v-model 拆解：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!-- 父 -->
<CustomInput v-model="search" />

<!-- 等价于 -->
<CustomInput
  :modelValue="search"
  @update:modelValue="search = $event"
/>

<!-- 子（Vue 3 风格） -->
<script setup>
defineProps<{ modelValue: string }>();
const emit = defineEmits<{
  (e: 'update:modelValue', value: string): void;
}>();
</script>
<template>
  <input
    :value="modelValue"
    @input="emit('update:modelValue', $event.target.value)"
  />
</template>

多 v-model：

1
<Form v-model:title="title" v-model:body="body" />

5. 性能优化

5.1 v-memo（Vue 3.2+）

模板片段记忆化：

1
2
3
4
<div v-for="item in list" :key="item.id" v-memo="[item.id, item.selected]">
  <!-- 只有 item.id 或 item.selected 变化时才重新渲染 -->
  {{ item.name }}
</div>

5.2 shallowRef / shallowReactive

只对顶层响应，深层不包装：

1
2
3
4
import { shallowRef, shallowReactive } from 'vue';

const bigList = shallowRef([...]);  // 数组本身响应，元素变化不触发
// 适用于大对象、外部库实例

5.3 markRaw

标记对象永远不响应：

1
2
3
4
5
6
7
8
9
10
import { reactive, markRaw } from 'vue';

class BigLibrary {
  // 很多方法、字段
}

const instance = new BigLibrary();
const state = reactive({
  lib: markRaw(instance),  // 不代理这个，性能大幅提升
});

5.4 组件定义

1
2
3
4
5
// 同步引入（默认）
import MyComponent from './MyComponent.vue';

// 异步（路由级 code split）
const Admin = defineAsyncComponent(() => import('./Admin.vue'));

5.5 列表渲染

1
2
3
4
5
<!-- ✓ 稳定的 key -->
<div v-for="item in items" :key="item.id">{{ item.name }}</div>

<!-- ✗ index 会在增删时错位 -->
<div v-for="(item, i) in items" :key="i">{{ item.name }}</div>

5.6 computed 缓存

1
2
3
4
5
// ✓ 缓存：依赖不变不重算
const filtered = computed(() => list.filter(x => x.active));

// ✗ 每次 render 都重算
const filtered = list.filter(x => x.active);  // 在模板里

6. Suspense（异步组件）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<template>
  <Suspense>
    <template #default>
      <AsyncUserProfile />
    </template>
    <template #fallback>
      <Loading />
    </template>
  </Suspense>
</template>

<script setup>
const AsyncUserProfile = defineAsyncComponent(() => import('./UserProfile.vue'));
</script>

配合 async setup：

1
2
3
4
// UserProfile.vue
<script setup>
const user = await fetchUser(props.id);  // 顶层 await
</script>

7. Teleport（传送门）

把组件渲染到 DOM 任意位置：

1
2
3
4
5
6
7
<template>
  <button @click="show = true">Open Modal</button>

  <Teleport to="body">
    <Modal v-if="show" @close="show = false" />
  </Teleport>
</template>

用途：Modal、Toast、Tooltip 等浮层。

8. 自定义指令

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// v-focus
app.directive('focus', {
  mounted(el) { el.focus(); },
});

// 局部
<script setup>
const vFocus = {
  mounted(el) { el.focus(); },
};
</script>

<template>
  <input v-focus />
</template>

9. 状态管理 Pinia

1
npm install pinia
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
// stores/user.ts
import { defineStore } from 'pinia';
import { ref, computed } from 'vue';

export const useUserStore = defineStore('user', () => {
  const name = ref('Alice');
  const age = ref(25);
  const isAdult = computed(() => age.value >= 18);

  function setName(n: string) {
    name.value = n;
  }

  return { name, age, isAdult, setName };
});

// 组件中使用
import { useUserStore } from '@/stores/user';
const user = useUserStore();

user.setName('Bob');
console.log(user.isAdult);

10. 服务端渲染（Nuxt 3）

1
npx nuxi@latest init my-nuxt-app
1
2
3
4
5
6
7
<!-- pages/index.vue -->
<script setup>
const { data } = await useFetch('/api/user');
</script>
<template>
  <h1>{{ data?.name }}</h1>
</template>

Nuxt 3 优势：

  • 默认 SSR
  • 文件路由
  • 自动 import
  • 集成 server（server/api/）

11. Vue 3 生态推荐（2026）

类别 推荐
全栈框架 Nuxt 3
状态管理 Pinia（官方）
UI 组件 Element Plus、Naive UI、Vuetify
表单 VeeValidate 4 + Yup/Zod
路由 Vue Router 4（默认）
测试 Vitest + Vue Test Utils
构建 Vite（默认）
静态站点 VitePress / Nuxt Content

小结

概念 关键点
响应式 Proxy + 依赖收集（effect）
Composition ref/reactive/computed/watch
生命周期 onXxx 钩子，setup 同步注册
性能 v-memo、shallowRef、markRaw
全栈 Nuxt 3（首选）
状态 Pinia（替代 Vuex）

Vue 3 选型建议：

  • 已有 Vue 2 项目：升级到 Vue 3（Composition API 兼容层）
  • 新项目：Vue 3 + Vite + Pinia + Element Plus
  • 全栈：Nuxt 3
  • 文档站：VitePress

下一节讲状态管理：Redux / Zustand / Pinia / MobX 对比。

展开全文 >>

tag:

    缺失模块。
    1、请确保node版本大于6.2
    2、在博客根目录（注意不是yilia-plus根目录）执行以下命令：
    npm i hexo-generator-json-content --save

    3、在根目录_config.yml里添加配置： 

      jsonContent:
    meta: false
    pages: false
    posts:
      title: true
      date: true
      path: true
      text: false
      raw: false
      content: false
      slug: false
      updated: false
      comments: false
      link: false
      permalink: false
      excerpt: false
      categories: false
      tags: true

主要涉及技术：
Java后端开发、Linux开发、
公众号开发、开源爱好者、Linux

联系QQ:562054870