轉載請註明出處：葡萄城官網，葡萄城為開發者提供專業的開發工具、解決方案和服務，賦能開發者。
原文參考：https://www.sitepoint.com/vue-3-reactivity-system/
在上節中我們對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“自動”反應性相比，需要更多的程式碼