vue的原理

92 阅读1分钟

class Vue{
constructor(){
new Compile
}
//数据劫持
defineReactive(){
 this.observe(val)//多层遍历
 
 const dep =new Dep()
 
  Object.defineProperty(obj,key,{
      get(){
      	Dep.target && dep.addDep(Dep.target)
      },
      set(){
      	dep.notify()
      }
  })

}
}

//编译里面
class Compile{
updata(){
new Watcher(vm,exp,function(value) {
            updaterFn&& updaterFn(node,value)
        })
}
}

//Dep:用来管理Watcher
class Dep{
	constructor(){
    	//存放若干的watcher
        this.deps=[]
    }
    notify(){
    	this.deps.forEach(dep=>{
        dep.update()
        })
    }
}

class Watcher{
constructor(){
    //将当前watcher实例指定到Dep静态属性target
	Dep.target = this
}
	
 update(){
 	consle.log('属性更新了')
 }

}