你还在错误地优化重渲染:Vue 3 绕开虚拟 DOM 的那套结构
来源:dev.to — 2026-11-10
📋 概述
传统虚拟 DOM 里改一个状态往往让整棵组件树重新执行,于是开发者要手动包记忆化、维护依赖数组、提防过期闭包。Vue 3 用 JavaScript Proxy 追踪读写,配合全局 targetMap 精确到具体节点,改一个字段只更新那一段文字,父组件和兄弟组件都不动。文章继续讲编译期生成的 Block Tree 如何跳过静态子树,以及解构响应式对象会丢追踪这个最常见的坑,最后说到直接编译成 DOM 操作的 Vapor 模式。
🔑 核心要点
- Proxy 加 targetMap 把依赖追踪精确到读取发生的那一个节点,粒度细到段落。
- 编译期生成的 Block Tree 跳过静态子树,diff 不再全树暴力比较。
- 解构响应式对象会丢掉追踪,这是最常见的隐形坑。
- Vapor 模式干脆绕开虚拟 DOM,直接编译成 DOM 操作代码。
💡 金句
“One missing dependency in that array creates subtle, agonizing bugs.”
译:依赖数组里漏掉一项,就会制造出隐蔽又折磨人的 bug。
👍 0
👎 0
← 返回 dev.to 首页