vue渲染不按dom深度逐层更新，而是通过响应式依赖追踪确定重渲染组件，再用虚拟dom diff进行同层比对、key驱动复用、静态节点跳过，并借助组件封装、v-memo和computed实现最小粒度更新。
Vue 的渲染流程中，并不存在“节点层级的深度更新”这一独立机制。它不按 DOM 深度逐层递归刷新，而是依赖响应式依赖追踪 + 虚拟 DOM diff 的组合策略，实现精准、扁平、按需的更新。
响应式系统决定“谁要重渲染”
Vue 只会对模板中实际读取（get）过的响应式字段建立依赖关系。例如：
-
{{ user.name }}→ 仅当user.name变化时触发所在组件的 render -
{{ user.profile.settings.theme }}→ 若未提前初始化profile或settings，访问会出错或丢失响应；正确做法是确保路径完整或用computed显式声明依赖边界 - 解构赋值如
const { name } = user后使用{{ name }}，会切断响应链，导致更新失效
虚拟 DOM diff 决定“更新哪一部分”
render 函数生成新旧两棵 VNode 树，diff 算法按以下原则比对：
- 同层比较：只在相同层级的子节点间对比，不会跨层查找或深度遍历整棵树
- key 驱动：v-for 列表中必须设稳定
key，diff 才能识别节点复用、移动或删除，避免误判为“全量替换” - 静态节点跳过：编译阶段已标记
static的节点（如纯文本、无绑定属性的 div），patch 时直接跳过，不参与 diff
组件边界天然隔离更新范围
真正的“局部性”来自组件封装，而非 DOM 深度：
- 父组件传整个对象
:user="user"→ 子组件内部任意字段变化都可能触发其重渲染 - 改为按需透传
:name="user.name" :avatar="user.avatar"→ 子组件只响应明确接收的 props，其他字段变更完全不影响它 - 高频变动区域（如实时状态徽标）抽成独立子组件，配合浅层 props，可让更新锁定在最小粒度
v-memo 与 computed 进一步收窄触发条件
当需要更精细控制更新时机时：
-
<div v-memo="[item.id, item.isExpanded]">{{ item.title }}</div>—— 仅当数组中任一值变化才重新渲染该片段 - 模板中避免
{{ formatTime(item.time) }}，改用const displayTime = computed(() => ...)，使依赖显式、可追踪、可缓存 - 数组索引赋值
list[0] = newItem不触发响应 → 改用list.splice(0, 1, newItem)或ref包裹单项
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
