原理：
vue数据双向绑定通过‘数据劫持’ + 订阅发布模式实现
数据劫持：
指的是在访问或者修改对象的某个属性时，通过一段代码拦截这个行为，进行额外的操作或者修改返回结果
典型的有
1.Object.defineProperty()
2.es6中Proxy对象
vue2.x使用Object.defineProperty();
vue3.x使用Proxy;
订阅发布模式：
定义：对象间的一种一对多的依赖关系，当一个对象的状态发生改变时，所有依赖于它的对象都将得到通知
订阅发布模式中事件统一由处理中心处理，订阅者发布者互不干扰。
优点：实现更多的控制，做权限处理，节流控制之类，例如：发布了很多消息，但是不是所有订阅者都要接收
// 实现一个处理中心
let event={
clientList:{},// 订阅事件列表
// 订阅
on(key,fn){
// 如果这个事件没有被订阅，那么创建一个列表用来存放事件
if(!this.clientList[key]){
this.clientList[key]=[]
}
// 将事件放入已有的事件列表中
this.clientList[key].push(fn);},
// 发布
trigger(type,args){
letfns=this.clientList[type]// 拿到这个事件的所有监听
if(!fns||fns.length===0){// 如果没有这条消息的订阅者
returnfalse}
// 如果存在这个事件的订阅，那么遍历事件列表，触发对应监听
fns.forEach(fn=>{// 可以在此处添加过滤等处理
fn(args)})}}
vue中如何实现：
利用Object.defineProperty();把内部解耦为三部分
Observer: 递归的监听对象上的所有属性，当属性改变时触发对应的watcher
watcher(观察者):当蒋婷的数据值修改时，执行相应的回调函数，更新模板内容
dep：链接observer和watcher，每一个observer对应一个dep,内部维护一个数组，保存与该observer相关的watcher
proxy实现观察者模式：
观察者模式（Observer mode）指的是函数自动观察数据对象，一旦对象有变化，函数就会自动执行
constperson=observable({name:'张三',age:20});
functionprint(){console.log(`${person.name}, ${person.age}`)}observe(print);
person.name='李四';// 输出// 李四, 20
代码中。对象person是观察目标，函数print是观察者。一旦数据发生变化，print就会自动执行
使用proxy实现一个最简单观察者模式，即实现observable和observe这两个函数。
思路是observable函数返回一个原始对象的proxy代理，拦截复制操作。触发充当观察者的各个函数
constqueue=newSet();
constobserve=fn=>queue.add(fn);
constobservable=obj=>newProxy(obj,{set});
functionset(target,key,value,receiver){
constresult=Reflect.set(target,key,value,receiver);
queue.forEach(observer=>observer());
returnresult;}
上面代码中，先定义了一个Set集合，所有观察者函数都放进这个集合，然后，observable函数返回原始对象的代理，拦截赋值操作。
拦截函数set中，自动执行所有观察者