原理
vue數(shù)據(jù)雙向綁定通過‘數(shù)據(jù)劫持’ + 訂閱發(fā)布模式實現(xiàn)
數(shù)據(jù)劫持
指的是在訪問或者修改對象的某個屬性時壳鹤，通過一段代碼攔截這個行為，進行額外的操作或者修改返回結(jié)果
典型的有
1.Object.defineProperty()
2.es6中Proxy對象
vue2.x使用Object.defineProperty();
vue3.x使用Proxy;
訂閱發(fā)布模式
定義：對象間的一種一對多的依賴關(guān)系丑念，當一個對象的狀態(tài)發(fā)生改變時爱只，所有依賴于它的對象都將得到通知
訂閱發(fā)布模式中事件統(tǒng)一由處理中心處理，訂閱者發(fā)布者互不干擾凰兑。
優(yōu)點：實現(xiàn)更多的控制妥粟，做權(quán)限處理，節(jié)流控制之類吏够，例如：發(fā)布了很多消息勾给，但是不是所有訂閱者都要接收
// 實現(xiàn)一個處理中心
let event = {
clientList: {}, // 訂閱事件列表
// 訂閱
on(key, fn){
// 如果這個事件沒有被訂閱，那么創(chuàng)建一個列表用來存放事件
if(!this.clientList[key]) {
this.clientList[key] = []
}
// 將事件放入已有的事件列表中
this.clientList[key].push(fn);
},
// 發(fā)布
trigger(type, args){
let fns = this.clientList[type] // 拿到這個事件的所有監(jiān)聽
if(!fns || fns.length === 0){ // 如果沒有這條消息的訂閱者
return false
}
// 如果存在這個事件的訂閱锅知，那么遍歷事件列表播急，觸發(fā)對應監(jiān)聽
fns.forEach(fn => {
// 可以在此處添加過濾等處理
fn(args)
})
}
}
vue中如何實現(xiàn)
利用Object.defineProperty();把內(nèi)部解耦為三部分
Observer: 遞歸的監(jiān)聽對象上的所有屬性，當屬性改變時觸發(fā)對應的watcher
watcher(觀察者):當蔣婷的數(shù)據(jù)值修改時售睹，執(zhí)行相應的回調(diào)函數(shù)桩警，更新模板內(nèi)容
dep：鏈接observer和watcher，每一個observer對應一個dep,內(nèi)部維護一個數(shù)組昌妹，保存與該observer相關(guān)的watcher
proxy實現(xiàn)觀察者模式
觀察者模式（Observer mode）指的是函數(shù)自動觀察數(shù)據(jù)對象捶枢，一旦對象有變化，函數(shù)就會自動執(zhí)行
const person = observable({
name: '張三',
age: 20
});
function print() {
console.log(`${person.name}, ${person.age}`)
}
observe(print);
person.name = '李四';
// 輸出
// 李四, 20
代碼中飞崖。對象person是觀察目標烂叔，函數(shù)print是觀察者。一旦數(shù)據(jù)發(fā)生變化固歪，print就會自動執(zhí)行
使用proxy實現(xiàn)一個最簡單觀察者模式蒜鸡，即實現(xiàn)observable和observe這兩個函數(shù)。
思路是observable函數(shù)返回一個原始對象的proxy代理牢裳，攔截復制操作逢防。觸發(fā)充當觀察者的各個函數(shù)
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集合蒲讯，所有觀察者函數(shù)都放進這個集合胞四，然后，observable函數(shù)返回原始對象的代理伶椿，攔截賦值操作。
攔截函數(shù)set中氓侧，自動執(zhí)行所有觀察者
