原理
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){
let fns = this.clientList[type] // 拿到这个事件的所有监听
if(!fns || fns.length === 0){ // 如果没有这条消息的订阅者
return false
}
// 如果存在这个事件的订阅，那么遍历事件列表，触发对应监听
fns.forEach(fn => {
// 可以在此处添加过滤等处理
fn(args)
})
}
}
vue中如何实现
利用Object.defineProperty();把内部解耦为三部分
Observer: 递归的监听对象上的所有属性，当属性改变时触发对应的watcher
watcher(观察者):当蒋婷的数据值修改时，执行相应的回调函数，更新模板内容
dep：链接observer和watcher，每一个observer对应一个dep,内部维护一个数组，保存与该observer相关的watcher
proxy实现观察者模式
观察者模式（Observer mode）指的是函数自动观察数据对象，一旦对象有变化，函数就会自动执行
const person = observable({
name: '张三',
age: 20
});
function print() {
console.log(`${person.name}, ${person.age}`)
}
observe(print);
person.name = '李四';
// 输出
// 李四, 20
代码中。对象person是观察目标，函数print是观察者。一旦数据发生变化，print就会自动执行
使用proxy实现一个最简单观察者模式，即实现observable和observe这两个函数。
思路是observable函数返回一个原始对象的proxy代理，拦截复制操作。触发充当观察者的各个函数
const queue = new Set();
const observe = fn => queue.add(fn);
const observable = obj => new Proxy(obj, {set});
function set(target, key, value, receiver) {
const result = Reflect.set(target, key, value, receiver);
queue.forEach(observer => observer());
return result;
}
上面代码中，先定义了一个Set集合，所有观察者函数都放进这个集合，然后，observable函数返回原始对象的代理，拦截赋值操作。
拦截函数set中，自动执行所有观察者