以Vue為例，解釋JavaScript的反應性
很多前端 JavaScript 框架（如 Angular、React 和 Vue）都有自己的反應性（Reactivity）引擎。理解反應式是什么以及如何運行能夠提升你的開發水平，同時能夠更高效地使用 JavaScript。在本文中，我們構建了與 Vue 源碼相同的反應性功能。
反應性系統
當你第一次見到 Vue 的反應性系統時，你可能會感覺有些神奇。以下面這個簡單的 Vue 應用為例：
不知道基于什么原因，Vue 能夠知道price的值是否發生了變化，并且在變化的時候能夠完成如下三件事情：
- 更新 Web 頁面price的值；
- 重新計算乘法表達式price * quantity，并更新頁面；
- 再次調用totalPriceWithTax函數并更新頁面。
但是，稍等，我似乎聽到你想問，Vue 如何知道在price發生變化的時候都要更新哪些值，它又是如何跟蹤所有的內容的呢？
這并不是 JavaScript 編程通常的運行方式。
如果這對你來說不那么直觀，那么我們需要明白程序通常并不是按照這種方式來運行的。例如，如果我運行下面的樣例代碼：
你猜將會打印出什么內容呢？因為我們沒有使用 Vue，它將會打印出10:
在 Vue 中，我們想要在price或quantity更新的時候，total也進行更新。我們希望的輸出是：
但令人遺憾的是，JavaScript 是過程性的，并不是反應式的，所以在現實代碼并這并不可行。為了讓total具有反應性，我們必須讓 JavaScript 語言按照不同的方式來運行。
問題
我們需要記住如何計算total，這樣才能在price或quantity發生變化的時候重新運行。
解決方案
首先，我們需要有某種方法告訴我們的應用，“我將要運行的代碼是什么，將它存儲起來，在稍后某個時間點我可能需要你運行它”。然后，我們運行代碼，在price或quantity變量發生變化的時候，再次運行存儲的代碼：
我們想到的辦法可能就是將函數的內容記錄下來，這樣就能再次運行了：
需要注意，我們在target變量中存儲了一個匿名函數，然后調用了record函數。如果采用 ES6 的箭頭語法的話，我還可以寫成如下的形式：
record的定義非常簡單：
我們將target存儲了起來（我們的示例中也就是{ total = price * quantity }），這樣的話，我們就能在隨后運行它，可能會借助一個replay函數運行我們記錄下來的所有內容。
這樣會遍歷我們在storage數組中存儲的所有匿名函數，并運行它們。
那么在我們的代碼中，只需：
非常簡單，對吧？如果你想要通讀代碼并再次嘗試的話，下面給出了完整的代碼。
問題
我們可以按需繼續記錄 target，但是更好的方式是有一種健壯的方案，能夠擴展我們的應用。我們可以使用一個類，讓這個類維護一個 target 的列表，當需要它們重新運行的時候，這個類會得到通知。
解決方案：依賴類
要解決這個問題，我們將這些行為封裝到單獨的類中，使用一個依賴類（Dependency Class）來實現標準的觀察者模式編程。
如果我們創建 JavaScript 類來管理依賴的話（類似于 Vue 的處理方式），它看起來可能會如下所示：
需要注意，我們這里不再使用storage，而是使用subscribers來存儲匿名函數，也不再使用record函數了，而是調用depend，同時使用notify代替了replay。要讓它運行起來，只需：
它依然可以運行，而且我們的代碼看上去具備了一定的可重用性。唯一感覺尤其詭異的地方就是設置和運行target。
問題
未來，每個類都會有一個 Dep 類，如果能將創建匿名函數觀察更新的行為封裝起來就更好了。接下來，watcher函數將會出場來負責這種行為。
所以，我們將不會再調用：
（這就是上面示例的代碼）
相反，我們只需這樣調用：
解決方案：Watcher 函數
在 Watcher 函數中，我們可以做幾件很簡單的事情：
可以看到，watcher函數接受一個myFunc變量，將其作為我們的全局target屬性，調用dep.depend()，將會以訂閱者的形式添加我們的 target，調用target函數并重置target。
現在，我們可以運行下面的代碼：
你可能會想，我們為什么要將target實現為全局變量，而不是將其傳遞給所需的函數。這里有一定的原因，在本文結束的時候，相信你就明白了。
問題
我們現在有了一個Dep類，但是我們真正想要實現的是每個變量都有自己的 Dep。在進行下一步講解之前，我們先將它們放到屬性中。
我們先假設每個屬性（price和quantity）都有其自己的內部 Dep 類。
現在，當我們運行：
因為訪問到了data.price的值，所以我希望price屬性的 Dep 類要將我們的匿名函數（存儲在target中）放到它的訂閱數組中（通過調用dep.depend()）。因為data.quantity也被訪問到了，所以我希望quantity屬性的 Dep 類要將該匿名函數（存儲在target中）放到它的訂閱數組中：
如果我還有其他的匿名函數只訪問data.price的話，我希望要將這個函數放到price屬性的 Dep 類中。
那么，我該在何時為price的訂閱者調用dep.notify()呢？答案是為price賦值的時候。在本文結束的時候，我希望能夠在命令行中實現如下的效果：
我們希望能有某種方式嵌入到數據屬性中（price或quantity），這樣的話，當屬性被訪問的時候，能夠將target存儲到訂閱者數組中，當屬性變更時，能夠運行存儲在訂閱者數組中的函數。
解決方案：Object.defineProperty()
我們需要學習 ES 5 JavaScript 所提供 Object.defineProperty() 函數。它允許我們為屬性定義 getter 和 setter 函數。在展示如何與 Dep 類協作之前，我們看一下它的基礎用法。
可以看到，這里只是打印了兩條日志。但是，它并沒有實際get和set值，這是因為我們將功能覆蓋掉了。現在，我們將功能添加回來。get()預期要返回一個值，而set()依然要更新值，所以我們添加一個internalValue變量來存儲當前的price值。
我們的get和set都能正常運行了，你覺得控制臺的打印信息會是什么呢？
所以，當取值和設置值的時候，我們有了一種得到提醒的方法。借助一些遞歸，我們就可以將其用到數據數組的所有條目中了。
值得一提的是，Object.keys(data)能夠返回對象中 key 所組成的數組。
現在，所有的屬性都有 getter 和 setter 了，我們來看一下控制臺：
將這兩個理念組合在一起
當這樣的代碼運行并嘗試 get price屬性的值時，我們希望price能夠記住這個匿名函數（target）。通過這種方式，如果price發生了變化，或者被set了一個新的值，這個函數就能重新運行，因為它能夠知道這行代碼依賴該屬性。所以，你可以按照如下的方式來思考。
Get=>記住該匿名函數，當值發生變化的時候我們會重新運行。
Set=>運行保存的匿名函數，我們的值就會發生變化。
或者，在 Dep Class 的場景下：
Price 訪問 (get) =>調用dep.depend()保存當前的target;
Price set =>調用 price 的dep.notify()，重新運行所有的target。
接下來，我們將這兩個理念組合起來，并看一下最終的代碼。
在我們運行的時候，看一下控制臺的輸出：
完全符合我們的預期！現在price和quantity都是反應式的了。當price或quantity的值更新時，我們的代碼完全重新運行了。
Vue 文檔中的圖示對你來說應該就非常清晰了。
看到漂亮的 Data 圓圈中的 getters 和 setters 了嗎？它看起來似曾相識！每個組件實例都有一個watcher（藍色圓圈），它會從 getter 中收集依賴（紅線）。當 setter 隨后被調用時，它會 通知watcher，從而會導致組件的重新渲染。如下的圖片添加了一些我自己的注釋。
現在，是不是感覺一目了然了呢？
當然，Vue 底層的處理要更復雜，但是你現在已經掌握了它的基礎。
我們學到了什么呢？
- 如何創建 Dep 來收集依賴（depend）并重新運行所有的依賴（notify）；
- 如何創建 watcher 來管理我們正在運行的代碼，這些代碼可能需要作為依賴添加進來（target）；
- 如何使用 Object.defineProperty() 來創建 getter 和 setter。
原文鏈接
https://medium.com/vue-mastery/the-best-explanation-of-javascript-reactivity-fea6112dd80d
