Vue 的响应式系统内部有三个核心角色，它们就像一个自动运转的“物流体系”：
- effect（副作用函数）：需要被“包裹”起来的函数，当它依赖的数据发生变化时，这个函数会被自动重新执行。
- track（依赖收集）：在副作用函数执行过程中，如果读取了响应式数据的某个属性，就记录下“这个副作用依赖了这个属性”。
- trigger（派发更新）：当响应式数据的属性被修改时，找出所有依赖它的副作用函数，并触发它们重新执行。
这三个概念配合起来，就是“数据变了，视图自动更新”背后的运转逻辑。
一个简化的生活类比
把响应式系统想象成一个快递配送中心：
- 副作用函数（effect） 就是“某个收货人”，比如“组件渲染函数”。
- 依赖收集（track） 就是收货人下单时，配送中心记下“这个收货人需要什么商品”（对应到代码里，就是某个组件模板里用了
state.name这个数据）。 - 派发更新（trigger） 就是当商品库存发生变化时，配送中心自动把新货送到登记过的收货人地址（重新执行渲染函数）。
整个过程不需要收货人自己再打电话问“货到了没”，系统自动就完成了通知和派送。
一个底层原理的简化演示（Vue 3 风格）
虽然日常开发中我们不需要手写这些 API，但看一下简化后的代码能快速理解它们的关系：
// 1. 一个响应式数据
const state = reactive({ count: 0 })
// 2. 定义一个副作用函数（在 Vue 内部，组件的渲染函数就是包裹在 effect 里的）
effect(() => {
// 这里只要读取了 state.count，track 就会被自动调用，
// 把这个 effect 记作 count 属性的依赖
console.log(state.count)
})
// 3. 修改数据
state.count++
// 上面这行赋值操作内部触发了 trigger，
// 找到所有依赖 count 的 effect（这里是打印函数），重新执行它当你执行 state.count++ 后，控制台会再次打印出新的 count 值。你不需要手动调用任何更新函数，这就是 track（读时收集） 和 trigger（写时派发） 自动化协同的结果。
开发者的真实体感
在日常使用中，你几乎不会直接接触 effect、track、trigger 这三个内部函数，但它们的影子无处不在：
- 每一个 Vue 组件的模板渲染，本质上是被一个内部的
effect包裹起来的。 - 当组件的
setup函数或模板里用到了某个响应式数据，track就在默默建立“数据 → 组件”的依赖图谱。 - 当你修改数据时，
trigger找到这个图谱里所有关联的effect并重新运行，从而让对应的组件重新渲染。
这种自动化的依赖追踪体系，解决了“数据变更后，需要手动通知哪些视图更新”的痛点，也让 computed（自动重新计算）和 watch（数据变化时执行回调）能够天然成立——它们本质上就是不同形式的 effect 封装。
一句话总结
effect 是“要自动运行的活儿”，track 是“读数据时登记这个活儿”，trigger 是“写数据时让所有登记的活儿再跑一遍”。Vue 的响应式魔法，就建立在这个简单的闭环之上。