Vue模拟响应式原理底层代码实现的示例

class Vue{
    constructor(options) {
        //1.通过属性保存选项中的数据
        this.$options = options || {}
        this.$data = options.data || {}
        this.$el = typeof options.el === 'string' ? document.querySelector(options.el) : options.el
        //2.把data中的成员转化为getter和setter,注入到vue实例中
        this._proxyData(this.$data)
        //3.调用observer对象,监听数据的变化
        new Observer(this.$data)
        //4.调用compiler对象,解析指令和差值表达式
        new Compiler(this)
    }
    //把Vue的属性转化为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方法定义响应式数据 把属性转化为getter和setter
    defineReactive(obj,key,val) {
        let that=this
        // 负责收集依赖,并发送通知
        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方法
                //比如:历史数据vm.msg="Hello World" 修改之后vm.msg={a:'Hwllo World'}
                //再次调用此方法给vm.msg.a重新添加getter和setter方法
                that.walk(newValue)
                //发送通知
                dep.notify()
            }
        })
    }
}

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

class Watcher{
    constructor(vm,key,cb) {
        this.vm=vm
        //data中的属性名称
        this.key=key
        //回调函数负责更新视图
        this.cb=cb
        //把watcher对象记录到Dep类的静态属性target
        Dep.target =this
        //触发get方法,在get方法中会调用addSub
        this.oldValue=vm[key]
        Dep.target=null
    }
    //当数据发生变化时更新视图
    update(){
        let newValue=this.vm[this.key]
        if(this.oldValue === newValue){
            return
        }
        this.cb(newValue)
    }
}