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

TheReactivity System

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

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

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

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

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

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

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

如果你不明白，那我們?cè)囍纯闯Ｒ?guī)的js是怎么運(yùn)行的。例如，如果我運(yùn)行此代碼：

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

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

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

問 題

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

解決方案

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

請(qǐng)注意，我們?cè)谀繕?biāo)變量中存儲(chǔ)了一個(gè)匿名函數(shù)，然后調(diào)用了一個(gè)記錄函數(shù)。使用ES6箭頭語法我也可以這樣寫：

請(qǐng)注意，我們?cè)谀繕?biāo)變量中存儲(chǔ)了一個(gè)匿名函數(shù)，然后調(diào)用了一個(gè)記錄函數(shù)。使用ES6箭頭語法我也可以這樣寫：

記錄的方法：

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

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

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

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