Vue精准重渲染依赖响应式追踪与虚拟DOM差分协同：数据变→触发对应render→生成新VNode→比对后仅更新实际变化节点；通过组件拆分、按需透传props、合理使用key/v-memo/computed等实现最小化更新。
Vue 实现精准组件重渲染，核心在于响应式依赖追踪与虚拟 DOM 差分更新的协同：数据变 → 触发对应 render → 生成新 VNode → 与旧 VNode 比对 → 仅更新实际变化的节点。它不靠“跳过”或“屏蔽”，而是让每个环节都可追溯、可隔离。
响应式系统决定“谁该重跑”
Vue 在初始化时，通过 ref、reactive 或 defineProps 建立响应式代理，并在组件首次 render 过程中收集依赖（即哪些响应式字段被读取了）。后续这些字段变化时，只通知已订阅它们的组件重新执行 render 函数。
- 模板中写
{{ user.name }}→ 会建立user对象与当前组件的依赖关系 - 若写
const { name } = user再用{{ name }}→ 依赖链断裂，name变化不会触发更新 - 数组用
list[0] = newItem→ 不触发响应；应改用list.splice(0, 1, newItem)或list = [...list]
组件拆分天然形成更新边界
真正意义上的“局部”，往往发生在组件层级。子组件只响应自己明确接收和使用的数据，其余变化完全不可见。
vue-component-analyzer
下载
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
- 父组件传整个对象：
<UserCard :user="user" />→user.email改了也会触发UserCard重渲染 - 改为按需透传：
<UserCard :name="user.name" :avatar="user.avatar" />→ 只有name或avatar变，它才重跑 - 子组件用
defineProps({ name: String, avatar: String })显式声明，避免意外访问深层属性如props.user.profile.theme
模板结构影响“比对粒度”
虚拟 DOM 的节点组织方式由模板语法直接决定，v-if、v-for 和 key 是关键控制点。
立即学习“前端免费学习笔记（深入）”；
-
v-if="show"→ 条件为假时组件完全卸载，DOM 节点被移除；切换时是全新挂载，无 diff -
v-for="item in list"中每个item应设稳定key（如item.id）→ 单条数据变，只重渲染该项对应的 VNode 树 - 高频变动区域（如实时状态徽标）建议抽成独立子组件 → 更新范围进一步收敛
进阶控制：v-memo 与 computed 隔离派生逻辑
当默认行为仍不够精细时，可用更明确的语义收窄更新触发条件。
-
<div v-memo="[item.id, item.isExpanded]">{{ item.title }}</div>→ 仅当id或isExpanded变，才更新该片段 - 避免模板中写
{{ user.profile?.settings?.theme || 'light' }}→ 提取为const theme = computed(() => user.profile?.settings?.theme ?? 'light')，让 Vue 精确追踪依赖路径 - 函数调用（如
{{ formatTime(item.time) }}）每次 render 都执行 → 改用computed缓存结果，减少无效计算
