vue 响应式原理 发布订阅模型 对象赋值

vue响应式原理主要靠两点：

//vue响应是原理
//每个vue都包含一个对象实例，这个对象实例拥有defineProperty（）监听属性的改变并进行赋值操作；
      Object.keys(obj).forEach(key=>{
   let value=obj[key];
       Object.defineProperty(obj,key,{

           set(newvalue){
               value=newvalue;
      }

      get(){
               return value;
      }
   })
})

2、使用消息队列模型，发布订阅模式

//发布者
class Dep{
    constructor(){
        this.subs=[];
    };
    addSubs(watcher){
        this.subs.push(watcher)
    }
    
    notify(){
        this.subs.forEach(item=>{
            item.update()
        })
    }
}
//订阅者，也就是使用属性的值的监听者
class Watcher{
    constructor(name){
        this.name=name;
    }
    update(){
        console.log("更新改变的值");
    }
}
const  dep =new Dep()
const  wt1=new Watcher("wahaha");
dep.addSubs(wt1)
const  wt2 =new Watcher("wanglihong")
dep.addSubs(wt2)
//在set()处调用
dep.notify()

总结:在每次属性改变时会调用set()方法，在每次获取值时会调用get()方法。