談談 Vue toRef 和 reactive

来源:https://www.cnblogs.com/Himmelbleu/archive/2023/03/19/17229273.html
-Advertisement-
Play Games

reactive reactive 創建一個深層的對象的響應式代理,即對象根屬性以及嵌套對象的屬性都是響應式的。如果使用 ES6 結構賦值,就會使得這個對象的響應式代理第一層(根屬性)屬性失去響應式,但其嵌套下的對象屬性還是響應式的。 shallowReactive 會創建淺層的對象的響應式代理,只 ...


reactive

reactive 創建一個深層的對象的響應式代理,即對象根屬性以及嵌套對象的屬性都是響應式的。如果使用 ES6 結構賦值,就會使得這個對象的響應式代理第一層(根屬性)屬性失去響應式,但其嵌套下的對象屬性還是響應式的。

shallowReactive 會創建淺層的對象的響應式代理,只有第一層(根屬性)屬性有響應式,其嵌套對象的屬性不是響應式。

// 解構賦值
const { foo, bar } = { ...reactive({ foo: 1, bar: { val: 1 } }) };
<div>foo: {{ foo }}</div>
<button @click="foo++">Change foo</button>
<div>bar val: {{ bar.val }}</div>
<button @click="bar.val++">Click bar val</button>

圖1 - reactive 被解構賦值失去響應式

如上圖所示,foo 只有在 bar.val 響應式更新之後才更新。被解構賦值之後,foo 是根屬性,失去了響應式;bar 是嵌套對象,其屬性還有響應式。

toRef

toRef基於響應式對象上的一個屬性,創建一個對應的 ref。這裡有非常重要的註意點,“響應式”、“對象”。toRef 操作的是一個響應式數據,且數據類型是對象,而不是一個普通對象,即便控制台不報錯,也會失去它的意義。

const obj = {
  foo: {
    bar: 1
  }
};

const state = toRef(obj, "foo");

function change() {
  state.value.bar++;
  console.log(state.value.bar, obj.foo.bar);
}
<div>obj: {{ obj.foo.bar }}</div>
<div>foo: {{ state.bar }}</div>
<button @click="change">Change foo bar</button>

如下圖所示,頁面不發生更新:

圖2 - toRef 得到的 Ref 數據不是響應式的

state 確實是 Ref 類型:

圖3- toRef 得到的普通對象屬性的類型是 Ref

也就是說,toRef 操作的數據不能是普通對象的屬性。

toRef 作用是什麼?

延續響應式能力

下麵是官方文檔給出的示例,左看右看、上看下看都沒看出個啥特別的。謎語人吧這是?

const state = reactive({
  foo: 1,
  bar: 2
})

const fooRef = toRef(state, 'foo')

// 更改該 ref 會更新源屬性
fooRef.value++
console.log(state.foo) // 2

// 更改源屬性也會更新該 ref
state.foo++
console.log(fooRef.value) // 3

❓那麼 toRef 有什麼用呢?前面說到 reactive 被解構賦值之後第一層(根屬性)失去了響應式,而 toRef 可以讓其繼續保持響應式。

toRef 當作 ref 函數創建一個響應式數據不是響應式的,頁面不更新,前面圖2 中已經說明瞭。toRef延續響應式能力,不是創建響應式數據

對第一節中的例子進行修改:

// 在 reactive 中包裹了 toRefs
const { foo, bar } = { ...toRefs(reactive({ foo: 1, bar: { val: 1 } })) };

圖4 - toRefs 包裹之後延續了 reactive 被解構賦值的響應式能力

圖4 與 圖1 進行對比,foo 確確實實是響應式的,頁面也發生了變化。不再因為 bar.val 更新而更新。

toRef 與 toRefs 的區別就是多了一個 s,即批量延續 reactive 的響應式能力。

轉換 prop 為 Ref 類型

官方文檔中有提到關於 prop 與 toRef 結合使用的案例,說非常有用。有些函數需要的參數類型就是 Ref,比如 useRefHistory,就需要傳遞 Ref 類型的數據:

image

組件 prop 不是一個 Ref 類型的數據:

console.log(isRef(props.foo)); // => false

因此,用 toRef 轉換類型,與原始數據保持同步:

useRefHistory(toRef(props, "foo"));

總結

toRef 是延續響應式,不是創建響應式數據,不能等同於 ref 函數。為何是延續響應式,需要查閱源碼方可知曉。本博客只是從表現中得到的結論,沒有從原理上進行總結,屬於經驗之談。

toRef 只能基於響應式數據進行操作,對普通的對象進行操作得到的數據不是響應式的。


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • #[EF Core] EF Core Code-First 移除外鍵 —— 重寫SQL生成器 使用EF Core時最煩的就是生成的某些 SQL 其實並不是你想要的結果,例如外鍵約束等等。 一個最簡單的例子就是,因為EF Core會根據導航屬性生成外鍵約束等原因,導致很多開發者拋棄了更易維護的Code ...
  • 1、OpenGL有多個標準,如Open ES是為了移動設備,目前通常使用OpenTK.Graphics.OpenGL4對應OpenGL4.x版本,2010年是OpenGL分割領,之前是3版本,之後都是4版本,目前最新4.6,更新頻率不高 2、OpenGL的著色語言GLSL,對應的文件擴展名.vert ...
  • 最近寫了一個demo:demo的github地址 一. 簡單介紹 1. Server端 它是一個WebApi服務,把它當成一個黑盒就行了。 2. MiddleServer端 是重點,它是一個WebApi服務,包含一個GetValues介面和一個Query2介面。 Query2介面是一個簡單的介面。 ...
  • Watchtower 是一個用於自動更新 Docker 容器的工具。它可以監視 Docker Hub 或私有倉庫中的鏡像,併在發現新的鏡像版本時自動更新容器。 ...
  • (文章目錄) 01、首先配置文件地址改了 地址為 ` /etc/NetworkManager/system-connections/網卡名 ` 網卡名可以使用 ip a查看,紅框中就是網卡名 網卡名 ls命令可以看到有以下配置文件 ` es160.nmconnection ` vi編輯 ` [con ...
  • 一、共用記憶體是什麼 在Linux系統中,共用記憶體是一種IPC(進程間通信)方式,它可以讓多個進程在物理記憶體中共用一段記憶體區域。 這種共用記憶體區域被映射到多個進程的虛擬地址空間中,使得多個進程可以直接訪問同一段物理記憶體區域中的數據,從而實現進程間的高速數據交換和通信。 二、共用記憶體的原理 共用記憶體基於 ...
  • 前騰訊工程師,經歷過大廠,也經歷過創業! 我已奔四,但我還在持續學習,持續成長! 我非常樂意把我的經驗和心得分享給你! 我是阿銘,關註我,和我一起成長為技術大牛! ↓↓↓↓↓ 關於DevOps這個概念,可能100個人能給出100個說法,這是因為每個人所接觸到的環境有所差異,不同的公司要解決的問題自然 ...
  • 案例現象 這天,監控系統發來一條告警消息,內容說某台伺服器根目錄磁碟占用空間達到閾值,超過百分之八十了 登上伺服器,df -Th 看一下,發現磁碟空間確實不夠用了 進入到根目錄,然後 du -sh * 可以看到,var 目錄下的磁碟空間已經占用了 75G 既然如此,刪除 var 目錄下一些占空間較大 ...
一周排行
    -Advertisement-
    Play Games
  • 在C#中使用SQL Server實現事務的ACID(原子性、一致性、隔離性、持久性)屬性和使用資料庫鎖(悲觀鎖和樂觀鎖)時,你可以通過ADO.NET的SqlConnection和SqlTransaction類來實現。下麵是一些示例和概念說明。 實現ACID事務 ACID屬性是事務處理的四個基本特征, ...
  • 我們在《SqlSugar開發框架》中,Winform界面開發部分往往也用到了自定義的用戶控制項,對應一些特殊的界面或者常用到的一些局部界面內容,我們可以使用自定義的用戶控制項來提高界面的統一性,同時也增強了使用的便利性。如我們Winform界面中用到的分頁控制項、附件顯示內容、以及一些公司、部門、菜單的下... ...
  • 在本篇教程中,我們學習瞭如何在 Taurus.MVC WebMVC 中進行數據綁定操作。我們還學習瞭如何使用 ${屬性名稱} CMS 語法來綁定頁面上的元素與 Model 中的屬性。通過這些步驟,我們成功實現了一個簡單的數據綁定示例。 ...
  • 是在MVVM中用來傳遞消息的一種方式。它是在MVVMLight框架中提供的一個實現了IMessenger介面的類,可以用來在ViewModel之間、ViewModel和View之間傳遞消息。 Send 接受一個泛型參數,表示要發送的消息內容。 Register 方法用於註冊某個對象接收消息。 pub ...
  • 概述:在WPF中,通過EventHandler可實現基礎和高級的UI更新方式。基礎用法涉及在類中定義事件,併在UI中訂閱以執行更新操作。高級用法藉助Dispatcher類,確保在非UI線程上執行操作後,通過UI線程更新界面。這兩種方法提供了靈活而可靠的UI更新機制。 在WPF(Windows Pre ...
  • 概述:本文介紹了在C#程式開發中如何利用自定義擴展方法測量代碼執行時間。通過使用簡單的Action委托,開發者可以輕鬆獲取代碼塊的執行時間,幫助優化性能、驗證演算法效率以及監控系統性能。這種通用方法提供了一種便捷而有效的方式,有助於提高開發效率和代碼質量。 在軟體開發中,瞭解代碼執行時間是優化程式性能 ...
  • 概述:Cron表達式是一種強大的定時任務調度工具,通過配置不同欄位實現靈活的時間規定。在.NET中,Quartz庫提供了簡便的方式配置Cron表達式,實現精準的定時任務調度。這種靈活性和可擴展性使得開發者能夠根據需求輕鬆地制定和管理定時任務,例如每天備份系統日誌或其他重要操作。 Cron表達式詳解 ...
  • 概述:.NET提供多種定時器,如System.Windows.Forms.Timer適用於UI,System.Web.UI.Timer用於Web,System.Diagnostics.Timer用於性能監控,System.Threading.Timer和System.Timers.Timer用於一般 ...
  • 問題背景 有同事聯繫我說,在生產環境上,訪問不了我負責的common服務,然後我去檢查common服務的health endpoint, 沒問題,然後我問了下異常,timeout導致的System.OperationCanceledException。那大概率是客戶端的問題,會不會是埠耗盡,用ne ...
  • 前言: 在本篇 Taurus.MVC WebMVC 入門開發教程的第四篇文章中, 我們將學習如何實現數據列表的綁定,通過使用 List<Model> 來展示多個數據項。 我們將繼續使用 Taurus.Mvc 命名空間,同時探討如何在視圖中綁定並顯示一個 Model 列表。 步驟1:創建 Model ...