當前位置:編程學習大全網 - 源碼下載 - Vue 3 之:弄清 ref reactive toRef toRefs

Vue 3 之:弄清 ref reactive toRef toRefs

reactive 會對傳入對象進行包裹,創建壹個該對象的 Proxy 代理。它是源對象的響應式副本, 不等於原始對象 。它“深層”轉換了源對象的所有嵌套 property,解包並維持其中的任何 ref 引用關系。

reactive API 很好地解決了 Vue2 通過 defineProperty 實現數據響應式時的缺陷。使用也非常簡單:

當將 ref 分配給 reactive property 時,ref 將被自動解包,無需再用 .value 訪問。

ref 函數用來將壹項數據包裝成壹個響應式 ref 對象。它接收任意數據類型的參數,作為這個 ref 對象 內部的 value property 的值。之後可以用 ref對象.value 訪問或更改這個值。

因為基礎數據類型只能傳遞值而不是引用地址,將它包裝在壹個對象內,可以實現數據的響應式。

可以通過 isRef 判斷變量是否是 Ref 對象。

如果將對象分配為 ref 值,則內部會通過 reactive 方法使該對象具有高度的響應式。

有時我們可能需要為 ref 的內部值指定復雜類型。想要簡潔地做到這壹點,我們可以在調用 ref 覆蓋默認推斷時傳遞壹個泛型參數:

因為 ref 就是通過 reactive 包裝了壹個對象 ,然後將值傳給該對象的 value 屬性,這也就是為什麽每次訪問時我們都需要加上 .value 。可以簡單地把 ref(obj) 理解為 reactive({ value: obj }) 。

toRef 函數可以為傳入對象的某個屬性新創建壹個響應式引用 ref 。這個 ref 可以被傳遞,它會保持對其源 property 的響應式連接。

第壹個參數為源對象,第二個參數為源對象中的屬性名。

再通過個小 ? 對比下 ref 和 toRef :

當妳要將 prop 的某個 ref (即用 ref 包裝的屬性) 傳遞給復合函數時, toRef 很有用:

即使源 property 不存在, toRef 也會返回壹個可用的 ref。這使得它在使用可選 prop 時特別有用,因為可選 prop 並不會被 toRefs 處理。

了解完 toRef 後,就很好理解 toRefs 了,其作用是生成壹個新對象,內部 每個屬性都指向 傳入的對象的 相應 property 的響應式數據 ref

也就是說,新對象本身與原對象的無關聯(指向新的引用地址),但它的所有屬性卻都與源對象的對應屬性建立了響應性。

toRef 可以記成建立壹個 ref 屬性值的引用, toRefs 則是所有 ref 響應屬性值的引用。

看下 ?:

如果對響應式對象進行解構,被解構的兩個 property 的響應性都會丟失。

可以用 toRefs 函數建立起與源對象的響應式關聯:

實際開發中,比如需要解構 props,就可以這樣操作來保證與 props 參數的響應式引用:

但如果 title 是可選 prop,則傳入的 props 中可能沒有 title 。這種情況下, toRefs 將不會為 title 創建壹個 ref ,此時就需要用 toRef 替代它:

像上面這樣做確保我們的偵聽器能夠 根據 title prop 的變化做出反應

當從 組合式函數 返回響應式對象時, toRefs 非常有用,這樣消費組件就可以在不丟失響應性的情況下對返回的對象進行分解/擴散:

  • 上一篇:主站子站關系
  • 下一篇:壓縮文件處理
  • copyright 2024編程學習大全網