Vue3 源码：揭秘 Effect 的奥秘

2023-11-26 07:39:48

在 Vue3 中，Effect 主要负责以下几个任务：

存储组件中依赖的数据。
当依赖的数据发生变化时，执行相应的监听函数。
管理组件的更新。

Effect 是如何工作的呢？我们一起来看看它的源码。

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

function createReactiveEffect(fn, options) {
  // 省略一些代码
  const effect = function reactiveEffect(...args) {
    return fn(...args)
  }
  return effect
}

从源码中可以看出，Effect 本质上是一个函数，它接受两个参数：

fn：要执行的函数。
options：一些可选配置项。

当调用 effect 函数时，它会创建一个 Effect 实例，然后执行 Effect 实例的 run 方法。run 方法会调用 fn 函数，并在 fn 函数中使用 Proxy 对象来收集组件中依赖的数据。当依赖的数据发生变化时，Proxy 对象会触发一个 trigger 事件，Effect 实例会监听这个事件，并在事件触发时执行监听函数。

Effect 的使用非常简单，我们只需要在组件中使用 effect 函数来包装需要响应数据的函数即可。例如：

import { effect } from 'vue'

export default {
  setup() {
    const count = ref(0)

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

    effect(() => {
      console.log('The count is: ', count.value)
    })

    return {
      count,
      increment
    }
  }
}