Vue3源码有点难懂？别急，我们来自己实现一个mini-vue3吧！

vue3的源码确实是有点复杂，不过没关系，我们可以通过手写一个简化版的vue3来帮助大家理解。这样不仅能加深对vue3源码的理解，还能掌握reactivity部分的核心原理。

在开始之前，我们需要先了解一下vue3中的reactivity。reactivity是vue3中用来管理响应式数据的核心功能。它可以让我们在数据发生变化时，自动更新视图。

reactivity的核心原理是依赖收集。当我们在组件中使用响应式数据时，vue3会自动收集这些数据的依赖项。当这些数据发生变化时，vue3就会通知所有依赖项，让它们更新视图。

为了实现reactivity，我们需要做的就是创建一个响应式对象。这个对象可以是一个普通的javascript对象，也可以是一个类。只要我们在这个对象中实现了get和set方法，就可以让它变成一个响应式对象。

在get方法中，我们可以收集数据的依赖项。在set方法中，我们可以通知所有的依赖项，让它们更新视图。

这样，我们就实现了一个简化版的vue3中的reactivity。我们可以用它来管理响应式数据，并在数据发生变化时自动更新视图。

下面，我们就来一步一步实现这个简化版的vue3。

首先，我们需要创建一个响应式对象。我们可以创建一个名为ReactiveObject的类，并在其中实现get和set方法。

class ReactiveObject {
  constructor(obj) {
    this.data = obj;
    this.dep = new Set();
  }

  get(key) {
    // 收集依赖
    this.dep.add(Dep.target);
    return this.data[key];
  }

  set(key, value) {
    this.data[key] = value;
    // 通知依赖
    this.dep.forEach((dep) => {
      dep.update();
    });
  }
}

接下来，我们需要创建一个Dep类，用来管理依赖。

class Dep {
  constructor() {
    this.subs = new Set();
  }

  add(sub) {
    this.subs.add(sub);
  }

  update() {
    this.subs.forEach((sub) => {
      sub.update();
    });
  }
}

最后，我们需要创建一个Watcher类，用来观察数据的变化。

class Watcher {
  constructor(obj, key, callback) {
    this.obj = obj;
    this.key = key;
    this.callback = callback;

    // 将自己添加到依赖中
    Dep.target = this;
    this.obj[this.key];
    Dep.target = null;
  }

  update() {
    this.callback(this.obj[this.key]);
  }
}

现在，我们就可以用这个简化版的vue3来管理响应式数据了。

const obj = new ReactiveObject({
  name: 'John',
  age: 20
});

const watcher = new Watcher(obj, 'name', (newVal) => {
  console.log(`name changed to ${newVal}`);
});

obj.name = 'Mary'; // 输出: name changed to Mary

这样，我们就实现了一个简化版的vue3中的reactivity。我们可以用它来管理响应式数据，并在数据发生变化时自动更新视图。

希望这篇文章能帮助大家理解vue3中的reactivity。如果大家还有什么问题，欢迎在评论区留言。