小編給大家分享一下Vue.js怎么實(shí)現(xiàn)數(shù)據(jù)響應(yīng)的方法，希望大家閱讀完這篇文章之后都有所收獲，下面讓我們一起去探討吧！

專注于為中小企業(yè)提供成都做網(wǎng)站、成都網(wǎng)站設(shè)計(jì)服務(wù),電腦端+手機(jī)端+微信端的三站合一,更高效的管理,為中小企業(yè)興山免費(fèi)做網(wǎng)站提供優(yōu)質(zhì)的服務(wù)。我們立足成都，凝聚了一批互聯(lián)網(wǎng)行業(yè)人才，有力地推動(dòng)了上1000家企業(yè)的穩(wěn)健成長(zhǎng)，幫助中小企業(yè)通過網(wǎng)站建設(shè)實(shí)現(xiàn)規(guī)模擴(kuò)充和轉(zhuǎn)變。

js有什么特點(diǎn)

1、js屬于一種解釋性腳本語言；2、在絕大多數(shù)瀏覽器的支持下，js可以在多種平臺(tái)下運(yùn)行，擁有著跨平臺(tái)特性；3、js屬于一種弱類型腳本語言，對(duì)使用的數(shù)據(jù)類型未做出嚴(yán)格的要求，能夠進(jìn)行類型轉(zhuǎn)換，簡(jiǎn)單又容易上手；4、js語言安全性高，只能通過瀏覽器實(shí)現(xiàn)信息瀏覽或動(dòng)態(tài)交互，從而有效地防止數(shù)據(jù)的丟失；5、基于對(duì)象的腳本語言，js不僅可以創(chuàng)建對(duì)象，也能使用現(xiàn)有的對(duì)象。

許多前端JavaScript框架（例如Angular，React和Vue）都有自己的數(shù)據(jù)相應(yīng)引擎。通過了解相應(yīng)性及其工作原理，您可以提高開發(fā)技能并更有效地使用JavaScript框架。在視頻和下面的文章中，我們構(gòu)建了您在Vue源代碼中看到的相同類型的Reactivity。

? The Reactivity System

當(dāng)你第一次看到它時(shí)，Vue的響應(yīng)系統(tǒng)看起來很神奇。拿這個(gè)簡(jiǎn)單的Vue應(yīng)用程序：

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

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

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

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

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

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

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

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

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

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

?? 問題

我們可以根據(jù)需要繼續(xù)記錄目標(biāo)，但是有一個(gè)更強(qiáng)大的解決方案可以擴(kuò)展我們的應(yīng)用程序。那就是一個(gè)負(fù)責(zé)維護(hù)目標(biāo)列表的類，當(dāng)我們需要它們重新運(yùn)行時(shí)，這些目標(biāo)列表會(huì)得到通知。

? 解決方法: 使用Class

我們可以開始解決這個(gè)問題的一種方法是將這種行為封裝到它自己的Class中，這是一個(gè)實(shí)現(xiàn)標(biāo)準(zhǔn)編程觀察者模式的依賴類。

因此，如果我們創(chuàng)建一個(gè)JavaScript類來管理我們的依賴項(xiàng)（它更接近Vue處理事物的方式），它可能看起來像這樣：

讓它運(yùn)行：

它仍然有效，現(xiàn)在我們的代碼感覺更可靠了。只有仍然感覺有點(diǎn)奇怪的是target（）的設(shè)置和運(yùn)行。

?? 問題

我們將為每個(gè)變量設(shè)置一個(gè)Dep類，并且很好地封裝了創(chuàng)建需要監(jiān)視更新的匿名函數(shù)的行為。也許觀察者功能可能是為了處理這種行為。

（這只是上面的代碼）

我們可以改為：

? 解決方案：觀察者功能

在我們的Watcher功能中，我們可以做一些簡(jiǎn)單的事情：

如您所見，watcher函數(shù)接受myFunc參數(shù)，將其設(shè)置為我們的全局目標(biāo)屬性，調(diào)用dep.depend（）以將目標(biāo)添加為訂閱者，調(diào)用目標(biāo)函數(shù)并重置目標(biāo)。

現(xiàn)在，當(dāng)我們運(yùn)行以下內(nèi)容時(shí)：

您可能想知道為什么我們將target實(shí)現(xiàn)為全局變量，而不是將其傳遞到我們需要的函數(shù)中。這有一個(gè)很好的理由，這將在我們的文章結(jié)尾處揭曉。

?? 問題

我們有一個(gè)Dep類，但我們真正想要的是每個(gè)變量都有自己的Dep。在我們繼續(xù)之前，先存儲(chǔ)一下數(shù)據(jù)。

讓我們假設(shè)我們的每個(gè)屬性（價(jià)格和數(shù)量）都有自己的內(nèi)部Dep類。

當(dāng)我們運(yùn)行時(shí)：

由于訪問了data.price值，我希望price屬性的Dep類將我們的匿名函數(shù)（存儲(chǔ)在目標(biāo)中）推送到其訂閱者數(shù)組（通過調(diào)用dep.depend（））。由于訪問了data.quantity，我還希望quantity屬性Dep類將此匿名函數(shù)（存儲(chǔ)在目標(biāo)中）推送到其訂閱者數(shù)組中。

如果我有另一個(gè)匿名函數(shù)，只訪問data.price，我希望只推送到價(jià)格屬性Dep類。

我什么時(shí)候想要在價(jià)格訂閱者上調(diào)用dep.notify（）？我希望在設(shè)定價(jià)格時(shí)調(diào)用它們。在文章的最后，我希望能夠進(jìn)入控制臺(tái)并執(zhí)行：

我們需要一些方法來掛鉤數(shù)據(jù)屬性（如價(jià)格或數(shù)量），所以當(dāng)它被訪問時(shí)我們可以將目標(biāo)保存到我們的訂閱者數(shù)組中，當(dāng)它被更改時(shí)，運(yùn)行存儲(chǔ)在我們的訂閱者數(shù)組中的函數(shù)。

? 解決方案：Object.defineProperty（）

我們需要了解Object.defineProperty()函數(shù)，它是簡(jiǎn)單的ES5 JavaScript。它允許我們?yōu)閷傩远xgetter和setter函數(shù)。在我向您展示如何在Dep類中使用它之前，先簡(jiǎn)單展示一下改函數(shù)的用法。

如您所見，它只記錄兩行。但是，它實(shí)際上并沒有獲取或設(shè)置任何值，因?yàn)槲覀冞^度使用了該功能。我們現(xiàn)在加回來吧。 get（）期望返回一個(gè)值，而set（）仍然需要更新一個(gè)值，所以讓我們添加一個(gè)internalValue變量來存儲(chǔ)我們當(dāng)前的價(jià)格值。

既然我們的get和set工作正常，您認(rèn)為將打印到控制臺(tái)的是什么？

因此，當(dāng)我們獲取并設(shè)置值時(shí)，我們可以獲得通知。通過一些遞歸，我們可以為數(shù)組中的所有項(xiàng)運(yùn)行它

FYI，Object.keys（data）返回對(duì)象鍵的數(shù)組。

現(xiàn)在一切都有g(shù)etter和setter，我們?cè)诳刂婆_(tái)上看到了這一點(diǎn)。

? Putting both ideas together

當(dāng)像這樣的一段代碼運(yùn)行并獲得價(jià)格的價(jià)值時(shí)，我們希望價(jià)格記住這個(gè)匿名函數(shù)（目標(biāo)）。這樣，如果價(jià)格變化，或者設(shè)置為新值，它將觸發(fā)此函數(shù)以重新運(yùn)行，因?yàn)樗来诵幸蕾囉谒?。所以你可以這樣想。

Get =>記住這個(gè)匿名函數(shù)，當(dāng)我們的值發(fā)生變化時(shí)，我們會(huì)再次運(yùn)行它。

Set =>運(yùn)行保存的匿名函數(shù)，我們的值剛改變。

或者就我們的Dep Class而言

Price accessed (get)=> 調(diào)用dep.depend（）來保存當(dāng)前目標(biāo)

Price set=> 在價(jià)格上調(diào)用dep.notify（），重新運(yùn)行所有目標(biāo)

讓我們結(jié)合這兩個(gè)想法，并完成我們的最終代碼。

現(xiàn)在看看會(huì)發(fā)生什么。

正是我們所希望的！價(jià)格和數(shù)量都確實(shí)是得到了實(shí)時(shí)的響應(yīng)的！只要價(jià)格或數(shù)量的價(jià)值得到更新，我們的總代碼就會(huì)重新運(yùn)行。

Vue文檔中的這個(gè)插圖現(xiàn)在應(yīng)該開始有意義了。

你看到那個(gè)漂亮的紫色數(shù)據(jù)圈了嗎？看起來應(yīng)該很眼熟！每個(gè)組件實(shí)例都有一個(gè)從getter(紅線)收集依賴項(xiàng)的服務(wù)觀察器實(shí)例(藍(lán)色)。當(dāng)稍后調(diào)用設(shè)置程序時(shí)，它會(huì)通知監(jiān)視程序，它將導(dǎo)致組件重新呈現(xiàn)。下面是我自己的一些注釋的圖片。

是的，現(xiàn)在是不是覺得更有意義了。

顯然，Vue做的可能更復(fù)雜更驚喜，但你現(xiàn)在知道了基礎(chǔ)知識(shí)。

? 總結(jié)：所以我們學(xué)了什么？如何創(chuàng)建一個(gè)Dep類來收集依賴項(xiàng)（依賴）并重新運(yùn)行所有依賴項(xiàng)（notify）。如何創(chuàng)建一個(gè)觀察程序來管理我們正在運(yùn)行的代碼，這些代碼可能需要作為依賴項(xiàng)添加（target）。如何使用Object.defineProperty（）創(chuàng)建getter和setter。

看完了這篇文章，相信你對(duì)“Vue.js怎么實(shí)現(xiàn)數(shù)據(jù)響應(yīng)的方法”有了一定的了解，如果想了解更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝各位的閱讀！