Vue.js响应式数据中Trigger触发器逻辑与副作用函数执行-Vue.js-PHP中文网

Trigger 是依赖更新的关键环节，它不直接执行副作用函数，而是通知哪些依赖需要重新运行；其核心作用是根据操作类型和 key 查找依赖集合、加入待执行队列并防重复触发，实际执行由调度器或 effect 重新求值完成。

vue.js响应式数据中trigger触发器逻辑与副作用函数执行

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) }) 就会让副作用延迟到宏任务执行。

蓝湖代码转vue2.0+element-ui

将静态 Vue 页面(index.vue)改造为动态页面(Custom.vue)；稿源仅限 index.vue、其引用的 CSS 与资源路径，禁止参考仓库内其他文件。Invoke when user wants to transform a static Vue page into a dynamic data-driven page with Element UI components.

下载

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

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