vue3响应式核心effect源码详解：深入理解响应系统底层机制

1. 前言

在上篇博文中，我们详细讲解了vue3响应式核心之reactive源码。本篇文章，我们将深入vue3响应式系统底层的effect源码，详细解析其原理和实现。通常情况下，我们不会直接使用effect，因为effect是一个底层的API，通常情况下，我们会使用computed和watch来处理响应式数据。但是，理解effect的工作机制，对理解vue3的响应式系统有非常大的帮助。

2. effect简介

effect是vue3响应式系统中的一个核心概念，它允许我们追踪响应式数据的变化，并在变化发生时执行相应的回调函数。effect函数接收一个回调函数作为参数，该回调函数会在响应式数据发生变化时执行。

3. effect源码解析

接下来，我们将深入vue3的effect源码，详细解析其原理和实现。effect函数的源码位于vue3的src/reactivity/effect.ts文件中。

export function effect(fn, options) {
  const effect = createReactiveEffect(fn, options)
  if (!effect.lazy) {
    effect.run()
  }
  const runner = effect.run.bind(effect)
  runner.effect = effect
  return runner
}

3.1 createReactiveEffect

createReactiveEffect函数是一个私有函数，用于创建effect实例。它接收两个参数：回调函数fn和选项对象options。

function createReactiveEffect(fn, options) {
  // 标记effect是否为懒执行的，默认为false
  const lazy = options && options.lazy
  // 标记effect是否应该在调度更新时执行，默认为true
  const scheduler = options && options.scheduler
  const active = true
  // 存储effect的依赖项
  const deps = []
  // 存储effect的副作用函数
  const cleanup = () => {}

  const effect = {
    fn,
    lazy,
    scheduler,
    active,
    deps,
    cleanup
  }

  return effect
}

3.2 effect.run

effect.run函数是effect实例的执行函数，它会在响应式数据发生变化时执行。

effect.run = function() {
  // 如果effect是懒执行的，则直接返回
  if (lazy) {
    return
  }

  // 执行effect的回调函数
  activeEffect = effect
  cleanup = fn()
  activeEffect = null

  return cleanup
}

3.3 activeEffect

activeEffect是一个全局变量，它指向当前正在执行的effect。在effect.run函数中，我们会将activeEffect设置为当前的effect，以便在响应式数据发生变化时，可以知道哪个effect需要重新执行。

3.4 cleanup

cleanup是一个函数，它在effect的回调函数执行后被调用。cleanup函数的作用是清理effect的副作用，以便在effect被销毁时，不会留下任何残留的副作用。

4. effect的使用

通常情况下，我们不会直接使用effect，因为effect是一个底层的API。通常情况下，我们会使用computed和watch来处理响应式数据。computed和watch都是基于effect实现的，但是它们提供了更友好的API，更易于使用。

5. 总结

通过深入解析vue3响应式核心effect源码，我们对vue3的响应式系统有了更深入的了解。effect是vue3响应式系统中的一个核心概念，它允许我们追踪响应式数据的变化，并在变化发生时执行相应的回调函数。effect的使用非常广泛，它不仅可以用于实现computed和watch，还可以用于实现自定义指令、生命周期钩子等。