前端必讀：Vue響應式系統大PK（下）

轉載請註明出處：葡萄城官網，葡萄城爲開發者提供專業的開發工具、解決方案和服務，賦能開發者。
原文參考： https://www.sitepoint.com/vue...

在上節中咱們對Vue2和Vue3中的響應式系統作了對比，帶你們瞭解了響應式系統的工做原理，今天咱們來進一步探索Vue3中的響應式系統API，爲了讓你們更好的理解和學習，將方法分組進行概括。

基本方法

第一組

包括控制數據響應的最基本方法

• ref接受一個原始值或一個普通對象，而後返回一個響應且可變的ref對象。ref對象只有一個value指向原始值或純對象的屬性。
• reactive接收一個對象並返回該對象的反應性副本，該內容會影響全部嵌套屬性。
• readonly接受一個ref或一個對象（plain 或reactive），並將一個只讀對象返回給原始對象，且會影響全部嵌套屬性。
• markRaw 返回對象自己，並防止將其轉換爲代理對象。

實際使用：

在此示例中，咱們探索了四種基本響應式方法的使用。

1.建立一個counterref對象，其值爲0。而後在視圖中放置兩個按鈕，用於增長和減小計數器的值。當使用發現計數器沒有做用。

2.其次建立一個person響應對象。在視圖中放置兩個輸入控件，分別用於編輯一我的的name和一我的的age。當咱們編輯人員的屬性時會當即更新。

3.建立一個math只讀對象。而後在視圖中設置一個按鈕，用於將math的PI屬性值加倍。該對象只可讀，不可修改。

4.建立一個alphabetNumbers對象，將其標記爲raw。取其前三位內容。設置一個按鈕，將Bproperty的值更改成3。咱們會發現能夠修改對象，但不會致使視圖從新渲染。

markRaw 方法很是適合咱們不須要響應的對象，例如一長串國家/地區代碼，顏色名稱及其對應的十六進制數字，等等。

5.測試和肯定咱們建立的每一個對象的類型，使用onMounted()的生命週期鉤子（lifecycle hook）觸發這些檢查。

類型檢查方法

該組包含上述全部四個類型檢查器：

• isRef 檢查值是不是引用對象
• isReactive檢查對象是是由reactive建立仍是readonly經過包裝由建立的另外一個代理而建立的反應代理reactive
• isReadonly檢查對象是不是由建立的只讀代理readonly
• isProxy檢查對象是不是由reactive或建立的代理readonly

更多參考方法

該組包含其餘引用方法：

• unref 返回引用的值
• triggerRef執行與shallowRef手動相關的任何效果
• customRef 建立具備自定義引用的顯式控件，並對其依賴項跟蹤進行顯式控制並更新觸發

淺層方法

該組中的方法是ref，reactivity和readonly：

• shallowRef建立一個ref，該ref僅跟蹤其value屬性而不會使其值具備響應性
• shallowReactive 建立一個響應式代理，該代理僅跟蹤其自身的屬性（不包括嵌套對象）
• shallowReadonly 建立一個只讀代理，該代理僅使本身的屬性變爲只讀（不包括嵌套對象）

經過如下示例來感覺這些方法的使用：

本示例從建立settings淺引用對象開始，在視圖中添加兩個輸入控件以編輯其width和height屬性。但該屬性卻不能修改，爲了解決這個問題，添加一個按鈕，該按鈕能夠更改整個對象及其全部屬性。

接着建立一個settingsA淺層反應式代理，包含width和height屬性，和帶有x和y屬性的嵌套對象coords。在視圖中爲每一個屬性設置一個輸入控件。修改width和height屬性時，有響應更新，可是修改x和y屬性時卻沒有變化。

最後建立一個settingsB淺層只讀對象，屬性與settingsA相同。但此處widthorheight屬性只可讀，不能修改，x和y屬性能夠正常修改。

最後兩個示例中的嵌套對象coords均不受轉換的影響, Vue不會跟蹤它的任何修改，能夠自由修改。

轉換方式

接下來的三種方法用於將代理轉換爲ref或普通對象：

• toRef爲源響應對象上的屬性建立一個引用。引用將響應性鏈接保持到其源屬性。
• toRefs將響應對象轉換爲普通對象。普通對象的每一個屬性都是一個指向原始對象相應屬性的ref。
• toRaw返回areactive或readonlyproxy的原始對象。

在下面的示例中，將展現這些轉換是如何工做：

在此示例中
1.建立一個基礎person反應對象，並將其用做源對象。

2.將name property轉換爲具備相同名稱的ref。在視圖中添加兩個輸入控件-一個用於name引用，另外一個用於nameproperty。當其中一個被修改，另外一個也會更新。

3.將其中一我的全部屬性轉換爲personDetails對象中包含的各個引用。在視圖中再次添加兩個輸入控件以測試剛剛建立的引用之一。發現personDetailsage與人的age屬性徹底同步。

4.將person響應性對象轉換爲rawPerson普通對象。在視圖中添加一個輸入控件以編輯rawPerson的hobby屬性，Vue並不進行跟蹤。

計算和監視方法

最後一組方法用於計算複雜值並監控某些值：

• computed 以getter函數做爲參數，並返回一個不變的響應式ref對象。
• watchEffect 當即運行一個函數，並以響應方式跟蹤其依賴關係，並在依賴關係發生更改時從新運行它。
• watch與Options API this.$watch和相應的watch選項徹底等效。它監視特定的數據源，並在監視的源發生更改時在回調函數中施加反作用。

咱們繼續看看如下示例：

在此示例中，咱們建立了一個fullName計算變量，該變量的計算基於firstName和lastName。在視圖中添加了兩個輸入控件，用於編輯全名的兩個部分。修改任何部分fullName都會從新計算並更新結果。

接下來，咱們建立一個volumeref併爲其設置觀看效果，每次volume修改後都將運行回調函數。爲了驗證流程是否這樣，咱們在視圖中添加一個按鈕，該按鈕將音量增長一倍。接着在回調函數中設置一個條件，以測試該音量的值是否能夠分爲分紅三份，當它返回true時，將顯示一條警報消息。

最後，咱們建立一個stateref並設置一個watch函數來跟蹤它的更改。state改變執行函數。此外咱們添加了一個按鈕，用於在playing和paused之間切換狀態。狀態發生切換，則有提示。

watchEffect與watch一些區別：

• watchEffect將回調函數中包含的全部響應性屬性視爲依賴項。所以，若是回調包含三個屬性，則會隱式跟蹤全部屬性的更改。
• watch僅跟蹤咱們做爲回調參數包含的屬性。此外，它還提供了watched屬性的先前值和當前值。

咱們會發現，Vue 3響應式API爲各類用例提供了許多方法，API內容不少，在本教程中咱們僅探討了基礎知識。有關更深刻的探索，詳細信息和邊緣案例，請訪問Reactivity API文檔。

結論

在本文中，咱們介紹了什麼是響應系統以及如何在Vue 2和Vue 3中實現該系統。一些Vue 2具的缺陷已經在Vue3中被很好的解決。最後讓咱們總結一下Vue3響應式系統的優缺點。

好處

• 能夠用做獨立程序包。例如，您能夠將其與React一塊兒使用
• 憑藉其功能豐富的API，能夠實現不少功能，靈活性很高
• 支持更多的數據結構（Map，WeakMap，Set，WeakSet）
• 具備更好的性能，僅使所需的數據具備響應性

• 解決了Vue 2中的數據操做警告

  缺點

• 僅適用於支持ES6 +的瀏覽器
• 在比較（===）方面，響應式代理不等於原始對象
• 與Vue 2「自動」反應性相比，須要更多的代碼