编辑代码

function observe(obj) {
    // 判断类型
    if (!obj || typeof obj !== 'object') {
        return
    }
    Object.keys(obj).forEach(
        item => {
            redefinedObj(obj, key, obj[key])
        }
    )
    function redefinedObj(obj, key, value) {
        observe(value)
        Object.defineProperty(obj, key, {
            configurable: true,
            enumerable: true, //可枚举（可以遍历）
            set: (newVal) => {
                observe(value)
                if (newVal !== value) {
                    console.log('set', newVal) // 监听
                    // render()//渲染
                    value = newVal
                }

            },
            get: () => {
                console.log('get', value) // 监听
                return value
            }
        })
    }
}

class Vue {
    constructor(option) {
        this.data = opetion.data
        observe(this.data)
    }
}


let obj = {
    name: '前端工匠',
    age: { age: 100 },
    arr: [1, 2, 3]
}
let handler = {
    get(target, key) {
        console.log("代理执行")
        // 如果取的值是对象就再对这个对象进行数据劫持
        if (typeof target[key] == 'object' && target[key] !== null) {
            // console.log("代理执行")
            return new Proxy(target[key], handler)
        }
        return Reflect.get(target, key)
    },
    set(target, key, value) {
        //key为length时，表示遍历完了最后一个属性
        if (key === 'length') return true
        render()
        return Reflect.set(target, key, value)
    }
}
let ap = new Proxy(obj, handler)
let x = ap.age
x.age