SOURCE

function updateView(){
    console.log('视图更新')
}

//重新定义数组原型
const oldArrayProperty = Array.prototype
//创建新的对象，原型指向oldArrayProperty，再扩展新的方法不会影响原型
const arrProto = Object.create(oldArrayProperty);
['push','pop','shift'].forEach(methodName = () => {
    arrProto[methodName] = function(){
        updateView()//触发试图更新
        oldArrayProperty([methodName]).call(this,... arguments)
        //同于Array.prototype.push.call(this,...arguments)
    }
})

function defineReactive(target,key,value){
    //深度监听
    observer(value)
    //核心 API
    Object.defineProperty(target,key,{
        get(){
            return value
        },
        set(newVale){
            if(newVale !== value){
                //深度监听
                observer(value)
                //注意 value 一直在闭包中,此处设置完之后，
                value = newVale
                updateView()
            }
        }
    })
}

//监听对象属性
function observer(target){
    if(typeof target !== 'object' || target === null){
        //不是对象或数组
        return target
    }
    //重新定义各个属性
    for(let key in target){
        defineReactive(target,key,target[key])
    }
}

const data = {
    name:'zhigang',
    age:20,
    info:{
        address:'北京' //深度监听
    },
    nums:[]
}
observer(data)
//data.name = '222'
// data.age = 22
// data.info.address = 'eee9'
data.ncik = 222
data.nums.push(1)