--圖片來源vue2.6正式版本（代號：超時空要塞）釋出時，尤雨溪推送配圖。
前言
其實這個冷飯我並不想炒，畢竟vue3馬上都要出來。我還在這裡炒冷飯，那明顯就是搞事情。
起因：
作為切圖仔搬磚汪，長期切圖jq一把梭。重複繁瑣的切圖，讓自己陷入了一個無限的圍城。想出去切圖這個圍城看一看，但是又害怕因為切圖時間久了，自己會的也只有切圖了。
為了後面能夠繼續搬磚恰飯，幫助自己跳出切圖仔的圍城。也去看了vue相關文件，當時記憶深刻覺得還行。可是G胖這個時候發動小紫本和打折魔咒，不知不覺又沉迷於DOTA小本子上面了。關於vue響應式原理很快忘得一塌糊塗，只記得一個屬性Object.defindProperty，然後就沒有然後了......
為了避免自己後面再次忘記，所以這裡炒一個冷飯加深記憶。
響應式vue
在講解vue響應式的原理之前，讓我們來一段Vue程式碼作為示例：
<div id="app">
<div>主食: {{ food }}</div>
<div>飲料: {{ drink }}</div>
<div>選單: {{ menu }}</div>
</div>
<script>
let vue = new Vue({
el: '#app',
data: {
food: '煎餅果子',
drink: '熱豆漿'
},
computed: {
menu() {
return this.food + this.drink
}
}
})
</script>
當food和drink發生變化後，Vue會做兩件事：
在頁面上更新
food和drink的值。再次呼叫
menu, 重新計算food + drink的值, 並在頁面上面更新。
更新值+計算值做的事情其實很簡單，幾行程式碼的事情。問題是當food或者drink變化時，Vue是怎麼知道誰變化，然後馬上響應其行為，去執行那"簡單的幾行程式碼"？
所以，當看到Vue案例時，詞窮的我當時第一反應就是牛皮。
之所以發出感嘆，是因為通常的JavaScript程式碼是實現不了這樣的功能的。話不多說，讓我們直接上程式碼來說明：
let food = "煎餅果子"
let drink = "熱豆漿"
let menu = null
menu = food + drink
food = '炸雞漢堡'
drink = '快樂水'
console.log(menu) 最終控制檯列印結果：
煎餅果子熱豆漿如果是在Vue當中，food和drink發生了變化，那麼Vue會跟著做出響應動作，從而在控制檯輸出我們想要的結果:
炸雞漢堡快樂水選單響應
這裡就出現第一個問題，當food或者drink 發生變化之後，menu並不會響應其變化。這個時候就需要我們來解決這個問題，滿足menu響應。
借鑑Vue一樣，我們先把menu的計算方法。也寫成一個函式，取名為target。然後每次food或者drink變化的時候呼叫target函式
let food = "煎餅果子"
let drink = "熱豆漿"
let menu = null
let target = () => {
menu = food + drink
}
target() // 初始化選單menu
food = '炸雞漢堡'
drink = '快樂水'
target()
console.log(menu) 控制檯輸出：
炸雞漢堡快樂水浴室沉思
前面一把梭直接呼叫的滿足menu響應的問題，但是也間接留下一個新的疑惑點。這裡針對一個選單，就寫了一個target。假設有多個選單需要響應呢？
例如：
單人早餐 = 煎餅果子 + 熱豆漿
豪華套餐： 煎餅果子加兩雞蛋 + 熱豆漿 + 油條一根午餐- ......
如果這個時候切換成：
單人午餐 = 炸雞漢堡 + 快樂水豪華套餐： 雙層炸雞漢堡 + 快樂水 + 快樂薯條一包- ......
按照前面的邏輯, 估計得寫N個target。這個時候響應式又是一個麻煩事情，可是有句話說的好。梭哈一時爽，一直梭哈一直爽。既然前面直接採用target一把梭完成，所以針對N個target方法，我也可以直接來個for迴圈一把梭能完成響應式問題。
for迴圈一把梭
- 定義一個陣列，每定義了一個target函式。就儲存到陣列當中。
let storge = [] // 用來儲存target
function record (){ //
storge.push(target)
}- 定義迴圈函式，每次
data有變更。就呼叫這個函式，進行一把for迴圈.
function replay (){
storge.forEach(run => run())
}- 合併成完整的程式碼：
let food = "煎餅果子"
let drink = "熱豆漿"
let menu = null
food = '炸雞漢堡'
drink = '快樂水'
let target = () => {
menu = food + drink
}
let storge = []; //用來儲存更多的target
function record(target) {
storge.push(target)
}
function replay() {
storge.forEach(run => run())
}
record(target)
replay()
food = '炸雞漢堡'
drink = '快樂水'
replay()
console.log(menu)最後控制檯成功輸出：
炸雞漢堡快樂水Dep依賴類
通過一把梭實現功能，那麼接下來就開始思考優化部分了。繼續記錄target這類的程式碼，這樣有點怪怪的。為了後面方便管理，我們把程式碼進行簡單的優化，封裝成一個類：
class Dep {
constructor() {
this.subs = []
}
// 收集依賴
depend(sub) {
if (sub && !this.subs.includes(sub)) { // 做一個判斷
this.subs.push(sub)
}
}
notify() {
console.log("暗號：下雨啦，收衣服啦！")
this.subs.forEach(sub => sub()) // 執行我們的target
}
}就這樣target函式儲存在類的subs中，record也變成了depend，使用notify來代替replay
封裝成類之後，每次當data資料更新的時候，就會發出一個暗號下雨啦，收衣服啦！ 然後就開始遍歷執行相應的target依賴了。
新的呼叫程式碼就更加清晰明瞭：
let dep = new Dep()
let food = "煎餅果子"
let drink = "熱豆漿"
let menu = null
let target = () => {
menu = food + drink
}
dep.depend(target)
target() // 完成menu第一次初始化
console.log(menu)
food = '炸雞漢堡'
drink = '快樂水'
dep.notify()
console.log(menu)控制檯輸出：
煎餅果子熱豆漿
暗號：'下雨啦，收衣服啦！'
炸雞漢堡快樂水觀察者亮相
當前的程式碼，是確定一個依賴事件，就定義target，然後呼叫依賴類dep.depend將其儲存起來。
let target = () => { menu = food + drink }
dep.depend(target)
target()這個時候又新來一個target事件又該如何做:
新新增一個target事件?
let target2 = () => { 新的依賴事件 }
dep.depend(target2)
target2()要是有幾百個依賴，那還不得上天。我估計要是這樣寫程式碼，估計你的同事要說你寫程式碼像CXK
觀察者函式
借鑑觀察者模式，封裝一個watcher函式. 幫你觀察記錄相關target事件，避免多次宣告變數。
function watcher(myFun) {
target = myFun
dep.depend(target)
target()
target = null
}
watcher(() => {
menu = food + drink
})正如你所看到的，watcher函式接受myFunc引數，將其賦給全域性的target上，呼叫dep.depend()將其新增到陣列裡，之後呼叫並重置target。
既然又封裝一個新的函式，那麼驗證又將是必不可少的了。這裡我們修改一下drink來試試：
drink = "快樂水"
console.log(menu)
dep.notify()
console.log(menu)控制檯輸出結果：
煎餅果子熱豆漿
暗號：下雨啦，收衣服啦！
煎餅果子快樂水Object.defineProperty()
基本用法
鋪墊了這麼久，一個關鍵性角色這個時候也登場了。
該方法允許精確新增或修改物件的屬性。通過賦值操作新增的普通屬性是可列舉的，能夠在屬性列舉期間呈現出來（for...in 或 Object.keys 方法）， 這些屬性的值可以被改變，也可以被刪除。這個方法允許修改預設的額外選項（或配置）。預設情況下，使用 Object.defineProperty() 新增的屬性值是不可修改的。
--《MDN文件》
不明覺厲？ 那就先熱身一下，進入快樂的舉例子環節：
let data = {
food: '煎餅果子',
drink: '熱豆漿'
}
Object.defineProperty(data, 'food', {
get() {
console.log(`觸發get方法`)
},
set(newVal) {
console.log(`設定food為${newVal}`)
}
})
data.food
data.food = 炸雞漢堡 控制檯輸出：
觸發get方法
設定food為炸雞漢堡簡單封裝
但是僅僅憑藉object.defineProperty是無法完成當一個資料更新了，完成資料響應。而且程式碼這裡也是隻是對food做了一個處理, 還有drink沒有處理，所以為了完成data所以屬性都做相應的處理。接下來就是對於Object.defineProperty()進行簡單的封裝處理了：
Object.keys(data).forEach(key => {
let value = data[key]
Object.defineProperty(data, key, {
get() {
return value
},
set(newVal) {
value = newVal
}
})
})遍歷了data每個屬性，然後對每個屬性進行偵聽。這樣data的屬性一旦改變，就會自動發出通知.
程式碼整合
前面零零散散分別講了 Dep、watcher和object.defineProperty, 那麼接下來就讓我們把這個幾個部分整合到一起，完整檢視整個程式碼：
let data = {
food: '煎餅果子',
drink: '熱豆漿'
}
class Dep {
constructor() {
this.subs = []
}
// 收集依賴
depend(sub) {
if (sub && !this.subs.includes(sub)) { // 做一個判斷
this.subs.push(sub)
}
}
notify() {
console.log("暗號：下雨啦，收衣服啦！")
this.subs.forEach(sub => sub()) // 執行我們的target
}
}
Object.keys(data).forEach(key => {
let value = data[key]
let dep = new Dep()
Object.defineProperty(data, key, {
get() {
dep.depend(target)
return value
},
set(newVal) {
value = newVal
dep.notify()
}
})
})
function watcher(myFun) {
target = myFun
// dep.depend(target) 這裡修改，移動到Object.defineProperty當中去
target()
target = null
}
watcher(() => {
data.menu = data.food + data.drink
})
console.log(data.menu)
data.food = "炸雞漢堡"
data.drink = "快樂水"
console.log(data.menu)控制檯輸出：
煎餅果子熱豆漿
暗號：下雨啦，收衣服啦！
炸雞漢堡快樂這裡完全實現了文章開頭所提出的需求，每當food或drink更新時，我們的menu也會跟著響應並更新。
這時候Vue文件的插圖的意義就很明顯了：
免責宣告
以上就是我的炒冷飯內容，怕忘記重寫總結一下，有說錯的地方多擔待。（特拿前端勸退師騷宣告一份，窺伺好久了。）
意思就是寫得略粗糙，別噴我。。。
我是車大棒，我為我自己插眼。