Vue局部更新依赖响应式系统与虚拟DOM协同实现精准依赖追踪和最小化补丁计算；关键在于保持数据访问路径可追踪，避免解构、数组索引直接赋值等导致响应性丢失，并通过组件拆分、props按需透传、computed隔离派生状态及v-memo等手段精细化控制更新范围。
响应式数据与局部更新的本质
Vue 的局部更新不是靠“跳过某些 DOM 节点”实现的，而是依赖响应式系统 + 虚拟 DOM 的精准依赖追踪和最小化补丁计算。当你修改一个响应式数据（如 ref 或 reactive 中的某个字段），Vue 会精确知道哪些计算属性、watcher、组件 render 函数依赖它，并只触发这些关联部分的重新执行。
让更新真正“局部”的关键条件
局部更新生效的前提是：模板中对数据的引用必须是“可追踪的独立路径”。以下情况会导致更新扩散或失效：
-
避免解构响应式对象：从
reactive({ count: 1 })解构出const { count } = state后使用count，会丢失响应性，无法触发更新；应始终通过state.count访问 -
数组索引直接赋值不触发更新：如
arr[0] = 'new'不响应；改用arr.splice(0, 1, 'new')或Vue.set(arr, 0, 'new')（Vue 2）/ 使用ref包裹数组项（Vue 3 推荐） -
新增属性需用
Vue.set（Vue 2）或reactive初始化完整结构（Vue 3）：否则新字段不可响应，其变化不会驱动视图
组件粒度的精细化控制策略
真正的“局部”常体现在组件层级——把关注点拆细，让每个组件只响应自己关心的数据：
vue-composition-api-best-practices
下载
Vue 3 组合式 API 与 最佳实践，涵盖代码组织、useXxx 模式、组合式函数设计、Store 集成、响应式优化及功能抽取。
-
Props 按需透传：父组件不要把整个大对象传给子组件，而是只传它真正需要的字段，如
<UserCard :name="user.name" :avatar="user.avatar" />，这样 user 其他字段变化不会影响 UserCard -
使用
defineProps的运行时校验 + 类型推导（Vue 3），配合 IDE 可提前发现无效 props 传递，减少意外依赖 -
子组件内部用
computed或useMemo-风格逻辑隔离派生状态，避免在模板中写复杂表达式（如{{ user.profile?.settings?.theme || 'light' }}），改为const theme = computed(() => user.value.profile?.settings?.theme ?? 'light')，便于 Vue 追踪依赖边界
进阶：手动控制更新范围
在极少数性能敏感场景，可辅助 Vue 做更精细的判断：
立即学习“前端免费学习笔记（深入）”；
-
v-memo（Vue 3.2+）：为模板片段添加记忆化条件，只有依赖数组中的值变化时才更新，例如：<div v-memo="[item.id, item.isExpanded]">{{ item.title }}</div> -
将静态内容提取为普通属性或 computed：避免在模板中频繁调用函数（如
{{ formatTime(item.time) }}），改用const displayTime = computed(() => formatTime(item.time)) -
用
shallowRef或markRaw避免非响应式大数据劫持：如富文本 HTML 字符串、第三方类实例，无需响应式处理，能显著减少依赖收集开销
