前端 on 吾爱主机

Vue 3 响应式系统：Proxy、依赖收集与 effect 调度工程实践

Sun, 26 Jul 2026 00:00:00 +0800

改了数据视图却不更新、解构后“丢响应”、深度监听里 newValue === oldValue、异步里创建的 watch 内存泄漏——这些坑多半不是“Vue 坏了”，而是 依赖收集（track）与派发更新（trigger） 的契约被绕开了。本文基于 Vue 官方 Reactivity in Depth、Reactivity Fundamentals、Watchers 与 Reactivity API 文档，并结合 MDN 的 Proxy 说明，把 Vue 3 响应式从原理讲到可复现的工程实践。

问题背景：为什么“改了变量 UI 不跟着变”

普通 JavaScript 赋值不会自动重算依赖值。官方用表格公式类比：

let A0 = 1
let A1 = 2
let A2 = A0 + A1
A0 = 2
// A2 仍然是 3

要让 A2 随依赖变化，需要三件事：

读依赖时登记订阅（track）
写依赖时通知订阅者（trigger）
把“重算逻辑”包装成 effect，在依赖变化时重跑

Vue 做不到拦截局部变量读写（语言层面没有钩子），但能拦截 对象属性 的读/写。Vue 2 主要靠 Object.defineProperty 的 getter/setter；Vue 3 对 响应式对象使用 Proxy，对 ref 使用 getter/setter。MDN 指出 Proxy 可自定义对象的基础操作（属性查找、赋值、枚举、函数调用等），这正是 Vue 运行时收集依赖的入口。

核心原理：track / trigger / effect

1. Proxy 拦截对象属性

官方伪代码把机制压缩得很清楚：

function reactive(obj) {
 return new Proxy(obj, {
 get(target, key) {
 track(target, key)
 return target[key]
 },
 set(target, key, value) {
 target[key] = value
 trigger(target, key)
 }
 })
}

function ref(value) {
 const refObject = {
 get value() {
 track(refObject, 'value')
 return value
 },
 set value(newValue) {
 value = newValue
 trigger(refObject, 'value')
 }
 }
 return refObject
}

含义：

读路径调用 track：当前正在执行的 effect 订阅该属性。
写路径调用 trigger：通知订阅该属性的 effect 重跑。
ref 把任意类型装进带 .value 的容器，用 getter/setter 完成同一套 track/trigger。

2. 依赖存储结构

effect 订阅存在全局结构（概念上）为：

WeakMap<target, Map<key, Set<effect>>>

target：原始对象（或 ref 对象）
key：属性名（ref 固定为 'value'）
Set<effect>：依赖该属性的副作用集合

track 时若存在 activeEffect，把它加入对应 Set；trigger 时遍历该 Set 并执行。WeakMap 以对象为键，目标对象不再被引用时依赖图可被 GC，这是设计上的关键点。

3. activeEffect 与 Reactive Effect

let activeEffect

function whenDepsChange(update) {
 const effect = () => {
 activeEffect = effect
 update()
 activeEffect = null
 }
 effect() // 首次运行即可完成依赖收集
}

首次执行 effect 时，内部读到的响应式属性都会把“当前 effect”登记为订阅者；之后依赖变更再 trigger。Vue 对外暴露的 watchEffect() 就是创建这种 Reactive Effect 的 API：立即运行、自动收集依赖、依赖变化后重跑。组件渲染本身也是一个（更复杂的）reactive effect——状态与 DOM 同步的底层模型。

4. computed 是带缓存的 effect

import { ref, computed } from 'vue'

const A0 = ref(0)
const A1 = ref(1)
const A2 = computed(() => A0.value + A1.value)

computed 内部用 reactive effect 管理失效与重算：依赖不变时读缓存，依赖变更后标记脏并在下次读取时重算。适合 派生状态；需要发请求、写 DOM 等 副作用 时用 watch / watchEffect。

API 选型：ref、reactive、shallow、readonly

API	本质	默认深度	典型用途
`ref(x)`	`.value` 容器；对象值会再走 `reactive`	深	基本类型与统一写法的首选
`reactive(obj)`	ES Proxy，≠ 原对象	深	对象/数组状态（注意解构与身份）
`shallowRef(x)`	只跟踪 `.value` 替换	浅	大对象、不可变快照、外部状态库
`shallowReactive(obj)`	仅根属性响应式	浅	根级大表/性能边界（慎嵌套）
`readonly(x)`	只读深代理，仍可被 track	深	对外暴露不可变视图
`toRaw` / `markRaw`	逃逸/标记永不代理	—	读原对象、第三方实例、性能 opt-out

关键事实（官方 API 文档）：

reactive() 深转换嵌套属性；嵌套 ref 在作为对象属性访问时会 自动解包；作为 数组元素或 Map 值 访问时 不解包，仍需 .value。
对同一对象多次 reactive() 返回 同一 proxy；对已有 proxy 再 reactive() 仍返回该 proxy。
reactive 代理与原对象用 === 比较为 false。务必始终通过 proxy 访问，不要混用原对象与代理。
shallowRef：只改 state.value.count 不会触发依赖；替换 state.value = {...} 才会。需要在浅层 ref 上做深变更后强制更新时，用 triggerRef(shallow)。

实践一：最小可运行依赖图

下面用 Node + Vue 运行时演示 track/trigger（无需浏览器）：

# 任选一种安装方式
npm init -y
npm i vue@3

// lab-reactivity.mjs
import {
 ref, reactive, computed, watch, watchEffect,
 shallowRef, triggerRef, toRaw, isReactive
} from 'vue'

const count = ref(0)
const doubled = computed(() => count.value * 2)

const logs = []
const stop = watchEffect(() => {
 logs.push(`effect: count=${count.value}, doubled=${doubled.value}`)
})

count.value++
count.value++
stop()

console.log(logs)
// 首次 + 两次变更，共 3 条（具体实现细节可能批量，但依赖关系清晰）

// Proxy 身份
const raw = { n: 1 }
const state = reactive(raw)
console.log('proxy===raw?', state === raw) // false
console.log('toRaw(state)===raw?', toRaw(state) === raw) // true
console.log('isReactive(state)', isReactive(state)) // true

// 浅层 ref
const bag = shallowRef({ items: [1, 2, 3] })
let shallowHits = 0
watchEffect(() => {
 shallowHits++
 // 仅读取 .value 建立依赖；内部字段变更不自动 trigger
 console.log('bag size hint', bag.value.items.length)
})
bag.value.items.push(4) // 通常不会再次触发 effect
triggerRef(bag) // 手动 trigger
console.log('shallowHits after triggerRef', shallowHits)

运行：

node lab-reactivity.mjs

观察点：

watchEffect 首次即执行，读 count / doubled 完成订阅。
state === raw 为 false，但 toRaw(state) === raw 为 true。
shallowRef 内部 push 不自动更新依赖，triggerRef 后才会。

实践二：组件里常见写法与正确边界

解构与“丢响应”

把 reactive 对象的属性赋给局部变量后，再读写局部变量 不再经过 Proxy trap，因此不再响应式。若局部变量指向对象，修改该对象内部仍可能触发（因为仍是代理对象），但“换绑”到另一个值不会：

import { reactive, toRefs } from 'vue'

const state = reactive({ count: 0, user: { name: 'Ada' } })

// 丢：基本类型解构成局部变量
let { count } = state
count++ // 不触发视图

// 保：保持在 proxy 上访问
state.count++

// 保：需要解构时用 toRefs，得到一堆 ref
const { count: countRef } = toRefs(state)
countRef.value++

`watch` vs `watchEffect`

	`watchEffect`	`watch`
首次执行	立即	默认懒执行（`immediate: true` 可立刻跑）
依赖声明	执行时自动收集	显式 source（ref / getter / reactive / 数组）
新旧值	无	回调拿到 `newValue` / `oldValue`
深度	读到即收集	直接 watch reactive 对象时隐式 deep；getter 默认浅

import { ref, reactive, watch, watchEffect } from 'vue'

const id = ref('a')
const state = reactive({ nested: { n: 0 } })

// 自动收集 id
watchEffect(() => {
 console.log('load', id.value)
})

// 精确 source + 新旧值
watch(id, (next, prev) => {
 console.log('id changed', prev, '->', next)
})

// 直接 watch reactive → 深监听；深层 mutation 时 new===old
watch(state, (nv, ov) => {
 console.log('deep mutate', nv === ov) // true（对象引用未换）
})

// getter 默认只在返回值“变”时触发；要深层需 { deep: true }
watch(
 () => state.nested,
 () => console.log('nested replaced or deep'),
 { deep: true }
)

flush 时序：`pre` / `post` / `sync`

状态变更可能同时触发组件更新与用户 watcher。默认会批量，避免数组连续 push 一千次就回调一千次。

默认 flush: 'pre'：在父组件更新之后、拥有者组件 DOM 更新之前调用。此时读自己的 DOM 仍是更新前状态。
flush: 'post'（或 watchPostEffect）：在 DOM 更新后执行，适合量尺寸、聚焦输入框。
flush: 'sync'（或 watchSyncEffect）：依赖一变立刻同步跑；官方提醒可能带来性能与一致性问题，仅在少数缓存失效场景使用。

watch(source, cb, { flush: 'post' })

组件渲染本身也不是同步刷 DOM：变更后会缓冲到更新周期的 next tick，保证同一轮同步代码里多次改状态只渲染一次。需要等 DOM 落地时用 nextTick()。

异步创建 watcher 必须手动 stop

在 setup / <script setup> 同步创建的 watch / watchEffect 会绑定组件实例，卸载时自动停止。若在 setTimeout、then 等异步回调里创建，不会自动绑定，需保存返回句柄并 stop()，否则泄漏：

// 危险
setTimeout(() => {
 watchEffect(() => { /* ... */ })
}, 0)

// 正确：尽量同步创建；或
const stop = watchEffect(() => {})
// 不再需要时
stop()

副作用清理（取消上一次请求）可用回调第三个参数 onCleanup，或 Vue 3.5+ 的 onWatcherCleanup（须在 watcher 同步执行阶段注册，不能写在 await 之后）。

外部状态 / 大列表：shallowRef 模式

对接 Immer、XState、不可变快照时，官方推荐 用 shallowRef 持有外部状态，状态变更时 替换 .value 触发更新，而不是深代理整棵树：

import { shallowRef } from 'vue'
import { produce } from 'immer'

export function useImmer(baseState) {
 const state = shallowRef(baseState)
 const update = (updater) => {
 state.value = produce(state.value, updater)
 }
 return [state, update]
}

实践三：排错清单（从现象到机制）

现象	可能原因	排查/修法
改了字段 UI 不动	改的是原对象而非 proxy；或 Options API 里运行时往 `this` 上动态加未在 `data` 声明的字段	始终通过 `reactive`/`ref`/组件状态访问；预声明字段
解构后失效	基本类型离开 proxy trap	`toRefs` / 保持 `state.x` / 用 `ref`
`===` 意外 false	proxy 与 raw 身份不同	`toRaw` 比对；不要缓存 raw 再与 proxy 混比
深 watch 里 new===old	同一对象引用上的深层 mutation	预期行为；需要 diff 时自行对比字段或换不可变更新
watch 不跑	默认 lazy；或 getter 只返回同一对象引用	`immediate: true`；`deep: true` 或 watch reactive 本体
大列表卡顿	深代理整表	`shallowRef` + 替换引用；`markRaw` 固定第三方实例
卸载后仍请求	异步创建的 effect 未 stop / 未 onCleanup	同步创建或手动 stop；请求取消挂到 cleanup
Dev 难查谁触发渲染	依赖图不透明	`onRenderTracked` / `onRenderTriggered`；`computed`/`watch` 的 `onTrack`/`onTrigger`（仅开发模式）

与 Signals / 编译期响应式的位置

官方把 Vue ref 与 Solid/Angular/Preact 等 signals 归为同类原语：值容器 + 访问时收集依赖 + 变更时触发副作用。Vue 目前渲染仍以 Virtual DOM 为主，并借助编译优化；运行时响应式的优点是可无构建步骤、边界情况相对少；代价是受 JS 语法限制，需要 .value 这类容器。团队曾探索 Reactivity Transform，最终未作为项目方向推进——工程上仍应以稳定的 runtime API 为准。

总结

机制：Proxy（对象）与 getter/setter（ref）在读时 track、写时 trigger；订阅表概念上是 WeakMap → Map → Set；activeEffect 把“当前执行的副作用”挂到读路径上。
选型：日常优先 ref；对象图用 reactive 但警惕身份与解构；大对象/外部库用 shallowRef/markRaw；对外暴露用 readonly。
副作用：派生用 computed；带新旧值与精确 source 用 watch；自动依赖用 watchEffect；注意 flush、批量更新与 nextTick。
生命周期：同步创建的 watcher 随组件卸载；异步创建必须手动 stop，请求类副作用要 onCleanup。
排错：先问“这次读写有没有经过 trap？依赖是不是期望的那一个 key？触发的是替换引用还是原地 mutation？”

理解 track/trigger 之后，很多“玄学不更新”会变成可定位的契约问题，而不是框架黑盒。

参考资料

Vue.js — Reactivity in Depth（机制伪代码、WeakMap 依赖结构、调试钩子、外部状态集成）
Vue.js — Reactivity Fundamentals（ref/reactive、深响应、Proxy 与原对象、DOM 更新时序）
Vue.js — Watchers（watch/watchEffect、deep/immediate、flush、停止与泄漏）
Vue.js — Reactivity API: Core（ref/computed/reactive/readonly/watch* 类型与行为）
Vue.js — Reactivity API: Advanced（shallowRef、triggerRef、customRef、toRaw、markRaw、effectScope）
MDN — Proxy（属性访问拦截的语言基础）

Vite 8.1 升级实战：Rolldown、Node 版本与前端构建链检查清单

Mon, 06 Jul 2026 22:28:04 +0800

Vite 8 已经进入可用于日常升级评估的 8.1.x 分支。根据 Vite 官方发布记录，v8.1.0 于 2026-06-23 发布，随后 v8.1.1、v8.1.2 与 v8.1.3 在 6 月底到 7 月初持续修复构建、CSS、SSR、依赖扫描等问题；npm registry 中当前 vite@latest 指向 8.1.3，并明确要求 Node.js 版本满足 ^20.19.0 || >=22.12.0。

这篇文章不是简单翻译 changelog，而是把官方迁移文档、GitHub Release/CHANGELOG 与 npm 包元数据合并成一份适合团队落地的升级指南：哪些变化真正会影响项目，哪些配置应该提前检查，以及如何用最小风险把 Vite 7 或早期 Vite 8 项目推进到 8.1.x。

为什么 Vite 8.1 值得关注

Vite 8 的核心变化不是“又一个小版本”，而是构建链底层发生了明显转向：官方迁移文档写明，Vite 8 使用 Rolldown 与 Oxc 相关工具替代过去更常见的 esbuild/Rollup 组合。对普通业务项目来说，这通常意味着更快的依赖预构建与生产构建潜力；对有复杂插件、SSR、自定义 Rollup 配置或 monorepo 的项目来说，也意味着需要更认真地验证边界行为。

Vite 官方的版本策略也说明，当前常规补丁发布集中在 vite@8.1；重要修复和安全补丁会回补到 vite@7.3 与 vite@8.0，安全补丁还会回补到 vite@6.4。如果项目仍停留在更早版本，虽然短期内可能还能运行，但已经不适合作为长期维护基线。

升级前先确认 Node.js 版本

npm 元数据给出的 vite@8.1.3 engines 为：

{
 "node": "^20.19.0 || >=22.12.0"
}

这意味着团队不要只写“Node 20+”这么粗略的要求。CI、Dockerfile、开发机版本管理工具都应该精确到小版本，至少满足 Node 20.19.0，或者升级到 22.12.0 及以上。

建议先在项目根目录执行：

node -v
npm ls vite
npm view vite version engines

如果项目使用 pnpm 或 yarn，也建议同步检查 lockfile 与 CI 缓存策略：

pnpm why vite
pnpm env use --global 22
# 或在 CI 镜像中固定：node:22.12-bookworm / node:22-bookworm

对生产构建来说，Node 版本不一致是最常见的“本地能过、CI 失败”来源之一。升级 Vite 前先统一 Node，能减少很多无效排查。

核心变化一：Rolldown 成为默认构建基础

官方迁移文档提到，Vite 8 使用 Rolldown 和 Oxc based tools。对于多数应用项目，vite build 命令仍然是同一个命令，但底层打包器行为可能影响以下场景：

依赖预构建、动态导入、chunk 拆分结果；
自定义插件中对 Rollup hook 返回值、sourcemap、虚拟模块 ID 的假设；
SSR 构建时的错误堆栈、external 模块处理；
monorepo 中 pnpm workspace、软链接、.modules.yaml 解析。

Vite 8.1.x 的 changelog 正好体现了这些修复重点：8.1.1 修复了 bundled dev 下 HMR/lazy compile 产物服务、import.meta.hot.invalidate() 栈溢出、CSS/Sass @import 中 tsconfig paths 解析、pnpm workspace 根目录解析等问题；8.1.3 又修复了嵌套动态导入的 CSS preload、SSR 首行 stacktrace 列位置等问题。

因此，如果你的项目有复杂插件或 SSR，不建议直接从旧版本跳到 8.1 后立即上线，而应该先建立一组构建回归用例。

核心变化二：默认浏览器目标更新

Vite 迁移文档说明，build.target 的默认值 baseline-widely-available 对应的浏览器版本更新为：

Chrome 111
Edge 111
Firefox 114
Safari 16.4

这组版本对应 2026-01-01 的 Baseline Widely Available 特性集合。实际影响是：如果你的用户仍包含更老的浏览器，尤其是企业内网老 Safari、嵌入式 WebView 或长期不更新的 Chromium 内核，就不能完全依赖默认值。

保守项目可以显式设置构建目标：

// vite.config.ts
import { defineConfig } from 'vite'

export default defineConfig({
 build: {
 target: ['chrome107', 'edge107', 'firefox104', 'safari16']
 }
})

但从长期维护角度看，建议先用访问日志或前端监控确认真实用户浏览器分布。如果老版本浏览器占比极低，跟随默认 baseline 通常能换来更少 polyfill、更现代的输出和更简单的调试体验。

核心变化三：依赖优化与 CSS 处理更需要回归

vite@8.1.3 的依赖列表包含 rolldown、lightningcss、postcss、picomatch、tinyglobby 等。CHANGELOG 中也有多项与 CSS、依赖扫描相关的修复，例如：

inlined CSS 注入时避开 shebang 行；
嵌套动态导入场景下预加载 CSS；
使用 lightningcss 时保留 external @import URL 中的 $；
CSS 与 Sass @import 支持解析 tsconfig paths；
scanner 忽略 ERR_CLOSED_SERVER；
glob/HMR 匹配支持 caseSensitive 选项。

这提示我们，升级验证不能只看首页能不能打开，而要覆盖动态路由、懒加载组件、CSS Modules、Sass/Less、别名路径、SSR 页面和生产构建产物。

一个实用的检查顺序如下：

# 1. 清理旧缓存，避免被 node_modules/.vite 误导
rm -rf node_modules/.vite dist

# 2. 安装并锁定 Vite 版本
pnpm add -D vite@8.1.3

# 3. 类型检查、单测、构建
pnpm typecheck
pnpm test
pnpm build

# 4. 本地预览生产产物
pnpm vite preview --host 0.0.0.0

如果是 monorepo，建议在根目录和子包目录分别验证一次，重点看 workspace 依赖是否被正确解析。

插件与配置迁移建议

从 Vite 7 升级时，优先检查下面几类配置：

export default defineConfig({
 resolve: {
 alias: {
 '@': '/src'
 }
 },
 server: {
 // 检查 hmr/ws 相关配置是否仍符合迁移文档
 },
 build: {
 sourcemap: true,
 rollupOptions: {
 // 如果这里依赖 Rollup 特定行为，需要重点回归
 }
 }
})

如果团队之前已经试用过 rolldown-vite，官方迁移文档建议可把它作为过渡经验参考；迁移到 Vite 8 时，需要撤销 package.json 中对 npm:rolldown-vite@... 的别名，改回正式的 vite 依赖。

插件方面，内部插件或低频维护插件最容易踩坑。建议临时打开 sourcemap，构建后抽查：

pnpm build --debug

如果发现插件 hook 返回值、虚拟模块 ID、动态导入分析异常，应先升级插件版本；仍无法解决时，再考虑在 Vite issue 或插件仓库中查找是否已有兼容性修复。

总结

Vite 8.1.x 的重点不是语法糖，而是前端构建底座切换后的稳定化：Rolldown/Oxc 成为核心、默认浏览器目标更新、Node.js 最低版本抬高，同时围绕 CSS、SSR、动态导入和 monorepo 持续修复。对新项目来说，直接从 vite@8.1.3 起步是合理选择；对存量项目来说，升级前先统一 Node 版本，再用构建、预览、SSR、CSS 与插件回归清单逐项验证，才是更稳妥的做法。

参考资料

Vite GitHub Release：https://github.com/vitejs/vite/releases/tag/v8.1.3
Vite CHANGELOG：https://github.com/vitejs/vite/blob/v8.1.3/packages/vite/CHANGELOG.md
Vite 官方迁移文档：https://vite.dev/guide/migration
Vite 官方版本策略：https://vite.dev/releases
npm registry vite@latest 元数据：https://registry.npmjs.org/vite/latest

2025 前端面试题大全

Thu, 25 Jun 2026 10:00:00 +0000

前言

2025 年前端技术持续演进，面试题目也在不断更新。本文整理了最新的前端面试高频题目，涵盖 JavaScript 基础、框架原理、性能优化、工程化等核心领域，帮助大家系统备战面试。

一、JavaScript 基础

1.1 闭包的理解

闭包是指函数能够访问其词法作用域中变量的能力，即使该函数在其词法作用域之外执行。

function createCounter() {
 let count = 0;
 return function () {
 return ++count;
 };
}
const counter = createCounter();
console.log(counter()); // 1
console.log(counter()); // 2

闭包的常见应用场景：

数据封装和私有变量
函数工厂
回调函数和事件处理
柯里化（Currying）

1.2 原型链与继承

每个对象都有一个 __proto__ 指向其构造函数的 prototype，形成原型链。当访问对象属性时，会沿着原型链向上查找。

function Animal(name) {
 this.name = name;
}
Animal.prototype.speak = function () {
 return `${this.name} makes a noise.`;
};

function Dog(name) {
 Animal.call(this, name);
}
Dog.prototype = Object.create(Animal.prototype);
Dog.prototype.constructor = Dog;

1.3 Promise 与 async/await

Promise 是异步编程的解决方案，async/await 是其语法糖。

async function fetchData() {
 try {
 const response = await fetch("/api/data");
 const data = await response.json();
 return data;
 } catch (error) {
 console.error("请求失败:", error);
 }
}

手写 Promise.all 的核心思路：

function promiseAll(promises) {
 return new Promise((resolve, reject) => {
 const results = [];
 let count = 0;
 promises.forEach((p, i) => {
 Promise.resolve(p).then((val) => {
 results[i] = val;
 if (++count === promises.length) resolve(results);
 }, reject);
 });
 });
}

二、CSS 核心知识

2.1 BFC（块级格式化上下文）

BFC 是一个独立的渲染区域，内部元素的布局不会影响外部。触发条件：

overflow 不为 visible
display 为 flex、grid、inline-block 等
position 为 absolute 或 fixed
float 不为 none

2.2 Flex 布局

.container {
 display: flex;
 justify-content: space-between;
 align-items: center;
 flex-wrap: wrap;
 gap: 16px;
}

2.3 CSS 变量与主题切换

:root {
 --primary-color: #1890ff;
 --bg-color: #ffffff;
}

[data-theme="dark"] {
 --primary-color: #177ddc;
 --bg-color: #141414;
}

三、Vue 面试题

3.1 Vue 3 响应式原理

Vue 3 使用 Proxy 替代了 Vue 2 的 Object.defineProperty，解决了：

无法检测对象属性的添加和删除
无法检测数组索引和长度的变化
性能更好，不需要递归遍历所有属性

const reactive = (target) => {
 return 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;
 },
 });
};

3.2 Vue 3 Composition API 优势

更好的逻辑复用（Composables）
更灵活的代码组织
更好的类型推导
更小的打包体积（tree-shaking）

3.3 虚拟 DOM 与 Diff 算法

Vue 的 Diff 算法核心策略：

同层比较，不跨层级
同节点类型才进行比较
使用 key 优化列表对比

Vue 3 引入了最长递增子序列算法优化节点移动。

四、React 面试题

4.1 React Fiber 架构

Fiber 是 React 16 引入的协调引擎，核心特点：

可中断渲染：将渲染工作拆分为小单元
优先级调度：高优先级更新可以打断低优先级
双缓存树：current 树和 workInProgress 树

4.2 Hooks 原理

// 简化版 useState 实现
let hookStates = [];
let hookIndex = 0;

function useState(initialState) {
 hookStates[hookIndex] = hookStates[hookIndex] || initialState;
 const currentIndex = hookIndex;
 function setState(newState) {
 hookStates[currentIndex] = newState;
 render(); // 触发重新渲染
 }
 return [hookStates[hookIndex++], setState];
}

4.3 React 性能优化

React.memo / useMemo / useCallback 避免不必要的渲染
虚拟列表优化长列表
代码分割与懒加载
状态下沉，减少不必要的全局状态

五、工程化与构建工具

5.1 Vite vs Webpack

特性	Vite	Webpack
开发启动	极快（ESM 原生加载）	较慢（打包后启动）
热更新	毫秒级	秒级
生产构建	Rollup	自身打包
配置复杂度	低	高

5.2 模块化方案

ESM：标准模块方案，静态分析
CJS：Node.js 模块方案，运行时加载
UMD：兼容多种模块系统
AMD：异步模块定义

5.3 Monorepo 方案

2025 年主流 Monorepo 工具：

pnpm workspace：高效磁盘利用
Turborepo：构建缓存与并行执行
Nx：增量构建与依赖图分析

六、性能优化

6.1 首屏性能优化

SSR / SSG 服务端渲染
关键资源预加载（<link rel="preload">）
图片懒加载与现代格式（WebP、AVIF）
代码分割与动态导入
CDN 加速

6.2 运行时性能优化

防抖与节流
Web Worker 处理耗时计算
requestAnimationFrame 优化动画
虚拟滚动优化长列表

6.3 Core Web Vitals

LCP（Largest Contentful Paint）：< 2.5s
INP（Interaction to Next Paint）：< 200ms
CLS（Cumulative Layout Shift）：< 0.1

七、TypeScript

7.1 高级类型工具

// 条件类型
type IsString<T> = T extends string ? true : false;

// 映射类型
type Readonly<T> = {
 readonly [P in keyof T]: T[P];
};

// 模板字面量类型
type EventName = `on${Capitalize<string>}`;

7.2 TypeScript 体操

// 实现 DeepPartial
type DeepPartial<T> = {
 [P in keyof T]?: T[P] extends object ? DeepPartial<T[P]> : T[P];
};

// 实现 ReturnType
type MyReturnType<T> = T extends (...args: any[]) => infer R ? R : never;

八、网络与安全

8.1 HTTP/3 与 QUIC

HTTP/3 基于 QUIC 协议，优势：

0-RTT 连接建立
多路复用无队头阻塞
连接迁移（网络切换不断连）
内置 TLS 1.3

8.2 前端安全

XSS 防护：内容安全策略（CSP）、输入过滤、输出编码
CSRF 防护：SameSite Cookie、Token 验证
点击劫持：X-Frame-Options、CSP frame-ancestors

总结

2025 年前端面试依然重视基础知识，同时对 TypeScript、性能优化、工程化能力的要求更高。建议系统学习原理，结合实际项目经验，才能在面试中脱颖而出。

前端 on 吾爱主机

Vue 3 响应式系统：Proxy、依赖收集与 effect 调度工程实践

问题背景：为什么“改了变量 UI 不跟着变”

核心原理：track / trigger / effect

1. Proxy 拦截对象属性

2. 依赖存储结构

3. activeEffect 与 Reactive Effect

4. computed 是带缓存的 effect

API 选型：ref、reactive、shallow、readonly

实践一：最小可运行依赖图

实践二：组件里常见写法与正确边界

解构与“丢响应”

watch vs watchEffect

flush 时序：pre / post / sync

异步创建 watcher 必须手动 stop

外部状态 / 大列表：shallowRef 模式

实践三：排错清单（从现象到机制）

与 Signals / 编译期响应式的位置

总结

参考资料

Vite 8.1 升级实战：Rolldown、Node 版本与前端构建链检查清单

为什么 Vite 8.1 值得关注

升级前先确认 Node.js 版本

核心变化一：Rolldown 成为默认构建基础

核心变化二：默认浏览器目标更新

核心变化三：依赖优化与 CSS 处理更需要回归

插件与配置迁移建议

推荐的团队升级流程

总结

参考资料

2025 前端面试题大全

前言

一、JavaScript 基础

1.1 闭包的理解

1.2 原型链与继承

1.3 Promise 与 async/await

二、CSS 核心知识

2.1 BFC（块级格式化上下文）

2.2 Flex 布局

2.3 CSS 变量与主题切换

三、Vue 面试题

3.1 Vue 3 响应式原理

3.2 Vue 3 Composition API 优势

3.3 虚拟 DOM 与 Diff 算法

四、React 面试题

4.1 React Fiber 架构

4.2 Hooks 原理

4.3 React 性能优化

五、工程化与构建工具

5.1 Vite vs Webpack

5.2 模块化方案

5.3 Monorepo 方案

六、性能优化

6.1 首屏性能优化

6.2 运行时性能优化

6.3 Core Web Vitals

七、TypeScript

7.1 高级类型工具

7.2 TypeScript 体操

八、网络与安全

8.1 HTTP/3 与 QUIC

8.2 前端安全

总结

`watch` vs `watchEffect`

flush 时序：`pre` / `post` / `sync`