通过Vue3探索响应式数据原理(二)了解Proxy与Reflect

这是我参与更文挑战的17天，活动详情查看 更文挑战

上一篇文章里我们实现了基本数据类型的响应式方法，接下来我们继续实现一个完整的响应式对象，前方代码量较多，可以先看上一篇文章了解Reacticity

响应式对象

基本数据类型的reactive实现了，接下来实现对象的处理，还是之前Vue3的例子，不同的是将导入的两个函数变成自己实现的：

// const { reactive, effect } = require('@vue/reactivity')
const { reactive, effect } = require('./reactivity')

const obj = reactive({ age: 1 }) // 创建了一个响应式的对象

  .... 省略

obj.age++ // 操作对象，数据随之响应
console.log(_age, obj); // 结果： 2 { age: 2 }
复制代码

那么现在就差reactive这个函数的实现了，继续上面的代码：

class Dep {
    .... 
}
function effectWatch(effect: Function): void {
    ....
}
// 因为改成ts所以这里node环境也直接用es6的export了
export const effect = effectWatch

export function reactive(target: any) {
    return new Proxy(target, {
        get(target: any, key: string | symbol) {
            return Reflect.get(target, key)
        },
        set(target: any, key: string | symbol, value: any) {
            return Reflect.set(target, key, value)
        }
    })
}
复制代码

代码结构出来了，可以看出Proxy和Reflect其实没有那么神秘，有着同样的api参数使用也都一致，Proxy可以帮助解析对象，在这里实现了类似递归的效果，接下来就是要在Proxy中绑定Dep实例并且去触发依赖收集。先来定义一个函数存取实例：

const targetMaps = new Map() // 这里数据结构采用Map，因为用对象的话键名会被格式化成字符串
function getDep(target: any, key: string | symbol) {
    const deps = targetMaps.get(target) || new Map()
    targetMaps.set(target, deps)
    const dep = deps.get(key) || new Dep()
    deps.set(key, dep)
    return dep
}
复制代码

接着就可以在reactive中使用getDep这个方法：

export function reactive(target: any) {
    return new Proxy(target, {
        get(target: any, key: string | symbol) {
            const dep = getDep(target, key) // 获取属性对应Dep实例
            dep.depend() // 触发收集依赖
            return Reflect.get(target, key)
        },
        set(target: any, key: string | symbol, value: any) {
            const dep = getDep(target, key)
            const result = Reflect.set(target, key, value)
            result && dep.notify() // 数据有变化时去通知
            return result
        }
    })
}
复制代码

运行上面改成导入自己包的测试用例，看看运行结果是否与Vue3的例子一致。

附上 reactivity.ts 完整代码

class Dep {
    effects: any
    val: any
    constructor(val: any = '') {
        this.effects = new Set()
        this.val = val
    }
    get value() {
        this.depend() // get中开始收集依赖
        return this.val
    }
    set value(newVal) {
        if (newVal !== this.val) {
            this.val = newVal
            this.notify() // 在set中触发通知
        }
    }
    depend() {
        if (Dep.currentEffect) {
            this.effects.add(Dep.currentEffect)
            Dep.currentEffect = null
        }
    }
    notify() {
        this.effects.forEach((effect: Function) => effect())
    }
    static currentEffect: any
    static trigger(e: Function) {
        Dep.currentEffect = e
    }
}

function effectWatch(effect: Function): void {
    effect() // 模仿了vue3的effect函数，会先执行一次
    Dep.trigger(effect)
}

export const effect = effectWatch

const targetMaps = new Map()
function getDep(target: any, key: string | symbol) {
    const deps = targetMaps.get(target) || new Map()
    targetMaps.set(target, deps)
    const dep = deps.get(key) || new Dep()
    deps.set(key, dep)
    return dep
}

export function reactive(target: any) {
    return new Proxy(target, {
        get(target: any, key: string | symbol) {
            const dep = getDep(target, key)
            dep.depend()
            return Reflect.get(target, key)
        },
        set(target: any, key: string | symbol, value: any) {
            const dep = getDep(target, key)
            const result = Reflect.set(target, key, value)
            result && dep.notify()
            return result
        }
    })
}
复制代码