Vue 3通过Proxy实现更细粒度响应式，依赖追踪仅在模板读取时建立，结合PatchFlag精准定位更新，组件天然隔离更新边界。
Vue 3 实现更精细的响应式触发，核心在于依赖追踪粒度变细 + 模板编译协同 + 更新边界明确。它不是靠“手动指定更新哪一块”，而是让框架自动识别“谁真正用到了谁”，变化时只通知相关部分。
Proxy 替代 Object.defineProperty，捕获更全面的操作
Vue 2 使用 Object.defineProperty，无法监听数组索引赋值、对象新增属性等操作，必须借助 $set。Vue 3 改用 Proxy，天然支持：
- 对数组任意索引（
arr[5] = 'x'）的 set/get 拦截 - 动态添加/删除对象属性（
obj.newKey = val） - Map/Set 的方法调用（
map.set('k', 'v')） - in 操作符、for...in 遍历等访问行为
这意味着数据变更路径更透明，为精准依赖收集打下基础。
依赖只在模板中被读取时才建立
响应式本身不决定“更新范围”，关键在模板如何使用数据：
vue-component-analyzer
下载
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
立即学习“前端免费学习笔记（深入）”；
-
{{ user.name }}→ 只对user.name建立依赖，改user.email不触发该组件更新 -
v-if="user.isAdmin"→ 仅追踪user.isAdmin，其他字段变动无影响 - 未出现在模板中的 ref 或 reactive 字段，即使修改也不会触发重渲染
-
computed的求值函数也遵循同样规则：只在其内部访问的响应式字段变化且被模板消费时，才重新执行
编译时 PatchFlag 提升更新定位精度
Vue 3 模板编译器会在生成渲染函数时，为节点打上静态标记（PatchFlag），例如：
-
PATCH_TEXT：仅文本内容可能变化 → Diff 时只比对 textContent -
PATCH_PROPS：仅属性可能更新 → 跳过子节点比对，聚焦 props 差异 -
HOISTED：静态节点 → 渲染阶段直接复用，完全跳过 diff
这些标记让虚拟 DOM 更新逻辑能按需比对、按需打补丁，避免整棵子树无差别重算。
组件是天然的更新边界
每个组件拥有独立的响应式依赖图和更新队列：
- 父组件数据变化，若未被子组件模板读取，子组件不会更新
- 子组件内部状态变更，不影响父组件或其他兄弟组件（除非显式传递并使用）
- 配合
shallowRef、shallowReactive，可进一步限制响应深度，避免深层嵌套引发不必要的更新链
