class Vue{
    constructor(options) {
        //1.通過屬性保存選項中的數(shù)據(jù)
        this.$options = options || {}
        this.$data = options.data || {}
        this.$el = typeof options.el === 'string' ? document.querySelector(options.el) : options.el
        //2.把data中的成員轉(zhuǎn)化為getter和setter,注入到vue實例中
        this._proxyData(this.$data)
        //3.調(diào)用observer對象,監(jiān)聽數(shù)據(jù)的變化
        new Observer(this.$data)
        //4.調(diào)用compiler對象,解析指令和差值表達式
        new Compiler(this)
    }
    //把Vue的屬性轉(zhuǎn)化為getter和setter,注入到Vue實例中
    _proxyData(data){
        //遍歷data中所有屬性
        Object.keys(data).forEach(key=>{
          //把data的屬性注入到vue實例全局中
          Object.defineProperty(this,key,{
              enumerable:true,
              configurable:true,
              get(){
                return data[key]
              },
              set(newValue){
                if(newValue===data[key]){
                    return 
                }
                data[key]=newValue
             }
        })    
      })
    }
}

class Observer{
    constructor(data) {
        this.walk(data)
    }
    //walk方法遍歷data中的所有屬性
    walk(data) {
        //1.判斷data是否對象
        if(!data || typeof data !=='object'){
            return 
        }
        //2.遍歷data對象的所有屬性
        Object.keys(data).forEach(key=>{
            this.defineReactive(data,key,data[key])
        })
    }
    //degineReactivce方法定義響應(yīng)式數(shù)據(jù) 把屬性轉(zhuǎn)化為getter和setter
    defineReactive(obj,key,val) {
        let that=this
        // 負責(zé)收集依賴,并發(fā)送通知
        let dep=new Dep()
        //如果val傳入對象的話也給對象里面的屬性添加getter和setter方法
        this.walk(val)
        Object.defineProperty(obj,key,{
            enumerable:true,
            configurable:true,
            get(){
                // 收集依賴
                Dep.target && dep.addSub(Dep.target)
                return val
            },
            set(newValue){
                if(newValue==val){
                    return 
                }
                val=newValue
                //如果給屬性重新賦值成對象,給對象里面的屬性重新添加getter和setter方法
                //比如:歷史數(shù)據(jù)vm.msg="Hello World" 修改之后vm.msg={a:'Hwllo World'}
                //再次調(diào)用此方法給vm.msg.a重新添加getter和setter方法
                that.walk(newValue)
                //發(fā)送通知
                dep.notify()
            }
        })
    }
}

class Dep{
    constructor() {
        //存儲所有的觀察者
        this.subs=[]
    }
    // 添加觀察者
    addSub(sub){
        if(sub && sub.update) {
            this.subs.push(sub)
        }
    }
    //發(fā)送通知
    notify(){
        this.subs.forEach(sub =>{
            sub.update()
        })
    }
}

class Watcher{
    constructor(vm,key,cb) {
        this.vm=vm
        //data中的屬性名稱
        this.key=key
        //回調(diào)函數(shù)負責(zé)更新視圖
        this.cb=cb
        //把watcher對象記錄到Dep類的靜態(tài)屬性target
        Dep.target =this
        //觸發(fā)get方法,在get方法中會調(diào)用addSub
        this.oldValue=vm[key]
        Dep.target=null
    }
    //當(dāng)數(shù)據(jù)發(fā)生變化時更新視圖
    update(){
        let newValue=this.vm[this.key]
        if(this.oldValue === newValue){
            return
        }
        this.cb(newValue)
    }
}