vue3解读—reactivity响应式实现

前言：Vue3 中引入了proxy进行数据劫持，而effect是响应式系统的核心，而响应式系统又是 vue3 中的核心，所以vue3的解读要从 effect 开始讲起。

1.reactivity和effect的使用

目前vue3的各个模块都可以单独安装，首先我们需要安装npm i @vue/reactivity，从中引入我们需要的方法，下面是我简单写一段测试代码。

const { reactive, effect } = require("@vue/reactivity");
let a = reactive({
    value: 1,
});
let b;
effect(() => {
    b = a.value + 10;
    console.log(b);
});
a.value = 10; 

先别急着看我的输出，想想自己心中的答案是什么？

下面公布控制台的实际输出：

总结：我们会发现effect函数执行了两次，一次是我们往effect函数传入匿名函数时，它立即执行了一次；接下来是我们对响应式变量a.value进行重新赋值时（或者说effect内函数所依赖的响应式变量发生变化时）它又执行了一次。

接下来我们就好好思考下，如何设计一个reactive方法，将传入的值变成响应式，以及实现一个effect函数，其内函数所依赖的响应式数据变化时，该函数会再次执行。

2.Dep和effect的实现

reactive会将传入的变量变成响应式数据，包括对象等数据；地基需要从下往上一层一层的搭建，我们这里先实现将单一变量编译成响应式数据，并用effct对其监听。废话不多说，上代码：