VUE3实现响应式原理

// 保存当前需要收集的响应式函数
let activeFn = null

/**
 * Depend优化:
 *  1> depend方法
 *  2> 使用Set来保存依赖函数, 而不是数组[]
 */

class Depend {
    constructor() {
        this.reactiveFns = new Set()
    }
    // addDepends(fn) {
    //     this.reactiveFns.push(fn)
    // }
    depend() {
        if (activeFn) {
            this.reactiveFns.add(activeFn)
        }
    }
    notify() {
        this.reactiveFns.forEach(fn => {
            fn()
        })
    }
}

// 封装一个获取depend函数
const targetMap = new WeakMap()
function getDepend(target, key) {
    //根据target对象获取map
    let map = targetMap.get(target)
    if (!map) {
        map = new Map()
        targetMap.set(target, map)
    }

    //根据key获取depend对象
    let depend = map.get(key)
    if (!depend) {
        depend = new Depend()
        map.set(key, depend)
    }
    return depend
}

//构造响应式的函数
function watchFn(fn) {
    activeFn = fn;
    fn()
    activeFn = null
}


function reactive(obj) {
    return new Proxy(obj, {
        get: function (target, key, receiver) {
            // 根据target.key获取对应的depend
            const depend = getDepend(target, key)
            // depend.addDepends(activeFn)
            //添加响应式函数
            depend.depend()
            return Reflect.get(target, key, receiver)
        },
        set: function (target, key, newValue, receiver) {
            Reflect.set(target, key, newValue, receiver)
            const depend = getDepend(target, key)
            depend.notify()
        }
    })
}

const obj = reactive({
    name: "lisa",
    age: 18
})

// watchFn(() => {
//     console.log(obj.name)
// })
watchFn(() => {
    console.log(obj.age)
    console.log('name change',obj.name)
})
obj.name = 'jack'
obj.age = 20