ref、reactive、toRef、toRefs的作用與區別（Vue3學習記錄）

Vue3中ref、reactive、toRef、toRefs都是與響應式數據相關的，就此做一份筆記作為區別

1.reactive[Obj]

reactive 用於為對象添加響應式狀態。接收一個js對象作為參數，返回一個具有響應式狀態的副本

• 獲取數據值的時候直接獲取，不需要加.value
• 參數只能傳入對象類型

 const data=reactive({//可以創建響應式的對象
      counter:1,
      doubleCounter:computed(()=>{
       return  data.counter*2;
      })
    })

2.ref[data]

ref 用於為數據添加響應式狀態

   //單值響應
      const msg2=ref('some msg')

      //使用元素的引用
      const desc=ref(null);

　　

3.toRef[data]

toRef 用於為源響應式對象上的屬性新建一個ref，從而保持對其源對象屬性的響應式連接。

接收兩個參數：源響應式對象和屬性名，返回一個ref數據。例如使用父組件傳遞的props數據時，要引用props的某個屬性且要保持響應式連接時就很有用。

 const myTitle = toRef(props, 'title')

    console.log(myTitle.value)

 

ref和toRef區別:

• ref->復制出來一個新數據, 修改響應式數據不會影響原始數據
• toRef->引用, 修改響應式數據會影響原始數據
• ref->數據發生改變, 界面就會自動更新
• toRef->數據發生改變, 界面也不會自動更新

 toRef應用場景:
      如果想讓響應式數據和以前的數據關聯起來, 並且更新響應式數據之后還不想更新UI, 那么就可以使用toRef

4.toRefs[arg1,...data]

可以理解為可以 解構賦值 的toRef

• 獲取數據值的時候需要加.value
• toRefs后的ref數據不是原始數據的拷貝，而是引用，改變結果數據的值也會同時改變原始數據
• 作用其實和 toRef 類似，只不過 toRef 是一個個手動賦值，而 toRefs 是自動賦值。

function userCounter() {  // counter相關
    const data=reactive({//可以創建響應式的對象
      counter:1,
      doubleCounter:computed(()=>{
       return  data.counter*2;
      })
    })

   
    return toRefs(data);//可以解構賦值
    }

解構賦值引用

 const {counter,doubleCounter}=userCounter();

 

學習引用：
https://blog.csdn.net/u010059669/article/details/112287552