JavaScript 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（属性访问拦截的语言基础）

Node.js 2026 年 6 月安全发布：22/24/26 版本线升级与排查指南

Thu, 02 Jul 2026 01:16:08 +0000

Node.js 项目在 2026 年 6 月 18 日发布了一组安全更新，覆盖 26.x、24.x、22.x 三条仍受支持的发布线。对线上服务来说，这不是一次“可有可无”的例行小版本：官方公告中最高风险等级为 High，并同时修复了 WebCrypto、TLS 主机名校验、HTTP/2、代理错误信息、Permission Model 等多个方向的问题。

如果你的生产环境仍在使用 Node.js 22、24 或 26，建议把这次更新当作一次安全基线升级来处理：先识别运行版本，再按发布线升级到对应修复版本，最后用针对性的回归测试覆盖 TLS、HTTP/2、代理、权限模型和大数据加密场景。

先看结论：应该升级到哪些版本

这次安全发布对应的修复版本如下：

发布线	修复版本	版本状态	备注
Node.js 22	`v22.23.0`	LTS，代号 `Jod`	安全发布，适合仍在 22 LTS 的生产系统
Node.js 24	`v24.17.0`	LTS，代号 `Krypton`	安全发布，适合 24 LTS 生产系统
Node.js 26	`v26.3.1`	Current	安全发布，适合已经采用 26 Current 的系统

官方发布索引显示，这三个版本的发布日期均为 2026-06-17，并带有 security 标记；官方博客随后在 2026-06-18 更新公告，说明安全版本已经可用。

另外，Node.js 发布计划显示：

v22 的维护期到 2027-04-30，LTS 代号为 Jod；
v24 的维护期到 2028-04-30，LTS 代号为 Krypton；
v26 在 2026-05-05 开始，计划于 2026-10-28 进入 LTS，当前仍是 Current 线。

因此，保守生产系统通常应优先停留在当前 LTS 线并升级补丁版本；已经使用 Current 的团队，则应尽快吸收 v26.3.1 或后续包含该修复的更高版本。

这次修复覆盖了哪些风险

官方公告列出的修复点较多，可以按工程影响分成几类理解。

1. WebCrypto：超大输入可能导致进程中止

CVE-2026-48933 影响 Node.js WebCrypto 的 AES 加密实现。当 subtle.encrypt() 的输入大小是 2GiB 的倍数时，可能触发整数溢出并导致进程崩溃，官方定级为 High。

这类问题对常规 API 服务未必高频触发，但对以下场景值得重点检查：

服务允许用户上传或处理超大二进制文件；
使用 WebCrypto 做文件级加密、备份加密或对象存储前置加密；
加密任务运行在常驻 Node.js worker 中，进程崩溃会影响队列消费或批处理任务。

升级之外，还建议在业务层对单次加密输入设置合理上限，避免把“超大对象完整读入内存后一次性加密”作为默认实现。

2. TLS / mTLS：主机名规范化与会话复用相关绕过

本次公告中多项漏洞与 TLS 主机名处理有关，包括：

CVE-2026-48618：Unicode 点分隔符处理与解析器、校验器之间的主机名规范化不一致，可能导致通配符深度认证绕过；
CVE-2026-48928：SNI 上下文匹配存在大小写敏感问题，在多上下文 mTLS 场景下可能绕过授权策略；
CVE-2026-48930：嵌入 NUL 字符的主机名可能因为 C 字符串截断造成 authority rebinding；
CVE-2026-48934：不同 servername 的 TLS 会话复用可能导致主机身份校验绕过。

这些问题对普通内部脚本也许不明显，但对网关、反向代理、服务网格边车、BFF、Webhook 分发器、多租户 mTLS 接入层影响更大。升级后建议重点回归：

使用通配符证书的 HTTPS 客户端连接；
同一进程内面向多个上游域名的 keep-alive / TLS session 复用；
mTLS 中按 SNI 或证书主机名选择租户、策略、证书链的逻辑；
对国际化域名、大小写混合域名、异常主机名输入的拒绝策略。

如果业务代码里手写了 checkServerIdentity 或自定义 tls.connect() 参数，也应把这些路径纳入审计。

3. HTTP/2：客户端内存增长与服务端 GOAWAY 清理问题

公告列出两个 HTTP/2 相关问题：

CVE-2026-48619：HTTP/2 客户端可能因为攻击者控制的 ORIGIN frame 出现无界内存增长，最终导致 OOM；
CVE-2026-48937：HTTP/2 服务端在无效协议错误后发送 GOAWAY，但 session 未正确清理，仍可能继续接收数据。

如果你的 Node.js 服务直接使用 node:http2，或运行在会与不可信上游/下游建立 HTTP/2 连接的代理组件中，升级后建议做两类验证：

压测长连接场景，观察连接关闭、错误、重连后内存是否稳定；
在网关、服务端渲染、爬虫、聚合 API 等客户端角色中，确认异常 HTTP/2 响应不会让 worker 内存持续增长。

即使框架层封装了 HTTP/2，也不要只测 HTTP/1.1 路径。

4. 代理与日志：凭据可能进入错误信息

CVE-2026-48615 与 ERR_PROXY_TUNNEL 错误处理有关。当代理凭据嵌入代理 URL 时，错误信息中可能泄露这些凭据，并被日志、诊断系统或错误上报平台采集。

升级运行时后，还建议额外做一次配置治理：

不要在日志中直接打印完整代理 URL；
对 HTTP_PROXY、HTTPS_PROXY、NO_PROXY、自定义代理配置做脱敏；
在日志平台中搜索历史 ERR_PROXY_TUNNEL、proxy、@ 等关键词，评估是否已有敏感信息进入日志；
优先使用密钥管理系统或运行时注入，而不是把代理账号密码写入仓库配置文件。

这类漏洞的直接修复在运行时，但真正的风险收敛通常还包括日志脱敏和凭据轮换。

5. Permission Model：仍需谨慎对待实验性隔离能力

本次安全发布还修复了多个 Permission Model 相关问题：

CVE-2026-48617：process.report.writeReport() 路径校验问题可能绕过权限模型；
CVE-2026-48935：FileHandle.utimes() 在 promises API 中可能修改只读路径的文件元数据；
CVE-2026-48936：Unix domain socket server 可绕过 --permission 网络限制，这是 CVE-2026-21636 修复不完整后的补充问题，并且官方说明只影响 Node.js 26。

如果你已经在容器、插件系统、在线代码执行、CI worker 中尝试 Node.js Permission Model，要注意两点：

运行时权限模型不能替代容器、seccomp、AppArmor、只读文件系统、网络策略等外层隔离；
升级后要重新跑“禁止写文件、禁止开网络、禁止生成报告”等负向测试，而不是只看正常用例是否通过。

Permission Model 能降低误用风险，但不应被设计成唯一安全边界。

升级前的资产盘点

建议先在服务器、容器镜像、CI runner、本地开发模板中统一盘点 Node.js 版本。

node -v
npm -v

如果使用 Docker，可以检查基础镜像标签：

docker images | grep node

如果服务由 systemd 管理，可以确认实际执行路径：

systemctl cat your-node-service
which node

如果使用 nvm、fnm、Volta、asdf 等版本管理器，尤其要注意“交互式 shell 里的版本”和“服务启动时的版本”可能不一致。最终判断标准应是生产进程实际使用的 node 可执行文件。

回归测试清单

这次升级后，建议至少覆盖下面几类测试：

启动与依赖安装：npm ci、应用启动、健康检查；
TLS 出站请求：访问多个 HTTPS 上游，覆盖 keep-alive、代理、证书校验失败路径；
mTLS / 多租户接入：验证大小写域名、通配符证书、SNI 路由与租户隔离；
HTTP/2：如果使用 node:http2 或框架启用了 HTTP/2，测试长连接、异常断开、内存稳定性；
WebCrypto：覆盖加密、解密、异常输入、超大输入保护；
Permission Model：如果启用 --permission，同时跑允许与拒绝场景；
日志脱敏：确认代理 URL、凭据、TLS 错误不会原样进入日志平台。

对高流量服务，建议先在灰度环境观察 RSS、heap、连接数、错误率、HTTP 5xx、TLS 握手失败率，再逐步扩大流量。

线上排查：如何确认已经修复

升级完成后，可以从三个层面确认：

进程版本：在容器或服务器内执行 node -v，确认不是只更新了镜像标签；
镜像版本：检查部署平台实际拉取的镜像 digest，避免 Kubernetes 或 PaaS 仍运行旧副本；
日志与指标：观察升级后是否仍出现代理凭据泄露、HTTP/2 OOM、TLS 主机名校验异常等问题。

Kubernetes 环境中可以用类似方式确认正在运行的镜像：

kubectl get pods -l app=your-app -o wide
kubectl exec deploy/your-app -- node -v

如果发现部分副本仍是旧版本，优先检查滚动更新策略、镜像拉取策略、节点缓存与多架构镜像是否同步。

常见误区

误区一：只升级开发机，不升级生产镜像。 这类安全发布的目标是生产运行时，开发机版本一致只是辅助。

误区二：看到后续版本就直接跨大版本。 如果系统当前在 22 LTS，通常先升级到 22 线的安全补丁更可控；跨到 24 或 26 应另做兼容性评估。

误区三：只看框架版本，不看 Node.js 运行时。 Express、NestJS、Next.js 等框架无法替代运行时漏洞修复。

误区四：把 Permission Model 当成唯一沙箱。 运行时权限限制应与容器、系统权限、网络隔离叠加使用。

小结

这次 Node.js 2026 年 6 月安全发布覆盖面广，重点不只是“升级一个小版本”，还涉及 TLS/mTLS、HTTP/2、WebCrypto、代理日志、权限模型等多个运行时边界。推荐的处理顺序是：先盘点所有 Node.js 运行时，再升级到 v22.23.0、v24.17.0、v26.3.1 或包含修复的后续版本，最后用针对性回归测试确认关键路径稳定。

对生产系统而言，安全补丁最怕“以为已经升级”。真正完成升级的标志不是配置文件改了，而是线上进程、容器镜像、CI 输出、监控指标都能证明新版本已经生效。

JavaScript 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 / 编译期响应式的位置

总结

参考资料

Node.js 2026 年 6 月安全发布：22/24/26 版本线升级与排查指南

先看结论：应该升级到哪些版本

这次修复覆盖了哪些风险

1. WebCrypto：超大输入可能导致进程中止

2. TLS / mTLS：主机名规范化与会话复用相关绕过

3. HTTP/2：客户端内存增长与服务端 GOAWAY 清理问题

4. 代理与日志：凭据可能进入错误信息

5. Permission Model：仍需谨慎对待实验性隔离能力

升级前的资产盘点

推荐升级路径

使用官方二进制或系统包

使用 Docker 镜像

使用 nvm / fnm / Volta

回归测试清单

线上排查：如何确认已经修复

常见误区

小结

JavaScript 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 / 编译期响应式的位置

总结

参考资料

Node.js 2026 年 6 月安全发布：22/24/26 版本线升级与排查指南

先看结论：应该升级到哪些版本

这次修复覆盖了哪些风险

1. WebCrypto：超大输入可能导致进程中止

2. TLS / mTLS：主机名规范化与会话复用相关绕过

3. HTTP/2：客户端内存增长与服务端 GOAWAY 清理问题

4. 代理与日志：凭据可能进入错误信息

5. Permission Model：仍需谨慎对待实验性隔离能力

升级前的资产盘点

推荐升级路径

使用官方二进制或系统包

使用 Docker 镜像

使用 nvm / fnm / Volta

回归测试清单

线上排查：如何确认已经修复

常见误区

小结

`watch` vs `watchEffect`

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