数据改动，更新视图，类似于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)