SOURCE

				     		/*Object的变化侦测*/
		//对象的属性拦截
        const arrayProto = Array.prototype;
         const arrayMethods = Object.create(arrayProto);
		function defineReactive(data,key,val){
            if(typeof val === 'object'){
                new Observer(val)
            }
            let childOb = observe(val)
			let dep = new Dep();
			Object.defineProperty(data,key,{
				enumerable:true,
				configurable:true,
				get:function(){
					dep.depend()
					if(childOb){
                        // console.log("--get--")
                        // console.log(childOb)
						childOb.dep.depend()
					}
					return val;
				},
				set:function(newVal){
                    console.log("--set--")
              		console.log(newVal)
              		console.log(dep)
					if(val === newVal){
						return
					}
					val = newVal
                    dep.notify()
				}
			})
		}
        
        //依赖收集在哪里
		class Dep{
			constructor(){
				this.subs = [];
			}
			addSub(sub){
				this.subs.push(sub)
               
			}
			removeSub(sub){
				remove(this.subs,sub)
			}
			depend(){
				if(window.target){
					this.addSub(window.target)
				}
			}
			notify(){
                console.log("3-1")
                // console.log(this.subs)
				const subs = this.subs.slice()
                // console.log(subs)
				for(let i =0;i <subs.length;i++){
					subs[i].update()
				}
			}
		}

		function remove(arr,item){
			if(arr.length){
				const index = arr.indexOf(item)
				if(index >-1){
					return arr.splice(index,1)
				}
			}
		}
        //依赖类
        class Watcher {
            constructor(vm,expOrFn,cb){
                // console.log("2-1")
                //vm是数据对象value
                //expOrFn是key
                //cb是回调函数
                this.vm = vm;
                this.getter = parsePath(expOrFn);
                //this.getter为返回函数A
                this.cb = cb;
        
                this.value = this.get();
            }

            get(){
                window.target = this;
                let value = this.getter.call(this.vm,this.vm)
                window.target = undefined;
                return value
            
            }

            update(){
                const oldValue  = this.value;
                this.value = this.get();
                this.cb.call(this.vm,this.value,oldValue)
            }
        }

        const bailRE = /[^\w.$]/;
        function parsePath(path){
            if(bailRE.test(path)){
                return
            }
            const segments = path.split('.')
            //返回函数A 闭包函数
            return function(obj){
                //obj为数据对象value
                //segments为key
                for(let i =0;i <segments.length;i++){
                    // console.log("2-3")
                    if(!obj)return
                    //  console.log("2-4")
                    obj = obj[segments[i]]
                }
 
                return obj
            }
        }
		const hasProto = '__proto__' in {};
		const arrayKeys = Object.getOwnPropertyNames(arrayMethods);
        //侦测所有的key
        class Observer {
            constructor(value){
                this.value = value;
                //数组添加
                	this.dep = new Dep()
                	def(value,'__ob__',this)
                if(Array.isArray(value)){
                	const argument = hasProto?protoAugment:copyAugment;
                	argument(value,arrayMethods,arrayKeys)
                	observeArray(value)
                }
                //数组添加
                if(!Array.isArray(value)){
                    this.walk(value)
                }
            }

            walk(obj){
                const keys = Object.keys(obj)
                for(let i = 0;i<keys.length;i++){
                    defineReactive(obj,keys[i],obj[keys[i]])
                }
            }
        }

        //解析指令
        class Compile{
        	constructor(data,el){
        		let nodes = [...el.children];
	        	nodes.forEach(node =>{
	        		if(node.children && node.children.length !== 0 ){
	        			new Compile(nodes)
	        		}

	        		if(node.hasAttribute('v-mode')){
	        			let attrVal = node.getAttribute('v-mode');
	        			var arrList = attrVal.split(".")
	        			new Watcher(data,arrList[1],(val,oldval)=>{
	        				console.log("--这是回调函数--")
	        				node.value = val
	        			})
	        		}

	        	})
        	}
  
        }
        //vue类
        class Vue{
            constructor(options){
                new Observer(options)

                //给数据添加订阅者
                let el = document.getElementById("app");
              
                new Compile(options,el)
                // Object.keys(options).forEach(key=>{//按照options的属性循环实例化watcher
                //     new Watcher(options,key,()=>{
                //         console.log("这是回调方法")
                //     });
                // })
            }
        }


        // obj.time = "17";
        /**
         * 数据初始化首先 实例化Obsever 并将对象数据作为参数传入 在observer实例中循环参数
         * 对象的值value，并对value调用defineReactive方法中实例化Dep 之后重新定义get和set。
         * get方法中收集依赖 set方法中派发依赖
         * 其次循环数据value 给value添加订阅者 并通过数据项get方法将value 加入dep实例中
         * 
         * **/
         // 数组的变化侦测ss



         ['push','pop','shift','unshift',
  			'splice','sort','reverse'].forEach(function(method){
                  const original = arrayProto[method]
  				def(arrayMethods,method,function(...args){
  					const result = original.apply(this,args)
  					const ob = this.__ob__;
                      console.log("--push--")
  					let inserted
  					switch(method){
  						case 'push':
  						case 'unshift':
  							inserted = args
  							break
  						case 'splice':
  							inserted = args.slice(2)
  							break
  					}
  					if(inserted) observeArray(inserted)
  					ob.dep.notify()
  					return result
  				})

  		})

  			function def(obj,key,val,enumerable){
  				Object.defineProperty(obj,key,{
  					value:val,
  					enumerable:!!enumerable,
  					writable:true,
  					configurable:true
  				})
  			}

  			//Observer类


  			function protoAugment(target,src,keys){
  				target.__proto__ = src;
  			}

  			function copyAugment(target,src,keys){
  				for(let i = 0;i < keys.length;i++){
  					const key = keys[i];

  				}
  			}

  			function observeArray(items){
  				for(let i =0; i < items.length;i++){
  					observe(items[i])
  				}
  			}

  			function observe(value,asRootData){
  				if(!isObject(value)){
  					return
  				}
  				let ob
  				// if(hasOwn(value,'__ob__') && value.__ob__ instanceof Observer ){
  				// 	ob = value.__ob__;
  				// }else{
  				// 	ob = new Observer(value)
  				// }
                  ob = new Observer(value)
  				return ob
  			}

  			function isObject(val) {
                return val != null && typeof val === 'object' 
			//   return val != null && typeof val === 'object' && Array.isArray(val) === false;
			};
       
        let obj = {
        	time:1,
      
           
        }
       	// let array1 = [1,3,5,7]
        new Vue(obj)
  

        setTimeout(()=>{
        	obj.time = 10;
        },5000)
        // console.log(obj.array1[0])
        // console.log(obj.array1[1])
        // obj.array1.push(9)

	<div id="app">
		1<input type="text" name="" v-mode="obj.time" >

		2<input type="text" name=""  v-mode="obj.time" >
		
	</div>