vue3 的 effect 手写实现

基础effect 实现

Vue3中的effect特性是一个非常重要的特性，它不仅仅是响应式系统的核心，还可以被广泛地应用于Vue3的许多高级功能，如computed、watch、生命周期等。本文将带领读者从零开始手写Vue3中的effect特性，并通过实现一个简单的案例，让读者更好地理解effect的实现原理和用法。

首先，我们需要一个effect的基础实现。为此，我们需要一个ReactiveEffect类，以及一个用于执行effect回调的run方法。具体代码实现如下：

class ReactiveEffect {
  public active = true
  constructor(public fn) {}
  run() {
    if (!this.active) return this.fn()
    try {
      activeEffect = this
      this.fn()
    } finally {
      activeEffect = null
    }
  }
}

export function effect(fn) {
  const _effect = new ReactiveEffect(fn)
  _effect.run()
}

在上述代码中，我们定义了一个ReactiveEffect类，它接收一个fn函数作为参数，run方法用于执行effect回调。在run方法中，我们首先判断当前effect实例是否处于激活状态（即active为true），如果不是，我们直接执行用户传入的回调函数，不需要进行依赖收集。否则，我们将当前effect实例挂载到全局的activeEffect上，并执行用户传入的回调函数。在执行完成后，我们再将activeEffect设置为null，退出当前effect函数。

接下来，我们需要将之前实现的reactive和现在的effect整合到一起，并在index.ts文件中对外暴露。具体代码如下：

export { reactive } from './reactive'
export { effect } from './effect'

最后，我们可以通过一个简单的案例来验证effect的实现效果。具体代码如下：

<div id="app"></div>
<script src="./reactivity.global.js"></script>
<script>
  const { reactive, effect } = VueReactivity
  const obj = {
    name: 'dy',
    age: 25,
    get fn() {
      return this.age
    }
  }
  const state = reactive(obj)
  effect(() => {
    document.getElementById('app').innerHTML = state.name + '年龄' + state.age
  })
</script>

在上述代码中，我们首先引入了Vue3中的reactive和effect函数，并创建了一个简单的对象。接着，我们使用reactive函数将该对象转化为响应式对象，并使用effect函数创建一个effect实例。在effect实例中，我们通过一个回调函数来更新页面上的内容。

通过以上代码实现，我们可以看到在完成effect的基本功能（执行用户自己