今天来手动实现shallowReactive（Vue3学习(六)）和reactive（Vue3学习(二)），可以点击链接回忆一下具体内容。

手动实现shallowReactive

shallowReactive是浅响应，第一层数据，具体用法可以点击（Vue3学习(六)）查看。

手动实现

function shallowReactive(target) {
    return new Proxy(target, {
        get(target, prop) {
            console.log("劫持get()", prop)
            return Reflect.get(target, prop)
        },
        set(target, prop, val) {
            console.log("劫持set()", prop, val)
            return Reflect.set(target, prop, val)
        },
        deleteProperty(target, prop) {
            console.log("劫持delete", prop)
            return Reflect.deleteProperty(target, prop)
        }
    })
}
const targetVal = shallowReactive({
    a: 1,
    b: 2,
    c: {
        d: 3
    }
})

可以在浏览器控制台试一下，结果如下图：

手动实现reactive

reactive是深度响应，具体用法可以点击（Vue3学习(二)）查看。

手动实现

function reactive(target) {
    if (target && typeof target ==='object') {
        Object.entries(target).forEach(([key,value])=> {
            if (typeof value === 'object') {
                target[key] = reactive(value)
            }
        })
        return new Proxy(target, {
            get(target, prop) {
                console.log("劫持get()", prop)
                return Reflect.get(target, prop)
            },
            set(target, prop, val) {
                console.log("劫持set()", prop, val)
                return Reflect.set(target, prop, val)
            },
            deleteProperty(target, prop) {
                console.log("劫持delete", prop)
                return Reflect.deleteProperty(target, prop)
            }
        })
    }
}
const targetVal = reactive({
    a: 1,
    b: 2,
    c: {
        d: 3
    }
})

可以在浏览器控制台试一下，结果如下图：

下期预告手动实现shallowRef和ref，敬请期待。