数据劫持

es6提供了一个defineProperty的函数，目的是劫持对象的属性，当属性变化时可立即捕获到。

var o = {name:'jack'}
defineReactive(o,'name',o['name'])
o.name = 'tom'

function defineReactive(obj,key,val){
    Object.defineProperty(obj,key,{
        enumerable:true,
        configurable:true,
        get(){
            return val
        },
        set(newval){
            console.log('object属性发生了变化')
            val = newval
        }
    })
}

这只是最简单的对象，如果是有多重嵌套的呢？

var o = {a: {b: {c: 'jack'}}}

我们可以采用递归来解决。

var o = {a: {b: {c: 'jack'}}}
observe(o)
o.a.b.c = 'tom'

//利用递归劫持object所有的属性
function observe(data){

    Object.keys(data).forEach(function(key){

        if(typeof data[key] === 'object'){

            observe(data[key]) //递归

        } else{

            defineReactive(data,key,data[key]) 

        }

    })
}


function defineReactive(obj,key,val){
    Object.defineProperty(obj,key,{
        enumerable:true,
        configurable:true,
        get(){
            return val
        },
        set(newval){
            console.log('object属性发生了变化')
            val = newval
        }
    })
}