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
}