{"size": 1889, "ext": "js", "max_stars_repo_path": "examples/vue2.0源码/2/tvue.js", "max_stars_repo_name": "hejialianghe/Senior-FrontEnd", "max_stars_repo_stars_event_min_datetime": "2020-05-14T03:44:48.000Z", "max_stars_repo_stars_event_max_datetime": "2022-03-31T03:40:54.000Z", "max_issues_repo_path": "examples/vue2.0源码/2/tvue.js", "max_issues_repo_name": "hejialianghe/Senior-FrontEnd", "max_issues_repo_issues_event_min_datetime": "2020-08-31T05:50:14.000Z", "max_issues_repo_issues_event_max_datetime": "2022-03-17T00:06:53.000Z", "max_forks_repo_path": "examples/vue2.0源码/2/tvue.js", "max_forks_repo_name": "hejialianghe/Senior-FrontEnd", "max_forks_repo_forks_event_min_datetime": "2020-06-11T05:59:47.000Z", "max_forks_repo_forks_event_max_datetime": "2022-03-29T10:09:42.000Z"}
{"max_stars_count": 883, "max_issues_count": 32, "max_forks_count": 128, "avg_line_length": 20.9888888889, "max_line_length": 50, "alphanum_fraction": 0.4663843303}
class tvue {
    constructor (options){
        this.$options=options
    
        // 数据响应化
        this.$data=options.data
        this.observe(this.$data)
     
        new Compile(options.el,this)

        if(options.created){
            options.created.call(this)
        }
    }
    observe(value){
      if(Array.isArray(value)){

      }else{
          this.walk(value)
      }
    }
    walk(obj){
        const keys=Object.keys(obj)
        keys.forEach(key=>{
            // 传入对象和属性名
            this.defineReactive(obj,key,obj[keys])
            // 代理data中的属性到vue 实例上
            this.proxyData(key)
        })
    }
    defineReactive(obj,key,val){
        val=obj[key]
        const dep=new Dep()
        Object.defineProperty(obj,key,{
            get:function reactiveGetter(){
                if(Dep.target){
                    dep.addDep(Dep.target)
                }
                return val
            },
            set:function reactiveSetter (newVal){
                console.log(222, newVal)
                val=newVal
               dep.notify()
              
            }
        })
    }
    proxyData (key) {
        Object.defineProperty(this,key,{
            get(){
              return this.$data[key]  
            },
            set(newVal){
                this.$data[key]=newVal
            }
        })

    }
}
// Dep用来管理watcher
class Dep {
    constructor(){
        // 存放watcher实例
        this.deps=[]
    }
    addDep(dep){
        this.deps.push(dep)
    }
    notify(){
        this.deps.forEach(dep=>dep.update())
    }
}

class Watcher {
    constructor(vm,key,cb){
        this.vm=vm;
        this.key=key;
        this.cb=cb
        // 把当前的wathcer实例指定到Dep静态属性target上
        Dep.target=this;
        this.vm[this.key] // 触发getter添加依赖
        Dep.target=null
    }
    update(){
        this.cb.call(this.vm,this.vm[this.key])
    } 
}

