vue3.0响应式函数原理详细

// 判断是否是一个对象
const isObject = val => val !== null && typeof val === 'object'
// 如果是对象则调用reactive
const convert= target => isObject(target) ? reactive(target) : target
// 判断对象是否存在key属性
const haOwnProperty = Object.prototype.hasOwnProperty
const hasOwn = (target, key) => haOwnProperty.call(target, key)

export function reactive (target) {
    if (!isObject(target)) {
        // 如果不是对象直接返回
        return target
    }

    const handler = {
        get (target, key, receiver) {
            // 收集依赖
            const result = Reflect.get(target, key, receiver)
            // 如果属性是对象则需要递归处理
            return convert(result)
        },
        set (target, key, value, receiver) {
            const oldValue = Reflect.get(target, key, receiver)
            let result = true;
            // 需要判断当前传入的新值和oldValue是否相等，如果不相等再去覆盖旧值，并且触发更新
            if (oldValue !== value) {
                result = Reflect.set(target, key, value, receiver)
                // 触发更新...
            }
            // set方法需要返回布尔值
            return result;
        },
        deleteProperty (target, key) {
            // 首先要判断当前target中是否有自己的key属性
            // 如果存在key属性，并且删除要触发更新
            const hasKey = hasOwn(target, key)
            const result = Reflect.deleteProperty(target, key)
            if (hasKey && result) {
                // 触发更新...
            }
            return result;
        }
    }
    return new Proxy(target, handler)
}

let activeEffect = null;
export function effect (callback) {
    activeEffect = callback;
    // 访问响应式对象属性，收集依赖
    callback();
    // 依赖收集结束要置null
    activeEffect = null;
}

let targetMap = new WeakMap()

export function track (target, key) {
    // 判断activeEffect是否存在
    if (!activeEffect) {
        return;
    }
    // depsMap存储对象和effect的对应关系
    let depsMap = targetMap.get(target)
    // 如果不存在则创建一个map存储到targetMap中
    if (!depsMap) {
        targetMap.set(target, (depsMap = new Map()))
    }
    // 根据属性查找对应的dep对象
    let dep = depsMap.get(key)
    // dep是一个集合，用于存储属性所对应的effect函数
    if (!dep) {
        // 如果不存在，则创建一个新的集合添加到depsMap中
        depsMap.set(key, (dep = new Set()))
    }
    dep.add(activeEffect)
}

get (target, key, receiver) {
    // 收集依赖
    track(target, key)
    const result = Reflect.get(target, key, receiver)
    // 如果属性是对象则需要递归处理
    return convert(result)
},

export function trigger (target, key) {
    const depsMap = targetMap.get(target)
    // 如果没有找到直接返回
    if (!depsMap) {
        return;
    }
    const dep = depsMap.get(key)
    if (dep) {
        dep.forEach(effect => {
            effect()
        })
    }
}

set (target, key, value, receiver) {
    const oldValue = Reflect.get(target, key, receiver)
    let result = true;
    // 需要判断当前传入的新值和oldValue是否相等，如果不相等再去覆盖旧值，并且触发更新
    if (oldValue !== value) {
        result = Reflect.set(target, key, value, receiver)
        // 触发更新...
        trigger(target, key)
    }
    // set方法需要返回布尔值
    return result;
},
deleteProperty (target, key) {
    // 首先要判断当前target中是否有自己的key属性
    // 如果存在key属性，并且删除要触发更新
    const hasKey = hasOwn(target, key)
    const result = Reflect.deleteProperty(target, key)
    if (hasKey && result) {
        // 触发更新...
        trigger(target, key)
    }
    return result;
}

export function ref (raw) {
    // 判断raw是否是ref创建的对象，如果是直接返回
    if (isObject(raw) && raw.__v__isRef) {
        return raw
    }

    // 之前已经定义过convert函数，如果参数是对象就会调用reactive函数创建响应式
    let value = convert(raw);

    const r = {
        __v__isRef: true,
        get value () {
            track(r, 'value')
            return value
        },
        set value (newValue) {
            // 判断新值和旧值是否相等
            if (newValue !== value) {
                raw = newValue
                value = convert(raw)
                // 触发更新
                trigger(r, 'value')
            }
        }
    }

    return r
}

export function toRefs (proxy) {
    // 如果是数组创建一个相同长度的数组，否则返回一个空对象
    const ret = proxy instanceof Array ? new Array(proxy.length) : {}

    for (const key in proxy) {
        ret[key] = toProxyRef(proxy, key)
    }

    return ret;
}

function toProxyRef (proxy, key) {
    const r = {
        __v__isRef: true,
        get value () { // 这里已经是响应式对象了，所以不需要再收集依赖了
            return proxy[key]
        },
        set value (newValue) {
            proxy[key] = newValue
        }
    }
    return r
}

export function computed (getter) {
    const result = ref()

    effect(() => (result.value = getter()))

    return result
}