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

首先上一段代码：

const obj = { age: 1 } // 定义一个对象
let age = obj.age // 将对象的age属性赋值给一个变量
obj.age++ // 对象的age属性发生了变化
console.log(`age=${age}`, obj); // 输出结果： age = 1  {age: 2}

在obj的age属性变化时，变量age如果也随之变化，通常就需要定义一个函数赋予改变逻辑，在每次变化时手动执行一下函数。下面将以vue3中的响应式设计作为参考，来实现一个能自动响应方法。

创建Demo

在Vue3中，数据响应模块被独立拆分了出来，现在我们可以随意创建一个node项目，然后npm或yarn安装包@vue/reactivity，这个包中有两个关键函数，reactive 和 effect，分别是创建一个响应式的对象和数据发生改变时的监听方法：

使用包引入的函数，修改了上面的例子，满足了响应式需求，外部定义的变量跟随对象一起改变，打印出两个数值一致：

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

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

let _age

effect(() => { // 对象变化时的监听响应操作，这里执行了两次
    _age = obj.age
    console.log(`I'm ${_age} years old`);
})

obj.age++ // 操作对象，数据随之响应

console.log(_age, obj); // 结果： 2 { age: 2 }

模拟实现基本的Reacticity

/**
 * 1. 收集依赖   2. 触发通知
 */
class Dep {
    constructor(val) {
        this.effects = new Set()
        this._val = val
    }
    get value() {
        return this._val
    }
    set value(newVal) {
        this._val = newVal
    }
    depend() {
        // 依赖收集...
    }
    notify() {
        // 触发通知...
    }
}

function effectWatch(effect) {}

代码结构已有，先从结果出发，来看一个测试用例，假设从基本数据类型开始：

// Test
const hero = new Dep(1) // 传入一个数值
let lv
effectWatch(() => { // 响应对象的变动执行函数
    lv = hero.value
    console.log(`等级提升： ${lv}`); // 期望结果 .. 等级提升:2
})
setTimeout(() => {
    hero.value++
}, 1000);

照着上面的例子创建了这样一个英雄升级的例子，这里期望的运行结果应该是打印出 等级提升:2 这样的结果，开始完善函数：

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) // 提交给依赖收集器
}

这里经历了一点小插曲。。在收集依赖定义中间变量currentEffect时想用下静态属性，一直报错(要么这个变量在类的外部定义就可以)，搜索一番后发现class的静态属性还只是个提案？还是我这node10版本太低了？那么，面向未来开发，yarn global add typescript + yarn global add ts-node一顿操作后运行tsc --init，然后在生成的json里修改指向es6："target": "es2015"，使用ts-node指令运行，代码结构还是那样，主要完善了在get set中收集和触发依赖，再运行测试用例，成功输出：

// Test
运行上面的Test代码
.....

等级提升： 1
等级提升： 2

看到这里，我们已经实现了基本数据类型的响应式代码，而对象操作这种更为复杂的数据，就需要使用到ES6新特性代理相关的知识了.

响应式对象

基本数据类型的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
        }
    })
}