[譯]JavaScript響應式的最佳解釋

Vue · 發表 2018-09-27 17:47:45

摘要：原文地址： The Best Explanation of JavaScript Reactivity 許多前端JavaScript框架（例如Angular，React和Vue）都有自己的Reactivity引擎。通過了解響應式及其工作原理，您可以提高開發技能並更有效地使用JavaS...

原文地址： ofollow,noindex">The Best Explanation of JavaScript Reactivity

許多前端JavaScript框架（例如Angular，React和Vue）都有自己的Reactivity引擎。通過了解響應式及其工作原理，您可以提高開發技能並更有效地使用JavaScript框架。在視訊和下面的文章中，我們構建了您在Vue原始碼中看到的相同型別的Reactivity。

:bulb:響應式系統

當你第一次看到它時，Vue的響應式系統看起來很神奇。拿這個簡單的Vue應用程式來說：

不知何故 Vue 只是知道如果 price

改變，它應該做三件事：

更新網頁上 price 的值。
重新計算乘法表達式 price * quantity ，並更新頁面。
再次呼叫函式 totalPriceWithTax 並更新頁面。但是等等，你是否會好奇，Vue如何知道 price 更改時所要更新的內容，以及它如何跟蹤所有內容？

這並不是JavaScript通常的工作方式

我們解決一個大問題是通常不會這樣程式設計。例如，如果我執行如下程式碼：

你覺得它列印什麼？由於我們沒有使用Vue，它將打印出來 10 。

在Vue中，我們希望 total 隨著 price 或 quantity 更新而更新。我們想要：

不幸的是，JavaScript是程式性的，而不是響應式的，所以這在現實中不起作用。為了實現 total 響應，我們必須使用JavaScript來使事情表現得與眾不同。

:warning: 問題

我們需要儲存如何計算得到 total ，這樣可以在 price 或 quantity 更新時重新執行它，

:white_check_mark: 解決方案

首先，需要一些方法告訴我們的應用程式，“我即將執行的程式碼， 儲存它 ，我可能需要在其他時間執行它。”然後我們開始執行程式碼，如果 price 或 quantity 變數得到更新，再次執行儲存的程式碼。

我們可以通過記錄函式來執行此操作，以便我們可以再次執行它。

請注意 ，我們在 target 變數中儲存了一個匿名函式，然後呼叫一個 record

函式。使用ES6箭頭語法我也可以這樣寫：

這個 record

函式定義很簡單：

我們正在儲存 target （在我們的例子中 { total = price * quantity } ），所以我們可以稍後執行它，可以通過一個 replay

函式來執行儲存的所有內容。

這將遍歷執行 storage

陣列中儲存的所有匿名函式。然後在程式碼中，我們可以：

很簡單吧？如果您需要閱讀並嘗試再次理解它，這裡有完整的程式碼，僅供參考，如果您想知道原因，我會以特定的方式對此進行編碼。

:warning: 問題

我們可以根據需要繼續記錄 target ，但是有一個更強大的解決方案可以擴充套件我們的應用程式。一個負責維護 target 列表的類，當需要它們重新執行時，這些 target 列表會得到通知。

:white_check_mark: 解決方案：依賴類

我們解決這個問題的一種方法是將這種行為封裝到它自己的類中，這是一個實現標準觀察者模式的依賴類。

因此，如果我們建立一個JavaScript類來管理我們的依賴項（它更接近Vue的處理方式），它可能看起來像這樣：

請注意 ，我們現在儲存匿名函式是 subscribers 而不是 storage 。我們現在呼叫的函式是 depend 而不是 record ，我們現在使用 notify 而不是 replay

。為了讓這個執行：

它仍然有效，現在的程式碼感覺更可重用。唯一仍然感覺有點奇怪的是設定和執行 target

。

:warning: 問題

我們將為每個變數設定一個 Dep 類，並且很好地封裝了建立需要監視更新的匿名函式的行為。也許一個 watcher 函式可能是為了處理這種行為。

所以不要這樣呼叫：

（這只是上面的程式碼）我們可以改為：

:white_check_mark: 解決方案：觀察者函式

在我們的 Watcher 函式中，我們可以做一些簡單的事情：

如您所見，該 watcher 函式接受一個 myFunc 引數，將其設定為全域性 target 屬性，呼叫 dep.depend() 將 target 新增到訂閱者 subscriber ，執行 target 函式，然後重置 target

函式。

現在，當我們執行以下內容時：

您可能想知道為什麼我們將target設為全域性變數，而不是將其傳遞到我們需要的函式中。這將在我們的文章結尾處解釋。

:warning: 問題

我們有一個單獨的 Dep class ，但我們真正想要的是每個變數都有自己的 Dep 。在繼續之前，將資料設為物件屬性。

假設每個屬性（ price 和 quantity ）都有自己的內部 Dep

類。

現在我們執行時：

由於訪問了 data.price 的值，我希望 price 屬性的 Dep 類將儲存在 target 的匿名函式推送到其 subscriber 陣列（通過呼叫 dep.depend() ）。由於 data.quantity 被訪問，我還希望 quantity 屬性 Dep 類將儲存在 target 的匿名函式推送到其 subscriber

陣列中。