Trigger 是依赖更新的关键环节，它不直接执行副作用函数，而是通知哪些依赖需要重新运行；其核心作用是根据操作类型和 key 查找依赖集合、加入待执行队列并防重复触发，实际执行由调度器或 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) }) 就会让副作用延迟到宏任务执行。

Element Plus UI Vue3

Element Plus Vue3 桌面组件库。在开发 Vue 3.x 页面时调用，使用 Element Plus 组件（如 el-button、el-input、el-form、el-table 等）。

下载

立即学习“前端免费学习笔记（深入）”；

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

不同操作触发的依赖类型不同，影响哪些 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 选项观察依赖收集与触发过程，定位漏掉的路径。