Vue响应式通过依赖收集与虚拟DOM diff实现精准局部更新：读取时收集依赖，修改时仅触发相关组件render；diff按层级+key复用节点，静态节点跳过比对；解构、数组索引赋值、新增未声明属性会破坏响应性；v-memo可进一步缩小更新范围。
Vue 的响应式数据本身不直接操作 DOM，它通过触发组件重新 render 生成新虚拟节点（VNode），再由虚拟 DOM 的 diff 与 patch 机制决定真实 DOM 中哪些部分需要更新。整个过程不是“全量重绘”，而是依赖链驱动 + 最小化变更落地。
响应式变化如何精准触发对应 render
模板中每次读取响应式字段（如 {{ user.name }}）都会在 getter 中被自动收集为依赖，绑定到当前组件的渲染 effect（Vue 3）或 Watcher（Vue 2）。当 user.name 被修改，setter 就只通知这个组件重新执行 render 函数——不会波及其他未使用该字段的组件或区域。
- 依赖收集只发生在首次渲染或 computed 重新求值时，且仅对实际被读取的属性生效
- 条件语句（v-if）内的字段不会被提前收集，避免无效依赖
- 深层属性访问（如 user.profile.settings.theme）会逐级触发 getter，完整建立依赖链
新旧 VNode 如何做到局部比对与更新
Vue 不对比整棵树，而是按层级+key 做同层双端 diff。相同 key 的节点会被复用，只更新变动的 props、事件、文本或子节点顺序；类型不同（如 div → span）则直接替换整块。
vue-component-analyzer
下载
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
- 静态节点（无插值、无指令）被标记为 static，跳过 diff，直接复用
- v-for 列表必须设稳定 key，否则 Vue 无法识别节点身份，退化为就地更新
- 组件粒度天然隔离：子组件只响应自己接收的 props，父组件其他数据变化不影响它
哪些写法会破坏局部更新效果
局部更新的前提是“响应式路径可追踪”。一旦访问方式绕过 getter/setter，依赖链就断裂，导致不更新或过度更新。
立即学习“前端免费学习笔记（深入）”；
- 解构响应式对象：const { name } = user 后用 {{ name }} → 失去响应性
- 数组索引直接赋值：list[0] = newItem → 不触发更新，应改用 list.splice(0, 1, newItem)
- 对象新增未声明属性：user.newField = 'x'（user 是 reactive）→ 无效，需初始化或用 Vue.set/reactive({ ... })
进阶控制：缩小更新范围的实用手段
在默认机制基础上，还可主动收窄更新触发条件，进一步提升性能。
- 用 v-memo 包裹模板片段，仅当指定依赖项变化才更新：<div v-memo="[item.id, item.isExpanded]">...
- 把高频变动内容（如状态徽标、头像）抽成独立子组件，props 只传必要字段
- 模板中避免调用函数：{{ formatTime(item.time) }} → 改为 computed 缓存结果
