vue中的数据劫持defineProperty

class Vue {
    constructor(options) {
        this.$options = options;
        this._data = options.data;
        this.initDatil()
    }

    initDatil() {
        let data = this._data;
        Object.keys(data).forEach(key => {
            Object.defineProperty(this, key, {
                enumerable: true,
                configurable: true,
                get() {
                   return data[key]
                },
                set(newval) {
                    data[key]=newval
                }
            })
        })
        observes(data)
    }

}

function observes(data){

    let type=Object.prototype.toString.call(data)
    if(type !=='[object Object]' && type!=='[object Array]') return

    new Observe(data)


}

function defindResever(data,key,val){
    observes(data[key])
    Object.defineProperty(data,key,{
       get(){
           console.log(`读取了${key}`)
           return val;
       },
        set(newval){
            console.log(`修改了${key}`)
           val=newval
        }
    })
}

class Observe{
    constructor(options) {
      this.walk(options)
    }
    walk(data){
        Object.keys(data).forEach(key=>{
            defindResever(data,key,data[key])
        })
    }
}


let vm = new Vue({
    data:{
        message:'fack',
        person:{
            name:'zs',
            city:{
                cityName:'ssjks'
            }
        }
    }
})
// vm.person.name = 'ls'
vm.person.city.cityName = 'jdsfjl'