实现 effect & reactive & 依赖收集 & 触发依赖

前言

上一章大致讲述了项目初始化，本章主要内容：实现 effect & reactive & 依赖收集 & 触发依赖，让我们一起来看看吧。

---

一、TDD是什么？

TDD现在是社区很火的一种开发方式。测试驱动开发（Test-Driven Development）的英文简称，是敏捷开发中的一项核心实践和技术，也是一种设计方法论。TDD的原理是在开发功能代码之前，先编写单元测试用例代码，测试代码确定需要编写什么产品代码。

二、开始

1.搭建项目架构

1、先在src下创建 reactivity 文件夹用来实现 reactivity 响应式 相关逻辑 具体代码结构如下：

.
├── README.md
├── package.json
├── babel.config.js
├── src                  源码
│   └── reactivity
│       ├── src          reactivity 实现文件
│       └── tests        reactivity 测试文件
└── tsconfig.json        ts配置文件

2.测试文件

1、首先，先创建一个effect.spec.ts 文件用来写effect测试

import { effect } from "../src/effect"
import { reactive } from "../src/reactive"

describe('effect', () => {
    it('happy path', () => {
        // 创建一个reactive响应式数据
        const reactiveUser = reactive({
            age: 10
        })

        let newAge
        // 通过effect 去实现依赖的收集和触发
        effect(() => {
            newAge = reactiveUser.age + 1
        })

        expect(newAge).toBe(11) // expect 断言newAge变量 等于11

        // update age
        reactiveUser.age ++  // 更新响应式数据属性
        expect(newAge).toBe(12) // 断言newAge变量 等于12
    })
})

因为effect 整个测试流程很大，所以拆分出两块，分别是effect和reactive 测试，下面写一下reactive 测试：

import { reactive } from '../src/reactive';

describe('reactive', () => {
    it('happy path', () => {
        const original = { foo: 1 } // 声明初始变量original
        const observed = reactive(original) // 通过reactive使original变成响应式并赋值给observed
        expect(observed).not.toBe(original) // 因为vue3响应式是用Proxy实现的，所以断言observed 不等于 original
        expect(observed.foo).toBe(1) // 断言observed的foo 属性等于 1
    })
})

3.实现文件

import { track, trigger } from "./effect"

export function reactive(raw) {
    return new Proxy(raw, {
        get(target, key) {
            const res = Reflect.get(target, key)

            // 收集依赖
            track(target, key)
            return res
        },

        set(target, key, value) {
            const res = Reflect.set(target, key, value)

            // 触发依赖
            trigger(target, key)
            return res
        }
    })
}

effect 具体实现思路为下面的脑图

// 全局的effect指针
let activeEffect

// effect响应式类
class ReactiveEffect {
    private _fn: any

    constructor(fn) {
        this._fn = fn
    }

    run() {
        activeEffect = this // 把全局effect赋值为当前effect实例
        this._fn() // 执行effect传过来的函数
    }
}

// 全局的target容器
let targetsMap = new Map()

// 收集依赖
function track(target, key) {
    // target => key => dep
    // target 目标对象
    // key 目标对象中的属性
    // dep 属性关联的函数(不可以重复，所以用Set存放)
    let depsMap = targetsMap.get(target)
    // 初始化时，depsMap不存在，要声明并且存放到对象Map中
    if (!depsMap) {
        depsMap = new Map()
        targetsMap.set(target, depsMap)
    }

    let dep = depsMap.get(key)
    // 初始化时，dep不存在，要声明并且存放到属性依赖Set中
    if (!dep) {
        dep = new Set()
        depsMap.set(key, dep)
    }
    dep.add(activeEffect) // 把当前effect实例收集起来
}

// 触发依赖
function trigger(target, key) {
    let depsMap = targetsMap.get(target) // 获取到相应的对象Map
    let dep = depsMap.get(key) // 获取到相应的属性依赖Set
    for (const effect of dep) {
        effect.run() // 去触发依赖Set中每个依赖
    }
}

// 执行函数
function effect(fn) {
    const _effect = new ReactiveEffect(fn) // 面向对象思想

    _effect.run()
}

export {
    track,
    trigger,
    effect
}

以上，执行jest，就通过了，如下图

---

总结

本章讲述effect & reactive & 依赖收集 & 触发依赖的实现，一起学习Vue3。 坚持就是胜利，各位观众老爷的三连也是up的坚持动力，共勉！ 最后，附上git地址：mini-vue