現(xiàn)在圈子中許多JS框架都有自己的數(shù)據(jù)相應(yīng)引擎。通過了解其工作原理，我們可以在實(shí)際開發(fā)中更有效地使用它。在下面的文章中，我們構(gòu)建了您在Vue源代碼中看到的相同類型的Reactivity。

TheReactivity System

當(dāng)你第一次看到它時，Vue的響應(yīng)系統(tǒng)看起來很神奇。看如下代碼片段：

不知何故，Vue只知道如果價格發(fā)生變化，它應(yīng)該做三件事：

更新我們網(wǎng)頁上的價格值。

重新計(jì)算乘以price * quantity的表達(dá)式，并更新頁面。

再次調(diào)用totalPriceWithTax函數(shù)并更新頁面。

但是等等，你應(yīng)該會覺得奇怪，當(dāng)價格變化時，Vue如何知道要更新什么，以及如何跟蹤所有內(nèi)容？

這并不是JS編程中常規(guī)的工作方式。

如果你不明白，那我們試著看看常規(guī)的js是怎么運(yùn)行的。例如，如果我運(yùn)行此代碼：

你覺得它打印什么？由于我們沒有使用Vue，它將打印10。

在Vue，我們希望每當(dāng)價格或數(shù)量更新時，總計(jì)都會得到更新。我們想要：

不幸的是，js是程序性的，而不是被動的，所以這在現(xiàn)實(shí)生活中不起作用。為了使數(shù)據(jù)變化得到相應(yīng)，我們必須使用js來使事情表現(xiàn)不同

問 題

我們需要保存計(jì)算總數(shù)的方式，以便在價格或數(shù)量變化時重新運(yùn)行。

解決方案

首先，我們需要一些方法告訴我們的應(yīng)用程序，“我即將運(yùn)行的代碼，存儲它，我可能需要你在另一個時間運(yùn)行它。”然后我們將要運(yùn)行代碼，如果價格或數(shù)量變量得到更新，再次運(yùn)行存儲的代碼。

請注意，我們在目標(biāo)變量中存儲了一個匿名函數(shù)，然后調(diào)用了一個記錄函數(shù)。使用ES6箭頭語法我也可以這樣寫：

請注意，我們在目標(biāo)變量中存儲了一個匿名函數(shù)，然后調(diào)用了一個記錄函數(shù)。使用ES6箭頭語法我也可以這樣寫：

記錄的方法：

我們正在存儲目標(biāo)（在我們的例子中是{total = price * quantity}），所以我們可以稍后運(yùn)行它。

這將遍歷存儲陣列中存儲的所有匿名函數(shù)并執(zhí)行它們中的每一個。

然后在我們的代碼中，我們可以：

很簡單吧？如果您需要閱讀并嘗試再次掌握它，這里的代碼就完整了。僅供參考，如果您想知道原因，我會以特定的方式對此進(jìn)行編碼。