Vue3源代码导出，打造出他们的Vue3架构
下栽の地止：https://www.ukoou.com/resource/1325
责任编辑采用 ref 对 vue 的积极响应性展开阐释，实际上是积极响应性基本原理导出，不牵涉 vue 模块等基本概念。
vue 的积极响应性的与此同时实现，在 @vue/reactivity 雇请，相关联的源代码产品目录为 packages/reactivity。怎样增容 vue 源代码，可查阅该该文
为甚么采用 ref 展开传授，而并非 reactive？
ref 比 reactive 的与此同时实现单纯，且不须要加进 es6 的 Proxy，实际上须要采加进第一类的 getter 和 setter 表达式
因而，讲诉积极响应性基本原理，他们用单纯的 ref ，尽量避免我们的认知生产成本
甚么是积极响应性？
该些的积极响应性表述，源自 vue3 非官方文件格式
那个名词在面向第一类中时常被提到，但这是甚么原意呢？积极响应性是一类容许他们以新闻稿式的形式去适应环境变动的程式设计实例。现代人一般来说展现的众所周知实例，是这份 excel 表单 (两个十分好的实例)。
假如将位数 2 放到第三个常量中，将位数 3 放到第三个常量中并明确要求提供更多 SUM，则表单会将其算出给你。不要惊异，与此同时，假如你预览第三个位数，SUM 也会自动预览。
JavaScript 一般来说并非这样工作的——假如他们想用 JavaScript 编写类似的内容：
let val1 = 2
let val2 = 3
let sum = val1 + val2
console.log(sum) // 5
val1 = 3
console.log(sum) // 仍然是 5
假如他们预览第三个值，sum 不会被修改。
那么我们怎样用 JavaScript 与此同时实现这一点呢？
他们这里直接看 @vue/reactive 的测试用例，来看看怎么采用，才会做到积极响应性的效果
ref 的测试用例
it 包裹的是测试用例的具体内容，他们只须要关注回调里面的代码即可。
it(should be reactive, () => {
const a = ref(1)
let dummy
let calls = 0
effect(() => {
calls++
dummy = a.value
})
expect(calls).toBe(1)
expect(dummy).toBe(1)
a.value = 2
expect(calls).toBe(2)
expect(dummy).toBe(2)
// same value should not trigger
a.value = 2
expect(calls).toBe(2)
expect(dummy).toBe(2)
})
他们从测试用例中，可以看出有以下几点结论：
被 effect 包裹的表达式，会自动执行一次。
被 effect 表达式包裹的表达式体，拥有了积极响应性 —— 当 effect 内的表达式中的 ref 第一类 a.value 被修改时，该表达式会自动重新执行。
当 a.value 被设置成同两个值时，表达式并不会自动的重新执行。
effect 是甚么？
非官方文件格式中的描述：Vue 通过两个副作用 (effect) 来跟踪表达式。副作用是两个表达式的包裹器，在表达式被调用之前就启动跟踪。Vue 知道哪个副作用在何时运行，并能在须要时再次执行它。
单纯地说，要使两个表达式拥有积极响应性，就应该将它包裹在（传入）effect 表达式里。
那么这里也可以稍微猜一下，假如有这么两个 updateDom 表达式：
const a_ref = ref(aaaa)
function updateDom(){
return document.body.innerText = a_ref.value
}
effect(updateDom)
setTimeout(()=>{
a_ref.value = bbb
},1000)
只要用 effect 包裹一下，当 a_ref.value 改变，就会自动设置 document.body.innerText，从而预览界面。
（当然这里也只是猜一下，实际上基本的基本原理，也与那个差不多，但会复杂很多。由于责任编辑篇幅优先，并没有牵涉到该些）
依赖收集和触发预览
要与此同时实现积极响应性，就须要在合适的时机，再次执行副作用 effect。怎样确定那个合适的时机？就须要依赖收集（英文名词：track）和触发预览（英文名词：trigger）
仍然看那个测试用例的实例
it(should be reactive, () => {
const a = ref(1)
let dummy
let calls = 0
effect(() => {
calls++
dummy = a.value
})
expect(calls).toBe(1)
expect(dummy).toBe(1)
a.value = 2
expect(calls).toBe(2)
expect(dummy).toBe(2)
// same value should not trigger
a.value = 2
expect(calls).toBe(2)
expect(dummy).toBe(2)
})
他们已经知道，effect 包裹的表达式，要在合适的时机被再次执行，那么在那个实例中，合适的时机就是，a.value 那个 ref 第一类被修改。
由于副作用表达式，采用了 a.value，因而副作用表达式，依赖 a 那个 ref 变量。他们应该把那个依赖记录下来。
假如是他们与此同时实现，可以这么写：
const a = {
// 当 a 被访问时，可以将副作用表达式存储在 a 第一类的 dependency 属性中，实际上 @vue/reactivity 会稍微复杂一点
get value(){
const fn = // 假设有办法拿到 effect 的副作用表达式
// fn 就是以下那个表达式
// () => {
// calls++
// dummy = a.value
// })
a.dependence = fn
}
// 当 a.value 被修改时，可以这么触发预览
set value(){
this.dependence()
}
}
这样就可
当然那个与此同时实现十分单纯，实际上还要考虑很多情况，例如：
两个副作用表达式，可能依赖多个 ref。如 computed，就可能依赖多个 ref，才能算出最终的值，因而依赖是一组的副作用表达式。
并非任何时候都收集依赖。实际上在 effect 包裹的时候，才收集依赖
一开始依赖 a 那个 ref 的，但后来不依赖了
……
这些情况都是他们没有考虑进去的，那么，接下来，他们就看看真正的 ref 的与此同时实现
基本概念约定
在传授源代码前，他们这里先对一些基本概念展开约定：
副作用第一类：在接下来的源代码导出中，特指 effect 表达式内部创建的两个第一类，类型为 ReactiveEffect（先记住有这么名字即可）。被收集依赖的实际第一类。先介绍这么多，后面还会有详细介绍
副作用表达式：在接下来的源代码导出中，特指传入 effect 的表达式，也是被触发再次执行的表达式。
effect(() => {
calls++
dummy = a.value
})
积极响应式变量：ref、reactive、computed 等表达式返回的变量。
track：收集依赖
trigger：触发预览
副作用第一类依赖积极响应式变量。如：ReactiveEffect 依赖某个 ref
积极响应式变量，拥有多个依赖，依赖的值副作用第一类。如： 某个 ref 拥有（收集到） n 个 ReactiveEffect 依赖
ref 源代码导出
通过 ref 的与此同时实现，看依赖是甚么，是怎么被收集的
ref 第一类的与此同时实现
export function ref(value?: unknown) {
return createRef(value)
}
// shallowRef，只是将 createRef 的第三个参数 shallow，标记为 true
export function shallowRef(value?: unknown) {
return createRef(value, true)
}
function createRef(rawValue: unknown, shallow = false) {
// 假如已经是ref，则直接返回
if (isRef(rawValue)) {
return rawValue
}
return new RefImpl(rawValue, shallow)
}
ref 和 shallowRef， 本质都是 RefImpl 第一类实例，只是 shallow 属性不同
为了便于认知，他们可以只关注 ref 的与此同时实现，即默认 shallow === false
接下来，他们看看 RefImpl 是甚么
class RefImpl
private _value: T
private _rawValue: T
// 用于存储依赖的副作用表达式
public dep?: Dep = undefined
public readonly __v_isRef = true
constructor(value: T, public readonly _shallow = false) {
// 保存原始 value 到 _rawValue
this._rawValue = _shallow ? value : toRaw(value)
// convert表达式的作用是，假如 value 是第一类，则采用 reactive(value) 处理，否则返回value
// 因而，将两个第一类传入 ref，实际上也是调用了 reactive
this._value = _shallow ? value : convert(value)
}
get value() {
// 收集依赖
trackRefValue(this)
return this._value
}
set value(newVal) {
newVal = this._shallow ? newVal : toRaw(newVal)
// 假如值改变，才会触发依赖
if (hasChanged(newVal, this._rawValue)) {
this._rawValue = newVal
this._value = this._shallow ? newVal : convert(newVal)
// 触发依赖
triggerRefValue(this, newVal)
}
}
}
在 RefImpl 第一类中
setter 设置 value 属性时，trigger 触发依赖
因而，只有访问/修改 ref 的 value 属性，才会收集/触发依赖
依赖是怎么被收集的
export function trackRefValue(ref: RefBase
// 判断是否须要收集依赖
if (isTracking()) {
ref = toRaw(ref)
// 假如没有 dep 属性，则初始化 dep，dep 是两个 Set
if (!ref.dep) {
ref.dep = createDep()
}
// 收集 effect 依赖
trackEffects(ref.dep)
}
}
// 判断是否须要收集依赖
export function isTracking() {
// shouldTrack 是两个全局变量，代表当前是否须要 track 收集依赖
// activeEffect 也是个全局变量，代表当前的副作用第一类 ReactiveEffect
return shouldTrack && activeEffect !== undefined
}
为甚么须要采用 isTracking，来判断是否收集依赖？
并非任何情况 ref 被访问时，都须要收集依赖。例如：
没有被 effect 包裹时，由于没有副作用表达式（即没有依赖，activeEffect === undefined），不应该收集依赖
某些特殊情况，即使包裹在 effect，也不应该收集依赖（即 shouldTrack === false）。如：模块生命周期执行、模块 setup 执行
ref.dep 有甚么作用？
ref.dep 的类型是Set
ref.dep 用于存储副作用第一类，这些副作用第一类，依赖该 ref，ref 被修改时就会触发
他们再来看看 trackEffects：
// 代表当前的副作用 effect
let activeEffect: ReactiveEffect | undefined
export function trackEffects(
dep: Dep
) {
// 那个是局部变量的 shouldTrack，跟上一部分的全局 shouldTrack 不一样
let shouldTrack = false
// 已经 track 收集过依赖，就可以跳过了
shouldTrack = !dep.has(activeEffect!)
if (shouldTrack) {
// 收集依赖，将 effect 存储到 dep
dep.add(activeEffect!)
// 与此同时 effect 也记录一下 dep
// 用于 trigger 触发 effect 后，删除 dep 里面相关联的 effect，即 dep.delete(activeEffect)
activeEffect!.deps.push(dep)
}
}
收集依赖，就是把 activeEffect（当前的副作用第一类），保存到 ref.dep 中（当触发依赖时，遍历 ref.dep 执行 effect ）
然后把 ref.dep，也保存到 effect.deps 中（用于在触发依赖后， ref.dep.delete(effect)，双向删除依赖）
依赖是怎么被触发的
看完 track 收集依赖，那看看依赖是怎么被触发的
export function triggerRefValue(ref: RefBase
// ref 可能是 reactive 第一类的某个属性的值
// 这时候在 triggerRefValue(this, newVal) 时取 this，拿到的是两个 reactive 第一类
//
ref = toRaw(ref)
// 有依赖才触发 effect
if (ref.dep) {
triggerEffects(ref.dep)
}
}
再来看看 triggerEffects
export function triggerEffects(
dep: Dep | ReactiveEffect[]
) {
// 循环遍历 dep，去取每个依赖的副作用第一类 ReactiveEffect
for (const effect of isArray(dep) ? dep : […dep]) {
// 默认不容许递归，即当前 effect 副作用表达式，假如递归触发当前 effect，会被忽略
if (effect !== activeEffect || effect.allowRecurse) {
// effect.scheduler可以先不管，ref 和 reactive 都没有
if (effect.scheduler) {
effect.scheduler()
} else {
// 执行 effect 的副作用表达式
effect.run()
}
}
}
}
这里省略了一些代码，这样结构更清晰。
当 ref 被修改时，会 trigger 触发依赖，即执行了 ref.dep 里的所有副作用表达式（effect.run 运行副作用表达式）
为甚么默认不容许递归？
const foo = ref([])
effect(()=>{
foo.value.push(1)
})
在那个副作用表达式中，即会采加进 foo.value（getter 收集依赖），又会修改 foo 数组（触发依赖）。假如容许递归，会无限循环。
至此，ref 依赖收集和触发的逻辑，已经比较清晰了。
那么，接下来，他们须要进一步了解的是，effect 表达式、ReactiveEffect 副作用第一类、副作用表达式，它们是甚么，它们之间有甚么关系？
effect 表达式
他们来看一下 effect 的与此同时实现
// 传入两个 fn 表达式
export function effect
fn: () => T
){
// 参数 fn，可能也
if ((fn as ReactiveEffectRunner).effect) {
fn = (fn as ReactiveEffectRunner).effect.fn
}
// 创建 ReactiveEffect 第一类
const _effect = new ReactiveEffect(fn)
_effect.run()
const runner = _effect.run.bind(_effect)
runner.effect = _effect
return runner
}
effect 表达式接受两个表达式作为参数，该表达式，他们称之为副作用表达式
effect 表达式内部，会创建 ReactiveEffect 第一类，他们称之为副作用第一类
effect 表达式，返回两个 runner，是两个表达式，直接调用就是调用副作用表达式；runner 的属性 effect，保存着它相关联的 ReactiveEffect 第一类 。
因而，它们的关系如下：
effect 表达式的入参为副作用表达式，在 effect 表达式内部会创建副作用第一类
他们继续深入看看 ReactiveEffect 第一类的与此同时实现
ReactiveEffect 副作用第一类
该部分（effect.run 表达式）代码有比较大的删减，点击查阅未删减的源代码
为甚么要删减该些代码？
在 vue 3.2 版本以后，effect.run 做了优化，提升性能，其中牵涉到位运算。
优化方案在极端的情况下（effect 十分多次嵌套），会降级到原来的老方案（优化前，3.2版本前的方案）
因而，为了便于认知，我这里先介绍优化前的方案，深入了解，并阐述该方案的缺点， 以便更好地认知为甚么须要展开优化。
删减部分为优化后的方案，该些的方案会在下一小节展开介绍。
下面是 ReactiveEffect 代码导出：
// 全局公用的 effect 栈，由于可以 effect 嵌套，因而须要用栈保存 ReactiveEffect 副作用第一类
const effectStack: ReactiveEffect[] = []
export class ReactiveEffect
active = true
// 存储 Dep 第一类，如上一小节的 ref.dep
deps: Dep[] = []
constructor(
public fn: () => T,
public scheduler: EffectScheduler | null = null,
scope?: EffectScope | null
) {
// 可以暂时不看，与 effectScope API 相关 https://v3.cn.vuejs.org/api/effect-scope.html#effectscope
// 将当前 ReactiveEffect 副作用第一类，记录到 effectScope 中
// 当 effectScope.stop() 被调用时，所有的 ReactiveEffect 第一类都会被 stop
recordEffectScope(this, scope)
}
run() {
// 假如当前 ReactiveEffect 副作用第一类，已经在栈里了，就不须要再处理了
if (!effectStack.includes(this)) {
try {
// 保存上两个的 activeEffect，因为 effect 可以嵌套
effectStack.push((activeEffect = this))
// 开启 shouldTrack 开关，缓存上两个值
enableTracking()
// 在该 effect 所在的所有 dep 中，清除 effect，下面会详细阐述
cleanupEffect(this)
// 执行副作用表达式，执行过程中，又会 track 当前的 effect 进来，依赖重新被收集
return this.fn()
} finally {
// 关闭shouldTrack开关，恢复上两个值
resetTracking()
// 恢复上两个的 activeEffect
effectStack.pop()
const n = effectStack.length
activeEffect = n > 0 ? effectStack[n – 1] : undefined
}
}
}
}
// 容许 track
export function enableTracking() {
// trackStack 是个全局的栈，由于 effect 可以嵌套，所以是否 track 的标记，也须要用栈保存
trackStack.push(shouldTrack)
// 打开全局 shouldTrack 开关
shouldTrack = true
}
// 重置上两个 track 状态
export function resetTracking() {
const last = trackStack.pop()
// 恢复上两个 track 状态
shouldTrack = last === undefined ? true : last
}
为甚么要用栈保存 effect 和 track 状态？
因为effect可能会嵌套，须要保存之前的状态，effect执行完成后恢复
cleanupEffect 做了甚么？
回顾下图：
effect.deps，也存储着积极响应式变量的 dep（dep 是两个依赖集合， ReactiveEffect 第一类的集合），目的是在effect 执行后，在所有的 dep 中删除当前执行过的 effect，双向删除
删除代码如下：
function cleanupEffect(effect: ReactiveEffect) {
const { deps } = effect
if (deps.length) {
for (let i = 0; i < deps.length; i++) {
// 从 ref.dep 中删除 ReactiveEffect
deps[i].delete(effect)
}
// 从 ReactiveEffect.deps 中删除 dep
deps.length = 0
}
}
删除的 ReactiveEffect 怎样被重新收集？
在 cleanupEffect 中，在各个 dep 中，删除该 ReactiveEffect 第一类。
在执行 this.fn() 时，执行副作用表达式，副作用表达式的执行中，当采加进积极响应式变量（如 ref.value）时，又会 trackEffect，重新收集依赖。
为甚么要先删除，再重新收集依赖？
因为执行前后的依赖可能不一致，考虑一下情况：
const switch = ref(true)
const foo = ref(foo)
effect( () = {
if(switch.value){
console.log(foo.value)
}else{
console.log(else condition)
}
})
switch.value = false
当 switch 为 true 时，triggerEffect，双向删除后，执行副作用表达式，switch、foo 会重新收集到依赖 effect
当 switch 变成 false 后，triggerEffect，双向删除后，执行副作用表达式，仅有 switch 能重新收集到依赖 effect
由于 effect 副作用表达式执行前后，依赖的积极响应式变量（这里是 ref ）可能不一致，因而 vue 会先删除全部依赖，再重新收集。
细心的你，可能会发现：他们写 vue 代码时，很少会出现前后依赖不一致的情况。那既然这样，删除全部依赖那个与此同时实现就有优化的空间，能不能只删除失效的依赖呢？
依赖预览算法优化
该优化是 vue 3.2 版本引入的，原因即上一小节所说的，可以只删除失效的依赖。并且在极端的嵌套深度下，能够降级到 cleanupEffect 方法，对所有依赖展开删除。
先想想，假如是他们与此同时实现，要怎么写好呢？
不采用 cleanupEffect 删除所有依赖
执行副作用表达式前，给 ReactiveEffect 依赖的积极响应式变量，加上 was 的标记（was 是 vue 给的名称，过去的原意）
执行 this.fn()，track 重新收集依赖时，给 ReactiveEffect 的每个依赖，加上 new 的标记
最后，对失效（有 was 但是没有 new）依赖展开删除
为甚么是标记在积极响应式第一类，而并非 ReactiveEffect ？
再回顾一下积极响应式变量和 ReactiveEffect 的关系：
ReactiveEffect 依赖积极响应式变量（ref），积极响应式变量（ref）拥有多个 ReactiveEffect 依赖。
只删除失效的依赖。就要确定哪些依赖（积极响应式变量）须要被删除（实际上是积极响应式变量的 dep 被删除）
因而，须要在积极响应式变量上做标记，对已经不依赖的积极响应式变量，将它们的 dep，从 ReactiveEffect.deps 中删除
怎样给积极响应式变量做标记
与此同时实现如下：
export const initDepMarkers = ({ deps }: ReactiveEffect) => {
if (deps.length) {
// 循环 deps，对每个 dep 展开标记
for (let i = 0; i < deps.length; i++) {
// 标记 dep 为 was，w 是 was 的原意
deps[i].w |= trackOpBit
}
}
}
该些代码其实比较难认知，尤其是采用了位运算符，假如一开始就导出这些代码的话，很容易就劝退了。
下面他们对问题展开分析：
为甚么这里标记的是 dep？
这里的 dep，对于 ref，就是 ref.dep，它是两个 Set
dep 跟 ref 的关系是一一相关联的，两个 ref实际上有两个 dep，因而，标记在 dep 和 标记在 ref，是等价的
那为甚么不在积极响应式变量上标记呢？
因为积极响应式变量的类型有几种：ref、computed、reactive，它们都采用 dep 第一类存储依赖，对它们都有的 dep 第一类展开标记，可以将标记代码更好的展开复用（否则要判断不同的类型，执行不同的标记逻辑）。
假如未来新增一类积极响应式变量，只须要也是用 dep 展开存储依赖即可
那个按位与位运算的作用是甚么？
先来看看 dep 的真实结构，它其实还有两个属性 w 和 n：
export type Dep = Set
type TrackedMarkers = {
/**
* wasTracked，代表副作用表达式执行前被 track 过
*/
w: number
/**
* newTracked，代表副作用表达式执行后被 track
*/
n: number
}
那那个 w 和 n 是怎么做标记的？他们先来看看位运算做了甚么，不了解位运算的同学 ，可以先看看这里的介绍
dep.w |= trackOpBit // 即 dep.w = dep.w | trackOpBit
将积极响应式变量标记，就是将相关联整数的二进制位，设置成 1
dep.n 的标记方法也是如此。
为甚么要采用位运算？
位运算速度快
只须要采用两个 number 类型的数据，就能存储不同深度的标记（was / new）
假如不采用位运算，须要与此同时实现同样的标记能力，须要用数组存储不同深度的标记，数据结构如下：
export type Dep = Set
type TrackedMarkers = {
/**
* wasTrackedList，代表副作用表达式执行前被 track 过
* 设计为数组，是因为 effect 可以嵌套，代表积极响应式变量在所在的 effect 深度（嵌套层级）中是否被 track
*/
wasTrackedList: boolean[]
/**
* newTracked，代表副作用表达式执行后被 track
* 设计为数组，是因为 effect 可以嵌套，代表积极响应式变量在所在的 effect 深度（嵌套层级）中是否被 track
*/
newTrackedList: boolean[]
}
采用数组存储标记位，修改处理没有直接位运算快。由于 vue 每次执行副作用表达式（两个页面有十分多的副作用表达式），都须要频繁展开标记，这开销也是十分大的。因而，这里采用了运算符，提升了标记的速度，也节省了运行内存
trackOpBit 是甚么？
trackOpBit 是代表当前操作的位，它是由 effect 嵌套深度决定的。
// 全局变量嵌套深度一开始为 0
effectTrackDepth = 0
// 每次执行 effect 副作用表达式前，全局变量嵌套深度会自增 1，执行完成 effect 副作用表达式后会自减
trackOpBit = 1 << ++effectTrackDepth
当深度为 1 时，trackOpBit 是 2（二进制：00000010），操作的是第二位，将 dep.w 的第二位变成 1
因而如图所说，dep.w 的第一位是不采用的
为甚么最大标记嵌套深度为 30？
从图中他们可以看到，深度受存储类型的位数限制，否则就会溢出。
在JavaScript内部，数值都是以64位浮点数的形式储存，但是做位运算的时候，是以32位带符号的整数展开运算的，并且返回值也是两个32位带符号的整数。
1 << 30
// 1073741824
1 << 31
// -2147483648，溢出
因而，深度最大为 30，超过 30，则须要降级方案，采用全部清除再全部重新收集依赖的方案
判断响应式变量是否被标记
export const wasTracked = (dep: Dep): boolean => (dep.w & trackOpBit) > 0
export const newTracked = (dep: Dep): boolean => (dep.n & trackOpBit) > 0
采用 wasTracked 和 newTracked 判断 dep 是否在当前深度被标记
trackOpBit 是两个全局变量，根据当前深度生成的
如图，假如须要判断深度为 2 时（trackOpBit 第 3 位为 1），是否被标记，仅当 dep.w 的第 3 位为 1 时， wasTracked 或 newTracked 才会返回 true
vue 通过这样巧妙的位运算，快速算出依赖在当前深度是否被标记
副作用第一类的优化与此同时实现
// 当前 effect 的嵌套深度，每次执行会 ++effectTrackDepth
let effectTrackDepth = 0
// 最大的 effect 嵌套层数为 30
const maxMarkerBits = 30
// 位运算操作的第 trackOpBit 位
export let trackOpBit = 1
export class ReactiveEffect
run() {
if (!effectStack.includes(this)) {
try {
// 省略代码: 保存上两个 activeEffect
// trackOpBit: 根据深度生成 trackOpBit
trackOpBit = 1 << ++effectTrackDepth
// maxMarkerBits: 可支持的最大嵌套深度，为 30
// 这里就是之前说到的，正常情况下采用优化方案，极端嵌套场景下，采用降级方案
if (effectTrackDepth <= maxMarkerBits) {
// 标记所有的 dep 为 was
initDepMarkers(this)
} else {
// 降级方案，删除所有的依赖，再重新收集
cleanupEffect(this)
}
// 执行过程中标记新的 dep 为 new
return this.fn()
} finally {
if (effectTrackDepth <= maxMarkerBits) {
// 对失效依赖展开删除
finalizeDepMarkers(this)
}
// 恢复上一次的状态
// 嵌套深度 effectTrackDepth 自减
// 重置操作的位数
trackOpBit = 1 << –effectTrackDepth
// 省略代码: 恢复上两个 activeEffect
}
}
}
}
整体的思路如下：
假如当前深度不超过 30，采用优化方案
执行副作用表达式前，给 ReactiveEffect 依赖的积极响应式变量，加上 was 的标记（was 是 vue 给的名称，表示过去依赖）
执行 this.fn()，track 重新收集依赖时，给 ReactiveEffect 的每个依赖，加上 new 的标记
对失效依赖展开删除（有 was 但是没有 new）
恢复上两个深度的状态
假如深度超过 30 ，超过部分，采用降级方案：
双向删除 ReactiveEffect 副作用第一类的所有依赖（effect.deps.length = 0）
执行 this.fn()，track 重新收集依赖时
恢复上两个深度的状态
标记 ReactiveEffect 的所有的 dep 为 was 的与此同时实现：
export const initDepMarkers = ({ deps }: ReactiveEffect) => {
if (deps.length) {
for (let i = 0; i < deps.length; i++) {
deps[i].w |= trackOpBit // 遍历每个 dep 标记为 was
}
}
}
对失效依赖展开删除的与此同时实现如下（有 was 但是没有 new）：
export const finalizeDepMarkers = (effect: ReactiveEffect) => {
const { deps } = effect
if (deps.length) {
let ptr = 0
for (let i = 0; i < deps.length; i++) {
const dep = deps[i]
//有 was 标记但是没有 new 标记，应当删除
if (wasTracked(dep) && !newTracked(dep)) {
dep.delete(effect)
} else {
// 须要保留的依赖，放到数据的较前位置，因为在最后会删除较后位置的所有依赖
deps[ptr++] = dep
}
// 清理 was 和 new 标记，将它们相关联深度的 bit，置为 0
dep.w &= ~trackOpBit
dep.n &= ~trackOpBit
}
// 删除依赖，只保留须要的
deps.length = ptr
}
}
