实现一个响应式函数,对一个对象的所有key添加响应式特性

实现一个响应式函数,对一个对象的所有key添加响应式特性 

const render = (key, val) => {
    console.log(`SET key=${key} val=${val}`);
}
const defineReactive = (obj, key, val) => {
    // 递归
    reactive(val)
    Object.defineProperty(obj, key, {
        get() {
            return val
        },
        set(newVal) {
            // diff判断
            if (val === newVal) {
                return
            }
            val = newVal
            render(key, newVal)
        }
    })
}
const reactive = (obj) => {
    // 递归的终止条件
    if (typeof obj === 'object') {
        for (const key in obj) {
            defineReactive(obj, key, obj[key])
        }
    }
}
const data = {
    a: 1,
    b: 2,
    c: {
        c1: { af: 999 },
        c2: 4
    }
}
reactive(data)

data.a = 5//给data.a重新赋值时控制台输出: SET key=a val=5
data.b = 7//给data.b重新赋值时控制台输出:  SET key=b val=7
data.c.c2 = 4// 新值旧值一样,什么都不输出
data.c.c1.af = 121//给data.c.c1.af赋值时控制台输出:  SET key=af val=121