1.自己实现shallowReactive

//劫持事件处理句柄
const reactiveHandler = {
    get(target, key) {
        if (key === '_is_reactive') return true
        return Reflect.get(target, key)
    },

    set(target, key, value) {
        const result = Reflect.set(target, key, value)
        console.log('数据已更新, 去更新界面')
        return result
    },

    deleteProperty(target, key) {
        const result = Reflect.deleteProperty(target, key)
        console.log('数据已删除, 去更新界面')
        return result
    },
}

/*
自定义shallowReactive
*/
function shallowReactive(target) {
    if (target && typeof target === 'object') {
        return new Proxy(target, reactiveHandler)
    }
}

/* 测试自定义shallowReactive */
const proxy = shallowReactive({
    a: {
        b: 3
    }
})

//proxy.a = {b: 4} //劫持到了
//console.log(proxy);
proxy.a.b = 5 // 没有劫持到
console.log(proxy);

2.自己实现reactive

//劫持事件处理句柄
const reactiveHandler = {
    get(target, key) {
        if (key === '_is_reactive') return true
        return Reflect.get(target, key)
    },

    set(target, key, value) {
        const result = Reflect.set(target, key, value)
        console.log('数据已更新, 去更新界面')
        return result
    },

    deleteProperty(target, key) {
        const result = Reflect.deleteProperty(target, key)
        console.log('数据已删除, 去更新界面')
        return result
    },
}

/*
自定义reactive
*/
function reactive(target) {
    if (target && typeof target === 'object') {
        if (target instanceof Array) { // 数组,遍历每一个元素深度劫持
            target.forEach((item, index) => {
                target[index] = reactive(item)
            })
        } else { // 对象，遍历每一个属性深度劫持
            Object.keys(target).forEach(key => {
                target[key] = reactive(target[key])
            })
        }
        const proxy = new Proxy(target, reactiveHandler)
        return proxy
    }
    return target
}

/* 测试自定义reactive */

const obj = {
    a: 'abc',
    b: [{x: 1}],
    c: {x: [11]},
}

const proxy = reactive(obj)
console.log(proxy)；
proxy.b[0].x += 1
proxy.c.x[0] += 1

console.log(proxy)