總結Vue建立響應式資料物件（reactive、ref、toRef、toRefs）

一、reactive

reactive方法根據傳入的對象，建立傳回一個深度響應式物件（Proxy代理物件）。

reactive 會對傳入物件進行包裹，建立一個該物件的
Proxy代理物件。它是來源物件的響應式副本，不等於原始物件。它==“深層”==轉換了所有源物件的嵌套property（屬性）
，解包並維持其中的任何ref引用關係。

響應式物件屬性值改動，不管層級有多深，都會觸發響應式。新增和刪除屬性也會觸發響應式。

二、ref

ref 函數用來將一項資料包裝成一個響應式 ref 物件。它接收任意資料型別的參數，作為這個 ref 物件 內部的 value property 的值。

• 產生值類型資料（String#，Number，Boolean，Symbol）的響應式物件

• 可以用ref物件.value存取或更改這個值。

• 產生物件與陣列型別的回應式物件（物件與陣列一般不選用ref方式，而選用reactive方式，比較便捷）

#三、reactive對比ref

• 從定義資料角度比較：

  • ##ref用來定義：

    任意資料型別

  • reactive用來定義：

    物件（或陣列）類型資料

如何選擇ref 和reactive？建議：

• 基礎型別值(String，Number，Boolean，Symbol) 或單值物件(類似{ count: 1 }這樣只有一個屬性值的物件) 使用ref

• 引用型別值(Object、Array)使用reactive

• 從原理角度比較：
  • ref透過

    Object.defineProperty()的get和set#來實作回應式（資料劫持）。

  • reactive透過使用

    Proxy來實現響應式（資料劫持），並透過Reflect操作來源物件內部的資料

• 從使用角度比較：
  ref定義的資料：存取或更改資料需要
  • .value
  reactive定義的資料：操作資料與讀取資料皆不需要
  • .value。

四、toRef

• #針對一個響應式物件（reactive封裝）的prop（屬性）建立一個ref，並且保持回應式

• 兩者保持引用關係

#語法：

const 屬性名稱= toRef(物件,'屬性名稱')

五、toRefs

toRefs 是一種用於破壞響應式物件並將其

所有屬性轉換為ref 的實用方法

• 將響應式物件（reactive封裝）轉換成普通物件

• #物件的每個屬性(Prop)都是對應的ref

• #兩者保持引用關係

語法：

const 屬性名稱= toRefs(物件,'屬性名稱')

注意：reactive封裝的響應式對象，不要直接透過解構的方式return，這是不具有響應式的。

可以透過toRefs 處理，然後再解構返回，這樣才具有響應式

const state = reactive({ 
		age: 20,
      	name: 'zhangsan'});
return {...state}; // 错误的方式，会丢失响应式
return toRefs(state); // 正确的方式
//最佳方式
return ...toRefs(state)//将对象的各个属性的ref解构到对象根下面。

六、一些問題

為什麼有了reactive函數還需要ref函數呢？

當我們只想讓某個變數實現響應式的時候，採用reactive就會比較麻煩，因此vue3提供了ref方法進行簡單值的監聽，但並不是說ref只能傳進入簡單值，他的底層是reactive，所以reactive有的，它都有。

記得：ref本質也是reactive，ref(obj)等價於reactive({value: obj})

【相關推薦：

vue.js影片教學】

以上是總結Vue建立響應式資料物件（reactive、ref、toRef、toRefs）的詳細內容。更多資訊請關注PHP中文網其他相關文章！