Vue.js响应式触发与副作用执行详解

本文深入剖析了 Vue.js 响应式系统中“Trigger”这一核心机制的运作原理：它并非直接执行副作用函数，而是作为依赖更新的“通知中枢”，根据操作类型（set/delete/clear等）和键名精准定位待更新的 effect，并将其去重后推入调度队列；真正的执行则交由微任务队列（如 queueJob）或自定义调度器完成，从而实现高效、批量、防重复的响应式更新。文章还结合典型操作场景（对象赋值、数组变更、属性删除）详解触发逻辑差异，并直击开发痛点——通过常见失效案例与调试技巧（如 onTrigger、shallowRef 陷阱），帮你快速定位和解决“effect 不执行”的疑难问题。

Vue.js 的响应式系统中，Trigger 是依赖更新的关键环节，它不直接执行副作用函数，而是通知哪些依赖需要重新运行。真正执行副作用的是调度器（scheduler）或 effect 的重新求值过程。

Trigger 触发器的核心作用

当响应式数据被修改（如赋值、删除属性、数组索引变更等），Vue 会调用 trigger 函数。它的主要职责是：

• 根据当前操作类型（set、delete、clear 等）和目标对象的 key，查找已收集的依赖集合（即 Dep 或 ReactiveEffect[]）
• 将匹配的副作用函数（effect）加入待执行队列，而非立即调用
• 确保同一 effect 在一次事件循环中只执行一次（防重复触发）

副作用函数如何被实际执行

Trigger 本身不调用 effect，它委托给调度逻辑：

• 默认情况下，effect 被标记为“非懒执行（lazy: false）”，触发后由 queueJob 推入微任务队列（Promise.then 或 queueMicrotask）
• 在下一个 tick，Vue 批量执行所有待处理的 effect，避免重复渲染或计算
• 若手动传入 options.scheduler，则由你自定义的调度器决定何时、如何执行该 effect

例如：watch(source, callback, { scheduler: (job) => setTimeout(job, 0) }) 就会让副作用延迟到宏任务执行。

常见触发场景与对应依赖收集逻辑

不同操作触发的依赖类型不同，影响哪些 effect 会被通知：

• obj.foo = newValue → 触发 trigger(target, 'set', 'foo') → 通知读取过 obj.foo 的 effect
• delete obj.bar → 触发 trigger(target, 'delete', 'bar') → 通知依赖 hasOwnProperty、in 操作或 obj.bar 的 effect
• arr[1] = newVal（数组索引赋值）→ 触发 trigger(arr, 'set', 1) 和 trigger(arr, 'set', 'length')（长度可能变化）
• arr.push(x) → 同样触发 'set' 和 'length'，还会触发 'add'（仅限 Map/Set）

调试与排查：为什么 effect 没有执行

多数“响应失效”问题出在依赖未正确建立或 trigger 未覆盖路径：

• 响应式对象未通过 reactive/ref 创建，或解构后丢失响应性（如 const { count } = reactive({ count: 0 })）
• 副作用中访问了未被 track 的属性（如首次读取时条件为假，后续才读取，但依赖未收集）
• 异步更新中修改了非响应式字段，或在 effect 外部直接修改了原始对象（绕过 proxy）
• 使用 shallowRef 或 markRaw 阻断了深层响应，但代码又试图响应其子属性

可借助 onTrack / onTrigger 选项观察依赖收集与触发过程，定位漏掉的路径。

理论要掌握，实操不能落！以上关于《Vue.js响应式触发与副作用执行详解》的详细介绍，大家都掌握了吧！如果想要继续提升自己的能力，那么就来关注golang学习网公众号吧！