数据改动，更新视图，类似于vue

　　

//当数据改变时，更新视图，和vue的有点类似
let obj = {
    name:{
        name:'ll'
    },
    age:12,
}
let arr = [1,2,3];
//针对数组的写法
//当需要改变原型对象上的方法时，不要直接在prototype上修改，否则以后使用的都是修改后的方法
//创建一个新对象，可以获取到Array.protyotype上的所有方法
let proto = Object.create(Array.prototype);
['pop','push','shift','unshift','reverse','sort','splice'].forEach(method=>{
    proto[method] = function(){
        update();
        let old = Array.prototype[method];
        old.call(this,...arguments)
    }
})
function update(){
    console.log('更新视图')
}
function observer(obj){
    //如果是数组，不循环，把数组的新方法赋给该数组
    if(Array.isArray(obj)) return;
    if(typeof obj !== 'object'){
        return obj.__proto__ = proto;
    }
    for(let key in obj){
        defineReactive(obj,key,obj[key]);
    }
}
//定义属性的getter和setter
function defineReactive(obj,key,value){
    observer(value)   //如果值是对象，继续循环定义getter和setter
    Object.defineProperty(obj,key,{
        get(){
            return value;
        },
        set(newval){
            //如果新值是个对象，也要循环定义getter和setter
            if(typeof newval === 'object'){
                observer(newval)
            }
            //如果数据有变化，更新视图
            if(value !== newval){
                update();
            }
            value = newval
        }
    })
}
//对象
observer(obj);
//数组
observer(arr);
//更改数据
obj.name.name = 'mj';
arr.push(4);
console.log(obj);
console.log(arr)