Vue3.0 源码解析「reactive」篇：effect、trigger 和 track 的关系揭秘

2023-09-17 11:36:54

引言

Vue3.0 的 reactive 系统是一个强大的工具，它使开发人员能够轻松构建响应式应用程序。在 reactive 系统中，effect、trigger 和 track 扮演着重要的角色。它们共同构建了一个强大而灵活的响应式系统，使开发人员能够轻松构建响应式组件。

effect

effect 是一个函数，它将一个副作用函数作为参数，并在响应式数据发生变化时调用该函数。effect 函数可以被认为是响应式数据变化的监听器。当响应式数据发生变化时，effect 函数将被调用，并执行副作用函数。

trigger

trigger 是一个函数，它用于触发响应式数据的变化。当响应式数据的某个属性发生变化时，将调用 trigger 函数。trigger 函数将通知 effect 函数，响应式数据发生了变化，需要执行副作用函数。

track

track 是一个函数，它用于跟踪响应式数据的变化。当响应式数据的某个属性发生变化时，将调用 track 函数。track 函数将记录响应式数据的变化，以便在需要时能够回放这些变化。

effect、trigger 和 track 的关系

effect、trigger 和 track 这三个函数共同构成了 Vue3.0 的 reactive 系统。effect 函数负责监听响应式数据变化，trigger 函数负责触发响应式数据变化，track 函数负责跟踪响应式数据变化。这三个函数相互配合，共同构建了一个强大的而灵活的响应式系统。

实例

以下是一个使用 effect、trigger 和 track 函数构建响应式组件的示例：

import { reactive, effect, trigger, track } from 'vue'

const state = reactive({
  count: 0
})

const increment = () => {
  state.count++
}

effect(() => {
  console.log(`The count is now ${state.count}`)
})

trigger('count')
increment()

在上面的示例中，我们首先创建了一个响应式对象 state。然后，我们创建了一个 effect 函数，该函数将在 state.count 发生变化时被调用。接下来，我们调用 trigger 函数，触发 state.count 的变化。最后，我们调用 increment 函数，将 state.count 的值加 1。

当我们运行上面的示例代码时，控制台将输出：